Note: I’m using the WebGPU build 167 of three.js for this question and JSFiddle.
Update: setting logarithmicDepthBuffer: false appears to fix the issue (credit to mjurczyk), however the logarithmic depth buffer is a requirement for my scene, so I’d like to get the shadow working with it.
See screenshot and JSFiddle. I have a simple sphere between two “floors”, with a DirectionalLight pointing straight down from above. Notice how the sphere casts a shadow on the top “floor”. How can I remove the shadow from the top floor? I don’t want to disable the top floor’s ability to receive shadows from other objects though, so I don’t want to set receiveShadow = false on the top floor mesh.
I tried changing the shadowCam.near/shadowCam.far to Math.pow(10, n) and it either removed all the shadows or none at all. Is there a way to fix it without setting renderer.logarithmicDepthBuffer to false? I need logarithmicDepthBuffer for other things in my scene.
I didn’t mean you should literally set it to that value - rather to a value that’s a power of 10, ex. 10, 100, 1000, 10000, ... and so (unless you have that n defined, you’d be getting NaN as a result of pasting Math.pow(10, n) and not replacing n with some number.)
lol I knew what you meant; I tried a near value of Math.pow(10,1) and a far value of Math.pow(10,5), and it didn’t get rid of the top shadow (I had to increase DirectionalLight’s position.y after setting the near and far values so the scene was still within the shadow’s cone).
I get the same up-shadow when using it on a browser without WebGPU, so Three.js falls back to WebGL2. However, when I switch to WebGLRenderer everything works fine. Any specific reason to use WebGPU instead of WebGL?
I am not sure this is a bug, but it smells like a bug. It needs more tests to confirm this is a bug with WebGPU or its fall back to WebGL2.
I get the duplicate shadow issue with WebGPU, so if you get it for WebGL2 also, then it must be a bug for both of them.
I’m trying very hard to learn the WebGPU node-based material system, and I’m also trying to see what WebGPU is capable of. I have a massive landscape scene that requires the performance benefits of WebGPU; I tried using the standard three.js WebGLRenderer build but it could not compete with WebGPU. The massive landscape scene is also the reason I need to use logarithmicDepthBuffer; if logarithmicDepthBuffer is false at very far distances, vertices become more and more offset and “pop” up and down as the camera rotates.
WebGPU is just a faster renderer than WebGL overall. You can reach a higher polycount in your scene than you could with WebGL, which helps with rendering huge detailed terrain meshes. I have been testing a 2048x2048 textured heightmap in three.js, and it was very slow to render with WebGL (around 20fps). When I switched to the WebGPU build of three.js, I started getting over 200fps.
