WebGL2 FBO深度附件值

Question

我只是想像这样使用WebGL2渲染场景的深度值：

//Texture
depthTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, depthTexture);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT24,
                width, height, 0,
                gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

//FBO
fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

然后我将其渲染为：

gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

gl.useProgram(shaderProgram);

//Just a torus...
gl.bindVertexArray(vao);

gl.colorMask(false, false, false, false);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.DEPTH_BUFFER_BIT);
...
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

//Then I draw a full screen quad that simply samples the depth texture
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
....

似乎工作正常，但是在采样附加的深度纹理时，我得到的看起来像是线性深度...

我用来渲染到FBO中的程序非常基础

韦尔：

#version 300 es

layout(location = 0) in vec3 position;

uniform mat4 projection;
uniform mat4 view;
uniform mat4 model;

void main() {

  gl_Position = projection * view * model * vec4(position, 1.);
}

破片：

#version 300 es
precision highp float;


layout(location = 0) out vec4 outColor;

void main() {
  outColor = vec4(1,0,0,1)
}

我原本以为深度缓冲区是对数的，即使我不能肯定地说我当前得到的结果是否是线性的，它也不是对数的。。。如果它确实是线性的，这就是为什么您应该从深度附件中获取数据，我非常满意，因为我可能需要线性而不是对数深度，但是目前我不确定这是否是预期的行为，或者我正在做出了点问题（可能是后者）

干杯

Answer 1

谢谢@LJ的链接。 我想我知道实际发生了什么。 我之前的结论不正确，主要是因为我不了解发生了什么。 我所看到的是预期的对数深度，但是由于我的近裁剪平面和远裁剪平面分别为1.和1000，并且圆环相对接近于裁剪平面，所以这就是1 / z曲线的一部分这些值聚在一起给出高精度。 当我增加圆环的深度时，我看到了很大的精度损失。 使用诸如如何读取WebGL2中附加到FBO的深度纹理并使用0.1和10的近和远剪切平面（由于圆环深度相对较小，以产生视觉反馈）进行线性化后，我可以看到深度是线性的。