WebGL Depth Texture all white?

Question

I\'m using the WEBGL_depth_texture in chrome to render a scene to a framebuffer with a color and depth texture. When I display my color texture works fine, but my depthtextu

Answer 1

Did you enable depth testing?

gl.enable(gl.DEPTH_TEST);

If depth testing is not on nothing is written to the depth texture.

If that isn't it here's a working example. Work backward from it to your sample.

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