ThreeJS Shader Distortion and Self-Shadows Issue

I can see you're experiencing different shadow behavior between WebGL and WebGPU when using vertex distortion. This is an interesting issue that relates to how shadows are calculated in different rendering contexts.

Potential Causes

Based on the code you've shared and the Three.js documentation, there are a few potential reasons for the discrepancy:

1. Shadow Calculation Differences: WebGPU and WebGL might handle shadow calculations differently, especially when vertex positions are modified in shaders.

2. Node Material Implementation: The MeshPhysicalNodeMaterial with TSL might handle vertex transformations differently than the traditional onBeforeCompile approach when it comes to shadow mapping.

3. Precision Issues: There could be precision differences between the two rendering backends that become apparent in shadow calculations.

Possible Solutions

Here are some approaches you could try:

1. Check Shadow Bias Settings: Try adjusting the shadow bias in your WebGPU implementation:

JAVASCRIPTCopied
directionalLight.shadow.bias = -0.0005; // Experiment with different values

2. Ensure Consistent Transformations: Make sure the vertex transformation is applied consistently in both shadow and regular rendering passes:

JAVASCRIPTCopied
mat.positionNode = Fn(() => {
  const position = positionLocal.xyz.toVar();
  // Make sure this transformation is applied in both regular and shadow passes
  const elevation = sin(positionWorld.x.mul(10)).mul(0.2);
  position.y.addAssign(elevation);
  return position;
})();

3. Debug Shadow Maps: You might want to visualize the shadow maps to see if there are differences:

JAVASCRIPTCopied
// Add this to see the shadow map
const debugCamera = directionalLight.shadow.camera;
const cameraHelper = new THREE.CameraHelper(debugCamera);
scene.add(cameraHelper);

4. Check for GLSL Version Differences: WebGPU might be using a different GLSL version than WebGL. You could try specifying the GLSL version explicitly:

JAVASCRIPTCopied
renderer.debug.checkShaderErrors = true; // Enable shader error checking
// For WebGL renderer
renderer.glslVersion = THREE.GLSL3; // Try with GLSL3 instead of default

Is It a Bug?

This could potentially be a bug in how Three.js handles vertex distortion in shadow calculations with the new Node Material system. The Three.js team is actively developing the WebGPU renderer and TSL, so there might be some inconsistencies compared to the more mature WebGL implementation.

I'd recommend reporting this issue on the Three.js GitHub repository with your examples, as it would be valuable feedback for the developers working on the WebGPU implementation.