Search code examples
three.jsshader

reconstruct worldposition.xyz from depth


I want to restore the worldposition.xyz from any pixel of a rendered image for postprocessing. With the help of the example from three.js i reconstructed the depth value. I think that i am close to my goal. Does anyone know how i can reconstruct the world positions from the vUv and the depth value?

depthShader = {

    uniforms: {

       'tDiffuse': { value: null }, 
       'tDepth': { value: null },
       'cameraNear': { value: 0 },
       'cameraFar': { value: 0 },            
    },

    vertexShader:`
        
       varying vec2 vUv;
        
       void main() {
                
          vUv = uv;
            
          vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
          gl_Position = projectionMatrix * modelViewPosition;
    
       }`,

    fragmentShader:`
       #include <packing>

       uniform sampler2D tDiffuse;
       uniform sampler2D tDepth;
       uniform float cameraNear;
       uniform float cameraFar; 
       varying vec2 vUv;

       float readDepth( sampler2D depthSampler, vec2 coord ) {
          float fragCoordZ = texture2D( depthSampler, coord ).x;
          float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
          return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
       }


       void main() {

          float depth = readDepth(tDepth, vUv);
          vec4 color = texture2D(tDiffuse, vUv);
        
          gl_FragColor.rgb = 1.0 - vec3( depth );
            
       }`

};


Solution

  • float clipW = cameraProjection[2][3] * viewZ + cameraProjection[3][3];
    vec4 clipPosition = vec4( ( vec3( gl_FragCoord.xy / viewport.zw, depth ) - 0.5 ) * 2.0, 1.0 );
    clipPosition *= clipW;
    vec4 viewPosition = inverseProjection * clipPosition;
    vec4 vorldPosition = cameraMatrixWorld * vec4( viewPosition.xyz, 1.0 );