Three.js 从纹理渲染深度

Question

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

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

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

Answer 1

three.js 提供了 DepthTexture class 可用于将渲染场景的深度保存到纹理中。这种纹理的典型用例是 post 处理效果，如 Depth-of-Field 或 SSAO。

如果将深度纹理绑定到着色器，则可以像对任何其他纹理一样对其进行采样。然而，采样的深度值有时会转换为不同的表示形式以供进一步处理。例如，您可以计算 viewZ 值（即渲染片段和相机之间的 z-distance）或在透视和正交深度之间转换，反之亦然。 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 );
}

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

Three.js 从纹理渲染深度

Three.js render depth from texture

depth-buffer

three.js