how to get access to depth texture

[X-skyer]

Hi, I am working in WebGL1.0 using twgl, recently I want to use this extension;"WEBGL_depth_texture", and create frame buffer using these code:

const attachments = [
{ format: Constants.RGBA, type: Constants.UNSIGNED_BYTE, min: Constants.NEAREST, mag: Constants.NEAREST, wrap: Constants.REPEAT },
{ format: Constants.DEPTH_COMPONENT16, type: Constants.UNSIGNED_SHORT, min: Constants.NEAREST, mag: Constants.NEAREST, wrap: Constants.REPEAT },
];

this.frameBufferInfo = createFramebufferInfo(WebGLContext.getInstance(), attachments, this.width, this.height);

but when i want to use the depth texture as input in anthor shader:

this.frameBufferInfo.attachments[1];

it goes wrong, does any one can tell me where i'm wrong.

[greggman]

DEPTH_COMPONENT16 is not a depth texture it's a renderbuffer, DEPTH_COMPONENT is a texture, and the valid types are gl.UNSIGNED_SHORT and gl.UNSIGNED_INT

And of course you need to check for and enable 'WEBGL_depth_texture' either manually or by calling twgl.addExtensionsToContext (though even if you call that you still need to check the extension exists if you want to handle failure

[X-skyer]

{ format: Constants.DEPTH_COMPONENT, type: Constants.UNSIGNED_SHORT, min: Constants.NEAREST, mag: Constants.NEAREST, wrap: Constants.REPEAT }
Thanks! I tried this, but got an error : "unknown internal format". which is from function twgl.getTextureInternalFormatInfo().

but in this function, i found no support for DEPTH_COMPONENT

[greggman]

Color me embarrassed. Apparently I've never made a depth texture with twgl in WebGL1

4.16.0 should work

Example:

https://twgljs.org/examples/depthtexture-webgl1.html

Relevant code

  const attachments = [
    { format: gl.RGBA, },
    { format: gl.DEPTH_COMPONENT },
  ];
  const fbi = twgl.createFramebufferInfo(gl, attachments, 256, 256);