WebGPU/Nodes/TSL VSM Shadow Map Issue in fps example

[brandon-xyzw]

Description

The identical settings/setup for the FPS example produces strong artifacting on some edges of the geometry of the map

Reproduction steps

1. Start the fsfiddle
2. Turn 180 degrees and walk to the end
3. See the problem (like the attached screenshot)

Live example

https://jsfiddle.net/aq8p2gzk/

Screenshots

Version

r180

Device

Desktop

Browser

Chrome

OS

MacOS

[brandon-xyzw]

Note that when I load the jsfiddle a WebGL environment, I still get the issue!

This likely means that it's not an issue with the WebGPU backend, but with the Nodes implementation of VSM, right?

[Mugen87]

In WebGPURenderer we switched to a depth texture for the depth comparison needed for shadow mapping. In WebGLRenderer the depth is packed into a RGBA value and later unpacked when doing the shadow map test.

Since the start of WebGPURenderer I have noticed precision issues when doing the depth comparison with depth textures. You need more often to use a shadow bias and not always is the result satisfying (e.g. like in your fiddle). Even setting the type property of the internal depth texture to FloatType does not save the day. If we can't find a solution to mitigate these precision issues, I fear we have to go back to the WebGLRenderer approach.

[brandon-xyzw]

I see, thanks for the response.

Yeah, I think if these issues keep coming up for depth textures, it makes sense to switch to the older approach. Maybe it's slightly more inefficient, but given the amount of changes happening in the new renderer, maybe it's better and simpler to keep the old method?