Support shadow mapping with reverse Z

[prideout]

Description

To repro, modify examples/webgl_shadowmap.html by passing reverseDepthBuffer: true into the WebGLRenderer constructor.

To get anything to render at all, you will also need to add renderer.getContext().clearDepth(0) (see my comment in #29579).

After these modifications, the demo looks okay except that there are no shadows.

Solution

Ideally shadow mapping is supported without requiring clients to write any extra code, since DepthBuffer in WebGLState already flips the depth function & depth clear value at a low level. I have not yet been able to find the missing piece.

Alternatives

Alternatively, maybe the onus is on the applications to handle this in the onBeforeShadow hook?

Additional context

No response

[eXponenta]

Another problem with shadow mapping - needs to flip compare function inside shader programs.
Because if you use strict bias checking by lower depth in fragment it will miss die to buffer inversion.

reverseZ pretty unstable because required to change everything that use depthTexture and compares depth manually.

[eXponenta]

@CodyJasonBennett
@Mugen87
Looks like we should flip this line when compare samples from depth buffer and current texel, didn't we?

three.js/src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl.js

Line 78 in 09c38ab

return step( compare, unpackRGBAToDepth( texture2D( depths, uv ) ) );

[CodyJasonBennett]

Yes, the depth range is inverted. Any NDC math will also need to be adjusted for the [0, 1] range like it would for WebGPU.

[WestLangley]

Also of interest is how ShadowMapViewer should render when reverse Z is true. Perhaps the viewer should be designed to render the same, regardless. 🤔