How to use a depth texture in webgl2

Question

When you only want the color part of the frame, you can store depth in a render buffer.
This works fine for me on both webgl1 and webgl2.

When you also need to use the depth part you can't use a render buffer, you need to store it in a texture.
In webgl1 you need to get an extension to support it.
This also works fine for me in webgl1.

    const gl = canvas.getContext('webgl');
    const depthTextureExtension = gl.getExtension('WEBGL_depth_texture');
    if (!depthTextureExtension) {
        alert('Depth textures not supported');
    }

This feature should be available by default in webgl2.
Yet when I replace the code above with this:

    const gl = canvas.getContext('webgl2');

My code fails to render and I can not find any explanation why.

    this.texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, this.texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);


    this.depth = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, this.depth);
    checkGLErrors(gl); // OK
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, width, height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
    checkGLErrors(gl); // for webgl2: 1281 INVALID_VALUE
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);


    this.framebuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depth, 0);

You might find this article helpful

user128511
– user128511

2020-03-16 09:36:41 +00:00
Commented Mar 16, 2020 at 9:36 — user128511
– user128511, Commented Mar 16, 2020 at 9:36

user128511 · Accepted Answer · 2020-03-16 09:40:54Z

4

In WebGL2 DEPTH_COMPONENT is not a valid internal format. Use DEPTH_COMPONENT16, DEPTH_COMPONENT24 or DEPTH_COMPONENT32F

Example from here

  const level = 0;
  const internalFormat = gl.DEPTH_COMPONENT24;
  const border = 0;
  const format = gl.DEPTH_COMPONENT;
  const type = gl.UNSIGNED_INT;
  const data = null;
  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
                targetTextureWidth, targetTextureHeight, border,
                format, type, data);

answered Mar 16, 2020 at 9:40

user128511

Sign up to request clarification or add additional context in comments.

2 Comments

zoran404 Over a year ago

I'm fairly surprised to see this since none of the docs I seen so far mention that webgl2 does not support all of the same options as webgl1

zoran404 Over a year ago

Btw I actually follow a lot of your work, but I must have skipped some of your webgl2 posts, so I took the time to go through it

Collectives™ on Stack Overflow

How to use a depth texture in webgl2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related