three.js icon indicating copy to clipboard operation
three.js copied to clipboard

WebGPURenderer: Add support for VSM.

Open Mugen87 opened this issue 1 year ago • 5 comments

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.

Mugen87 avatar Aug 24 '24 16:08 Mugen87

📦 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

github-actions[bot] avatar Aug 24 '24 16:08 github-actions[bot]

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 :)

image

sunag avatar Aug 26 '24 02:08 sunag

I have to improve filterNode to support VSM too, I think that after we merge this PR.

sunag avatar Aug 26 '24 02:08 sunag

It looks like we have another issue in WebGLBackend.

sunag avatar Aug 26 '24 09:08 sunag

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).

Mugen87 avatar Aug 26 '24 11:08 Mugen87

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.

Mugen87 avatar Sep 04 '24 08:09 Mugen87

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.

sunag avatar Sep 05 '24 01:09 sunag

Awesome, it really works!

Mugen87 avatar Sep 05 '24 08:09 Mugen87