从深度重建 worldposition.xyz

Question

我想从渲染图像的任何像素恢复 worldposition.xyz 以进行后处理。在 three.js 示例的帮助下，我重建了深度值。我认为我已经接近我的目标了。有谁知道我如何根据 vUv 和深度值重建世界位置？

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 );
            
       }`

};

Answer 1

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 );