WebGPURenderer: Weird DirectionalLight Behavior Between WebGLRenderer and WebGPU Renderer

[cmhhelgeson]

Description

Working from code in pull request #28593, directional lighting behavior is strange when switching from WebGLRenderer to WebGPURenderer.

WebGLRenderer:

WebGPURenderer (behavior the same whether forceWebGL is enabled or not)

WebGPURenderer when switching lighting in webgl_camera_array.html sample from 4 to 50

It seems like the shadow written to the depth buffer in a previous pass is somehow being applied to the mesh's color output.

Reproduction steps

1. Work from branch in pull request #28593 which fixes array camera viewport sizing.
2. Go to Three.js example webgl_camera_array.html.
3. Import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
4. Go to line 87 of Three.js example webgl_camera_array.html. Switch new THREE.WebGLRenderer to new WebGPURenderer or new WebGPURenderer( { forceWebGL: true})

Code

renderer = new WebGPURenderer();

Live example

Screenshots

No response

Version

r166

Device

Desktop

Browser

Chrome

OS

Windows

[RenaudRohlinger]

Sounds like a bias issue generated from the different depth space of WebGPU and WebGL.

Maybe aligning both backend to 0-1 will solve this kind of issue. The best way would be to implement out of the box this extension for WebGL: https://registry.khronos.org/webgl/extensions/EXT_clip_control/

[cmhhelgeson]

Sounds like a bias issue generated from the different depth space of WebGPU and WebGL.

Maybe aligning both backend to 0-1 will solve this kind of issue. The best way would be to implement out of the box this extension for WebGL: registry.khronos.org/webgl/extensions/EXT_clip_control

I'm not sure if would be a bias issue when turning on forceWebGL causes the sample to exhibit the same behavior.

[RenaudRohlinger]

Ah, I see. I misunderstood the issue and thought the behaviors differed between the two backends, not the two renderers. In that case, it might be something to do with AnalyticLightNode. I can take a look at it!

[cmhhelgeson]

Getting similar weird moire-like patterns when converting the webgl_postprocessing_pixel example to WebGPU (with and without the WIP PixelationNode pass from PR #28802. Errors appear irrespective of whether the materials are MeshPhongMaterial or MeshPhongNodeMaterial, or whether forceWebGL is set on the THREE.WebGPURenderer.

Image below is without any post-processing applied:

[cmhhelgeson]

I believe these patterns are fixed with #28926, so I'll close the issue.