Converting View Space to World Space in Three.js Shaders

The issue in your shader code appears to be related to how you're transforming from view space to world space. Let's analyze the problem:

The Issue

Your code is attempting to convert from view space to world space using:

GLSLCopied
vec4 wPos = CameraMatrixWorld * e;

However, there are a few potential issues:

1. The variable name CameraMatrixWorld might not match what's being passed to your shader
2. You need to ensure the matrix is properly passed to the shader
3. The matrix multiplication might need to be applied differently

Solution

Here's how to properly transform from view space to world space:

GLSLCopied
float depthTx = texture2D(tDepth, vUv).r;
float viewZ = getViewZ(depthTx);
float clipW = cameraProjectionMatrix[2][3] * viewZ + cameraProjectionMatrix[3][3];
vec4 viewPos = getViewPosition(vUv, depthTx, clipW);
vec4 worldPos = cameraMatrixWorld * viewPos;
gl_FragColor = worldPos;

Make sure you're passing the camera's world matrix to your shader correctly. In your Three.js code, you should have something like:

JAVASCRIPTCopied
// When setting up your shader material
shaderMaterial.uniforms.cameraMatrixWorld = { value: camera.matrixWorld };

// Make sure to update it if the camera moves
function update() {
    shaderMaterial.uniforms.cameraMatrixWorld.value.copy(camera.matrixWorld);
}

Additional Considerations

1. Ensure your getViewPosition function is correctly reconstructing the view-space position
2. Verify that the depth texture is properly set up and contains the expected values
3. Check that the matrix uniform is being updated if your camera moves
4. Make sure the matrix name in your shader matches exactly what you're passing from JavaScript

If you're still having issues, you might want to debug by outputting intermediate values (like the view position) to see where the transformation is breaking down.