WebGL 深度纹理全白？

Question

我正在使用 chrome 中的 WEBGL_depth_texture 将场景渲染到具有颜色和深度纹理的帧缓冲区。当我显示我的颜色纹理时效果很好，但我的深度纹理全是白色的。不应该是灰色的吗？

我的绘制纹理函数：

this.drawTexture = function() {

    //gl.viewport(0, 0, this.canvas.width, this.canvas.height);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);  

    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertBuffer);
    gl.vertexAttribPointer(this.VertexPosition, 2, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertTexCoordBuffer);
    gl.vertexAttribPointer(this.VertexTexture, 2, gl.FLOAT, false, 0, 0);

    gl.bindTexture(gl.TEXTURE_2D, this.depthTexture);


    gl.drawArrays(gl.TRIANGLES, 0, 6);

    gl.bindTexture(gl.TEXTURE_2D, null);

初始化：

           this.colorTexture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, this.colorTexture);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_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);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

        this.depthTexture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, this.depthTexture);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_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);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, size, size, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);

       // var framebuffer = gl.createFramebuffer();
        this.depthFramebuffer = gl.createFramebuffer();
        gl.bindFramebuffer(gl.FRAMEBUFFER, this.depthFramebuffer);
        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.colorTexture, 0);
        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depthTexture, 0);

顶点着色器：

attribute vec2 VertexPosition;
attribute vec2 TextureCoord;

varying vec2 vTextureCoord;

    void main() {
      gl_Position = vec4(VertexPosition, 0, 1);
      vTextureCoord = TextureCoord;
}

片段着色器

precision highp float;

uniform sampler2D uSampler;

varying vec2 vTextureCoord;

void main(void) {

    vec4 depth = texture2D(uSampler, vTextureCoord);
    gl_FragColor = depth;

}

Answer 1

您是否启用了深度测试？

gl.enable(gl.DEPTH_TEST);

如果没有进行深度测试，则不会向深度纹理写入任何内容。

如果不是这样，这里是一个工作示例。从它向后工作到您的样本。

var canvas = document.getElementById("c");
var gl = canvas.getContext('webgl', {antialias:false});
if (!gl) {
    alert("no WebGL");
}

// enable depth textures.
var depthTextureExtension = gl.getExtension("WEBGL_depth_texture");
if (!depthTextureExtension) {
    alert("depth textures not supported");
}

var program = twgl.createProgram(
    gl, ["vshader", "fshader"], ["a_position"]);
gl.useProgram(program);

var verts = [
      1,  1,  1,
     -1,  1,  0,
     -1, -1, -1,
      1,  1,  1,
     -1, -1, -1,
      1, -1,  0,
];
var vertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

// create a depth texture.
var depthTex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, depthTex);
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);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, 16, 16, 0,
              gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);

// Create a framebuffer and attach the textures.
var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT,
                        gl.TEXTURE_2D, depthTex, 0);
gl.bindTexture(gl.TEXTURE_2D, null);
console.log(gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE);

// use some other texture to render with while we render to the depth texture.
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(
   gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
   new Uint8Array([0, 0, 255, 255]));

// Turn on depth testing so we can write to the depth texture.
gl.enable(gl.DEPTH_TEST);

// Render to the depth texture
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.viewport(0, 0, 16, 16);
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 6);

// Now draw with the texture to the canvas
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.bindTexture(gl.TEXTURE_2D, depthTex);
gl.drawArrays(gl.TRIANGLES, 0, 6);

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<script id="vshader" type="whatever">
    attribute vec4 a_position;
    varying vec2 v_texcoord;

    void main() {
      gl_Position = a_position;
      v_texcoord = a_position.xy * 0.5 + 0.5;
    }
</script>
<script id="fshader" type="whatever">
precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D u_sampler;
void main() {
    vec4 color = texture2D(u_sampler, v_texcoord);
    gl_FragColor = vec4(color.r, 0, 0, 1);
}
</script>
<canvas id="c" width="300" height="300"></canvas>

Answer 2

我遇到了同样的问题，解决方法是线性化深度值。

void main(void) {
    float n = 1.0;
    float f = 2000.0;
    float z = texture2D(uSampler0, vTextureCoord.st).x;
    float grey = (2.0 * n) / (f + n - z*(f-n));
    vec4 color = vec4(grey, grey, grey, 1.0);
    gl_FragColor = color;
}

我一开始尝试将深度值除以 2 或 4，但每个像素的颜色始终相同。所以我认为问题来自其他地方。我的意思是，要小心。

存档来源：https://web.archive.org/web/20171127052549/http://blog.bongiovi.tw/webgl-depth-texture/