2

DEPTH_ATTACHMENT给定一个 WebGL 场景（从 THREE.js 创建），您将如何从给定的帧缓冲区访问浮点值（作为 WebGL 上下文之外的数据数组）已使用framebufferTexture2D.

到目前为止，我已经收集了一种解决方案，即使用自定义着色器覆盖将场景渲染到纹理目标，该着色器覆盖访问深度纹理信息，然后将其编码为 RGB 格式。使用的代码与此处的 THREE.js 示例非常相似：Depth-Texture-Example。

#include <packing>

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

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() {
    vec3 diffuse = texture2D(tDiffuse, vUv).rgb;
    float depth = readDepth(tDepth, vUv);
    gl_FragColor.rgb = vec3(depth);
    gl_FragColor.a = 1.0;
}

一旦渲染完成，我就可以使用readPixels将特定像素读取到数组中。但是，此选项的精度非常低，仅限于 256 个给定的离散值vec3(float) = vec3(float, float, float)。有没有办法从这种特定方法或替代方法中获得更高的精度？

最终，我想要的是在 WebGL 上下文之外以一种有效的方式访问深度缓冲区作为浮点值数组。我有一个自定义光栅化器，可以创建一个相当好的深度缓冲区，但我不想浪费任何时间重做已经完成的步骤。

4

1 回答 1

2

一种可能性是将 32 位IEEE 754浮点值的 24 个有效位编码为vec3：

vec3 PackDepth(float depth)
{
    float depthVal = depth * (256.0*256.0*256.0 - 1.0) / (256.0*256.0*256.0);
    vec4 encode    = fract(depthVal * vec4(1.0, 256.0, 256.0*256.0, 256.0*256.0*256.0));
    return encode.xyz - encode.yzw / 256.0 + 1.0/512.0;
}

和颜色通道可以解码为 [0.0, 1.0] 范围内的深度，如下R所示G ：B

depth = (R*256.0*256.0 + G*256.0 + B) / (256.0*256.0*256.0 - 1.0);
于 2017-12-22T17:47:59.830 回答