WebGPURenderer: Add support for VSM.
Related issue: -
Description
This PR adds support for Variance Shadow Maps (VSM) to WebGPURenderer.
This is WIP though since the current code only supports one shadow casting light. I'm not sure why the shadows of an additional shadow casting light are currently ignored. The new example illustrates this issue. You only see the shadow of the spot light but no the directional light.
Some help/support in this context would be welcome 😇 .
Side note: VSM works by preprocessing the actual shadow map with two blur passes. The render target of the second blur pass is then used as the new shadow map in the shader. The shadow information are not stored as floats in a depth texture but in special two-component distribution vectors. A smart calculation based on these data leads to the final occlusion value.
📦 Bundle size
Full ESM build, minified and gzipped.
| Before | After | Diff | |
|---|---|---|---|
| WebGL | 685.2 kB 169.6 kB |
685.2 kB 169.6 kB |
+0 B +0 B |
| WebGPU | 823 kB 220.9 kB |
826 kB 221.4 kB |
+2.96 kB +597 B |
| WebGPU Nodes | 822.6 kB 220.8 kB |
825.6 kB 221.4 kB |
+3.38 kB +691 B |
🌳 Bundle size after tree-shaking
Minimal build including a renderer, camera, empty scene, and dependencies.
| Before | After | Diff | |
|---|---|---|---|
| WebGL | 462 kB 111.5 kB |
462 kB 111.5 kB |
+0 B +0 B |
| WebGPU | 522.3 kB 140.8 kB |
525.2 kB 141.5 kB |
+2.95 kB +732 B |
| WebGPU Nodes | 478.9 kB 130.7 kB |
481.9 kB 131.4 kB |
-40.39 kB +712 B |
The problem was in NodeFrame which was not restoring the scene from the previous render in the call tree, I still have to see the best solution, but I already feel relieved since it was kind of difficult to find the problem :)
I have to improve filterNode to support VSM too, I think that after we merge this PR.
It looks like we have another issue in WebGLBackend.
The behavior in WebGL seems odd. You can see the directional light but not its shadows. The spot light is completely missing in the scene (light + shadow).
I stall the PR for the moment since I could not figure out the root cause so far. Hopefully the issue will pop up in a different, more isolated context.
This PR https://github.com/mrdoob/three.js/pull/29326 should fix it, sorry the delay, I had to deconstruct the code step by step to find the source of the problem.
Awesome, it really works!