graphics - 如何在 WebGL2 中读取附加到 FBO 的深度纹理

Question

我现在正在使用 WebGL2.0 进行延迟着色。我现在面临的一个主要问题是我无法从 DEPTH_ATTACHMENT 中读取深度值。实际上，我使用 DEPTH24_STENCIL8 纹理创建自己的 GBuffer 作为 DEPTH_ATTACHMENT，然后将此纹理绑定到采样器并尝试在延迟着色部分中读取片段着色器中的值，如下所示：

uniform sampler2D u_depthSampler;
vec4 depthValue = texture(u_depthSampler, v_uv);

然后我将 depthValue 设置为我的着色片段着色器中的输出：

layout(location = 0) out vec4 o_fragOut;
o_fragColor.xyz = depthValue.xyz;
o_fragColor.w = 1.0;

在Firefox上执行此操作时，它没有报告任何错误，但输出颜色只是纯红色。（我认为这意味着 vec3(1.0, 0.0, 0.0) ）。这真的让我很困惑。任何人都可以提供一些指导吗？我的 glsl 代码有问题吗？谢啦~

Answer 1

深度缓冲区不是线性的。要对其进行线性化，请使用以下公式：

float f = 1000.0; //far plane
float n = 1.0; //near plane
float z = (2.0 * n) / (f + n - texture2D( diffuse, texCoord ).x * (f - n));

gl_FragColor = vec4(z,z,z, 255)

Answer 2

抱歉，我可能犯了一个大错误，即深度纹理实际上几乎是纯红色，但不是真正的红色。我试过这个：

float depthPow = pow(depthValue.x, 10.0);
o_fragOut.xyz = vec3(depthPow);

我得到了我认为正确的结果。