Three.js 从纹理渲染深度

Question

是否有可能以某种方式从预渲染纹理渲染到深度缓冲区？

我正在像原版生化危机游戏一样预渲染场景，我想将预渲染的深度和颜色纹理应用到屏幕上。

我以前使用技术来制作更简单的深度代理场景，但我想知道是否有办法使用精确的预渲染深度纹理来代替。

Answer 1

three.js 提供了一个DepthTexture 类，可用于将渲染场景的深度保存到纹理中。这种纹理的典型用例是后处理效果，如景深或 SSAO。

如果将深度纹理绑定到着色器，则可以像任何其他纹理一样对其进行采样。但是，有时会将采样的深度值转换为不同的表示形式以进行进一步处理。例如，您可以计算 viewZ 值（即渲染片段和相机之间的 z 距离）或在透视和正交深度之间进行转换，反之亦然。 three.js 为此类任务提供帮助函数。

官方depth texture 示例使用这些辅助函数来可视化场景的深度纹理。重要的功能是：

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

在示例中，生成的深度值用于计算片段的最终颜色。