WEBGL-FBO: Why is the DEPTH_COMPONENT texture blank after rendercall

Question

To The Readers: "The solution by gman works for the question, but my own Problem was a in a diffrent part of the Code".

I just wanted to render my Scene to a Framebuffer with a DepthComponent_texuture. And wanted to render this texture to the screen, so that i olny see the DepthComponent on my Screen. I want to get into Shadowmapping and throught this would be a good exercise.

Stuff i did: -set read/drawBuffer(s) to gl.NONE because i dont hava a colorAttachment (probably dosent even matter). -when creating the depth texture i tried gl.texImage2D but could not get it to work. -When i am using a ColorAttachment isted of a DepthAttachment , i get a normal result(The color Attachment_texture just has the sceen)[obviously here i also added a DepthRenderbuffer(DEPTH24STENCTIL8) ].

//creating the Framebuffer
id = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER,id);

atex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, atex);
gl.texStorage2D(gl.TEXTURE_2D,1,gl.DEPTH_COMPONENT16,width,height);
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);

gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, atex, 0);

gl.drawBuffers([gl.NONE]);
gl.readBuffer(gl.NONE);

gl.bindFramebuffer(gl.FRAMEBUFFER,null);
//----------------
//In the renderLoop

//renders the scene with the pbrShader to the Framebuffer
//The FragmentShader of the PBRShader is empty cause i dont have any 
//ColorAttachments and the Vertex is just transforming the position and
//passing the uvs[...]
render(scene,pbrShader,framebuffer);
//renders a texture to the screen using a very simple vertex shader and
//a Fragment Shader that just takes the texture and mapps it to the Screen
renderScreen(framebuffer.atex);



//Some more Code for clarity:
renderScene(scene,shader,fbo=null){
   if(fbo!=null){
       fbo.activate();
   }
   this.gl.fClear();
   let batches = new Map();
   let modals = scene.getEntitiesByType("modal");
   modals.forEach(modal=>{
        if(batches.has(modal.mesh)){
            batches.get(modal.mesh).push(modal);
        }else{
            batches.set(modal.mesh,[modal]);
        }
    })
    shader.activate().prepareScene(scene);
    batches.forEach((batch,mesh)=>{
        shader.prepareVAO(mesh);
        batch.forEach(modal=>{
             shader.prepareInstance(modal);
             shader.drawVAO(mesh);
        });
        shader.unbindVAO(mesh);
    });
    shader.deactivate();
    if(fbo!=null){
        fbo.deactivate();
    }
}

Answer 1

Here's working example of using depth textures in WebGL2

 const vs = `#version 300 es layout(location = 0) in vec4 a_position; out vec2 v_texcoord; void main() { gl_Position = a_position; v_texcoord = a_position.xy * 0.5 + 0.5; } `; const fs = `#version 300 es precision mediump float; in vec2 v_texcoord; uniform sampler2D u_sampler; out vec4 outColor; void main() { vec4 color = texture(u_sampler, v_texcoord); outColor = vec4(color.r, 0, 0, 1); } `; function main() { var gl = document.querySelector("canvas").getContext('webgl2'); if (;gl) { return alert("no WebGL2"). } var program = twgl,createProgram(gl, [vs; fs]). 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;NEAREST). gl.texParameteri(gl,TEXTURE_2D. gl,TEXTURE_MAG_FILTER. gl;NEAREST); const mipLevel = 0; const depthTexWidth = 16; const depthTexHeight = 16. gl.texImage2D( gl,TEXTURE_2D, mipLevel. gl,DEPTH_COMPONENT24, depthTexWidth, depthTexHeight, 0. gl,DEPTH_COMPONENT. gl,UNSIGNED_INT; 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). // 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,RGBA8, 1, // width 1, // height 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): // note. we don't need to set u_sampler because uniforms // default to 0 so it will use texture unit 0 which // is the also the default active texture unit // Render to the depth texture gl.bindFramebuffer(gl,FRAMEBUFFER; fb). gl,viewport(0, 0, depthTexWidth; depthTexHeight). 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); } main();

 <script src="https://twgljs.org/dist/4.x/twgl.min.js"></script> <canvas></canvas>