repro: Babylon.js Playground
Can we use autoClear and autoClearDepthAndStencil in webgpu? Its just a white screen for me with no errors in console. This is way different from webgl2’s. You can toggle the false to true to see the diffs.
Sorry for the 2 in 1 but I’m guessing its related…
It looks like depth textures are not initialized with 0 by default in WebGL but 1, whereas they are in WebGPU. So, when autoClear and autoClearDepthAndStencil are both false, depth texture is not cleared by Babylon and retain their default values. Because it’s 0 in WebGPU, nothing is rendered.
A simple workaround is to manually clear the texture at startup:
This PR will do the call automatically:
I’m still not getting the correct result even with the PR. I opened 2 default PG tabs, set one of them to webGPU. Then copy-pasted the code in repro (in the OP) to both, hit Run. The webGPU is showing white background instead of scene.clearColor? Its working correctly if I test in a skybox tho, wai?
Don’t know if this is impt but I have never gotten smearing in my local dev scene with webgl2 since adding the options from the start 6-7 yrs ago ? And testing on my local dev again with the simplest of scene switching only between new Engine and new WebGPUEngine confirms that the smearing only happens on WebGPUEngine but never on Engine. Tested in Chrome Incognito, wai?
scene.autoClear = false;
scene.autoClearDepthAndStencil = false;
edit: btw, I have no idea if webGPU benefits from these optimizations, if they don’t, it would be best to doc it somewhere.
I’m seeing the same thing in both WebGL and WebGPU:
The background is white because it’s the color of the canvas: as we don’t clear it, we get the default color. If you set another color at HTML level (like document.getElementById("renderCanvas").style.backgroundColor = "red"), you will see the color you set.
What do you see on your end?
Top: webGL2, bot: webGPU. You have to open 2 separate tabs, reusing the same tab shows white bg for both.
Ok, I can reproduce it in WebGL by browsing https://playground.babylonjs.com and pasting:
scene.autoClear = false; // Color buffer
scene.autoClearDepthAndStencil = false; // Depth and stencil
after the creation of the scene and by clicking the “Play button”.
However, if we save the PG, then refresh the page, the background is now white…
I don’t know why this behaves this way in WebGL, but WebGPU’s behavior seems correct to me, as it is always consistent and matches what we expect (we see the canvas color because we don’t clear it). Could it be related to the Monaco editor (cc @RaananW)?
[…] Ah, that could simply be because when you first access https://playground.babylonjs.com/, we display the default PG, which clears the canvas to blue. Then, when you add “scene.autoClear = false” and play the PG, the canvas retains its current color in WebGL, but not in WebGPU. This seems to be different behavior from the browser, but it shouldn’t really matter in a real-world scenario (where you don’t run your code twice in a row, once with autoClear enabled and then with autoClear disabled), right?
There is something wrong with the webgl playground on first frame.
Checking that now.
The weird thing is not that the clearColor doesn’t work - it is the first frame that is not rendered. Open the playground (clean playground) then remove the ground and add those lines - pressing the run button lees the ground and the background color. Now resize the window, and it updates. Feels like the first render call is not executed corrrectly.
This looks expected to me, if the browser simply takes the canvas as it is when we first come to the page: if we remove the ground mesh and don’t clear the scene anymore, when we play the PG, we start with a canvas where the ground and the sphere are visible. When we move, only the sphere smears because there’s no ground mesh in the scene anymore.
yep, it makes sense 
So it seems like its all wai? Marking as solved. Thanks!