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

Question

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);

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;

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~

Answer 1

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)

Answer 2

Sorry that I may made a big mistake that the depth texture is acutually nearly pure red but not really red. I tried this:

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

And I get the right result I think.