如何在WebGL2中读取附加到FBO的深度纹理 [英] How to read depth texture attached to FBO in WebGL2

问题描述

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

I'm now working on the deferred shading using WebGL2.0. One primary problem I'm now facing is that I can't read the depth value from the DEPTH_ATTACHMENT. Actually I creat my own GBuffer with a DEPTH24_STENCIL8 texture as DEPTH_ATTACHMENT, then I bind this texture to the sampler and try to read the value in my fragment shader in deferred shading part like this:

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

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

Then I set the depthValue as output in my shading fragment shader:

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代码有什么问题吗? THX〜

When doing this on firefox, it didn't report any error, but the output color is just pure red.(which means vec3(1.0, 0.0, 0.0) I think). This really confuse me a lot. Can anyone provide some instruction? Is there any problem with my glsl code? THX~

推荐答案

深度缓冲区不是线性的.要使其线性化，请使用以下公式:

The depth buffer is not linear. To linearize it use this formula:

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)

这篇关于如何在WebGL2中读取附加到FBO的深度纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！