three.js 中的 perspectiveDepthToViewZ

three.js 中的 perspectiveDepthToViewZ

ref:
https://blog.csdn.net/qq_35158695/article/details/120907217

https://mynameismjp.wordpress.com/2010/09/05/position-from-depth-3/

https://mynameismjp.wordpress.com/2009/03/10/reconstructing-position-from-depth/

https://blog.csdn.net/qq_35158695/article/details/120907217

投影矩阵

$$P_{clip}=\left[\begin{array}{cccc}\frac{2n}{r-l}& 0& \frac{r+l}{r-l}& 0\\ 0& \frac{2n}{t-b}& \frac{t+b}{t-b}& 0\\ 0& 0& A& B\\ 0& 0& -1& 0\end{array}\right]\ast P_{view}$$

其中:
$$A=-\frac{f+n}{f-n}$$

$$B=\frac{-2fn}{f-n}$$

那么:

$$z_{clip}=\frac{-(f+n)}{f-n}{z}_{view}+\frac{-2fn}{f-n}\text{\hspace{1em}(1-1)}$$

$z=z_{view}$, $z_{ndc}$有:

$$\begin{array}{rl}{z}_{ndc}& =\frac{\frac{-(f+n)}{f-n}z+\frac{-2fn}{f-n}}{-z}\\ & =\frac{f+n+2fn\frac{1}{z}}{f-n}\\ & =\frac{fz+nz+2fn}{(f-n)z}\end{array}\text{\hspace{1em}(1-2)}$$

2 深度纹理

深度纹理 depthBuffer 的 depth 范围是 0 ～ 1, $z_{ndc}$范围是 -1~1

$$depth=z_{ndc}\frac{1}{2}+\frac{1}{2}\text{\hspace{1em}(1-3)}$$

式子(1-2)带入到(1-3),有:

$$\begin{array}{rl}depth& =\frac{fz+nz+2fn}{2(f-n)z}+\frac{(f-n)z}{2(f-n)z}\\ & =\frac{fz+nz+2fn+fz-nz}{2fz-2nz}\\ & =\frac{fz+fn}{fz-nz}\\ & =\frac{(n+z)f}{(f-n)z}\end{array}\text{\hspace{1em}(1-4)}$$

$$z_{view}=\frac{nf}{d(f-n)-f}$$

code

// NOTE: https://twitter.com/gonnavis/status/1377183786949959682
// 根据viewZ得到深度
float viewZToPerspectiveDepth( const in float viewZ, const in float near, const in float far ) {
	return ( ( near + viewZ ) * far ) / ( ( far - near ) * viewZ );
}

// 根据深度信息得到 viewZ
float perspectiveDepthToViewZ( const in float invClipZ, const in float near, const in float far ) {
	return ( near * far ) / ( ( far - near ) * invClipZ - far );
}

可视化深度

float readDepth( sampler2D depthSampler, vec2 coord ) {
    float fragCoordZ = texture2D( depthSampler, coord ).x;

    // viewZ 即渲染片段和摄影机之间的z距离
    float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
    return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
}

void main() {
    // readDepth() will return a linearized depth value that will be used to compute the fragment's color value
    float depth = readDepth( tDepth, vUv );

    gl_FragColor.rgb = 1.0 - vec3( depth ); // change this bit to invert colors
    gl_FragColor.a = 1.0;
}