DirectionalLight castShadow cannot be enabled while CSM is enabled

[mlt131220]

Description

Reproduction steps

Code

// code goes here

Live example

• jsfiddle-latest-release WebGLRenderer
• jsfiddle-dev WebGLRenderer
• jsfiddle-latest-release WebGPURenderer
• jsfiddle-dev WebGPURenderer

Screenshots

No response

Version

r174

Device

No response

Browser

No response

OS

No response

[Mugen87]

Do you mind demonstrating the issue with a live example? Please use one of the fiddles from the issue template.

I suspect the problem is that CSM injects custom shader code into the global shader chunks ShaderChunk.lights_fragment_begin and ShaderChunk.lights_pars_begin. There might be a side effect depending on the scene setup.

[mlt131220]

Do you mind demonstrating the issue with a live example? Please use one of the fiddles from the issue template.

I suspect the problem is that CSM injects custom shader code into the global shader chunks ShaderChunk.lights_fragment_begin and ShaderChunk.lights_pars_begin. There might be a side effect depending on the scene setup.

https://jsfiddle.net/kmregcvw/22/

[Mugen87]

Yeah, unfortunately this is a current limitation of CSM. CSM modifies defined materials via CSM.setupMaterial() to make it "CSM ready". However, that affects all normal directional lights as well.

This is a more fundamental issue that is related to how custom shader code is injected into the default materials. If you can, I suggest you switch to WebGPURenderer where the issue does not appear because of the complete different material system.

https://jsfiddle.net/h3ge9sbL/1/

[mlt131220]

Yeah, unfortunately this is a current limitation of CSM. CSM modifies defined materials via CSM.setupMaterial() to make it "CSM ready". However, that affects all normal directional lights as well.

This is a more fundamental issue that is related to how custom shader code is injected into the default materials. If you can, I suggest you switch to WebGPURenderer where the issue does not appear because of the complete different material system.

https://jsfiddle.net/h3ge9sbL/1/

On the other hand, I also need to support older browser versions. And since the WebGL and WebGPU apis of threejs are not the same, it is difficult to migrate larger projects, is there any way to quickly switch from WebGLRenderer to WebGPURenderer for larger projects?
Like BabylonJS

[Mugen87]

On the other hand, I also need to support older browser versions.

WebGPURenderer uses WebGL 2 as a fallback if WebGPU isn't available on a device.

is there any way to quickly switch from WebGLRenderer to WebGPURenderer for larger projects? Like BabylonJS

If you can just exchange the renderers depends on your app. Since WebGPURenderer comes with a new node-based material system, there are migration tasks if you use custom materials. Also some addons like Reflector or all post processing classes have pendants for WebGPURenderer. The official examples might be a help in this context to get a better feeling of the new approaches. Related #29295.