Three.js: Depth+Stencil Attachment fails in WebGL2

[vanruesc]

Description of the problem

Using a DepthTexture attachment with DepthStencilFormat and UnsignedInt248Type fails in WebGL2. The issue can be reproduced by uncommenting the lines 60 & 61 in the following example: https://jsfiddle.net/07yvba98/

Chrome reports the following error on my system:

VM101 three.module.js:21136 WebGL: INVALID_VALUE: texImage2D: invalid internalformat
[.WebGL-0000015DAF32A740] GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete.
[.WebGL-0000015DAF32A740] GL_INVALID_FRAMEBUFFER_OPERATION: Draw framebuffer is incomplete

Firefox spits out a bit more information:

Error: WebGL warning: texImage: Invalid internalformat: 0x84f9
Error: WebGL warning: clear: Framebuffer not complete. (status: 0x8cd6) <enum 0x8d20>: Attachment has no width or height. three.module.js:23752:7
Error: WebGL warning: clear: Framebuffer must be complete. three.module.js:23752:7
Error: WebGL warning: drawElementsInstanced: Framebuffer not complete. (status: 0x8cd6) <enum 0x8d20>: Attachment has no width or height. three.module.js:16273:6
Error: WebGL warning: drawElementsInstanced: Framebuffer must be complete.

MS Edge does __not__ report any errors and works as expected. (See this comment)

This document states that the internalFormat 0x84f9 represents DEPTH_STENCIL_OES while 0x88F0 represents the correct sized format DEPTH24_STENCIL8_OES which should be used in a WebGL2 context.

I'm not sure if this is a bug in WebGLTextures or a browser/ANGLE issue.

Related: #16769

Three.js version

• [x] Dev
• [x] r114

Browser

• [ ] All of them
• [x] Chrome 80.0.3987.132
• [x] Firefox 74.0
• [ ] Microsoft Edge 44.18362.449.0 (18.18363)

OS

• [ ] All of them
• [x] Windows 10
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

[Mugen87]

I'm not sure if this is a bug in WebGLTextures or a browser/ANGLE issue.

Any chances to make a pure WebGL example and verify this (see https://github.com/mrdoob/three.js/issues/18876#issuecomment-598666385)?

[vanruesc]

Yes, will do that later today.

[vanruesc]

Pure WebGL2 implementation: https://codesandbox.io/s/webgl-depth-stencil-jhvzf

I'm not 100% sure if I've done the depth stencil attachment part right, but it looks like it's working.
The depth texture code starts at line 175 in App.js.

[vanruesc]

It turns out that my MS Edge version doesn't actually support WebGL 2. The context creation simply failed and I was passing a null context into WebGLRenderer which caused it to fall back to WebGL 1. I just noticed this while I was trying to run the pure WebGL 2 example in Edge.

This removes my suspicion of it being a browser/ANGLE issue.

[Mugen87]

I'll have a go on this one as soon as #18876 is resolved. There is already a PR that slightly refactors WebGLTexture to fix the issue. When it's merged, I'll try to see what bits are still necessary for depth+stencil.