Depth+Stencil Attachment fails in WebGL2

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

• Dev
• r114

Browser

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

OS

• All of them
• Windows 10
• macOS
• Linux
• Android
• iOS