Three.js: Error displaying Depth Texture sample on WebGL 2 compatible browser

[cx20]

Description of the problem

I tried to display the following sample on the WebGL 2 compatible browser (Chrome 56 and Firefox 51), but an error was displayed.
https://threejs.org/examples/webgl_depth_texture.html

Your browser does not support WEBGL_depth_texture.
This demo will not work.

When you disable WebGL 2, samples are displayed.

Is it a problem of sample check processing?

Three.js version

• [x] Dev
• [x] r84
• [ ] ...

Browser

• [ ] All of them
• [x] Chrome 56
• [x] Firefox 51
• [ ] Internet Explorer

OS

• [ ] All of them
• [x] Windows
• [ ] Linux
• [ ] Android
• [ ] IOS

Hardware Requirements (graphics card, VR Device, ...)

ThinkPad X260 + Intel(R) HD Graphics 520

[takahirox]

We need to update WebGLExtensions for 2.0

case 'WEBGL_depth_texture':
    extension = gl.getExtension( 'WEBGL_depth_texture' ) || gl.getExtension( 'MOZ_WEBGL_depth_texture' ) || gl.getExtension( 'WEBKIT_WEBGL_depth_texture' );
    break;

https://github.com/mrdoob/three.js/blob/79e5837956697e24ca6b1ecb008af5aa518247a4/src/renderers/webgl/WebGLExtensions.js#L24

WebGL WEBGL_depth_texture Khronos Ratified Extension Specification
...
Dependencies
Written against the WebGL API 1.0 specification.
No longer available as of the WebGL API 2.0 specification.

https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/

@mrdoob
Will we add WebGLExtensions2,
have global value isWebGL2 to detect if the browser supports 2.0,
or anything else?

[mrdoob]

Actually, I think we should remove all the isWebGL2 stuff from WebGLRenderer...

[takahirox]

Cool! Are we gonna get workable WebGL2Renderer in r85?

If not, I think we need a workaround to this issue so far.
It seems we can avoid this error by adding WebGL2 detection check here

if ( !renderer.extensions.get('WEBGL_depth_texture' && ! isWebGL2 ) ) {

https://github.com/mrdoob/three.js/blob/399d806f01982b0105d46287f660fa8638a2a016/examples/webgl_depth_texture.html#L130

[takahirox]

@mrdoob
Do you think we should add an workaround I mentioned so far?

[mrdoob]

I'm confused... If the browser supports WebGL 2, WEBGL_depth_texture no longer works in WebGL1?

[takahirox]

To be more precise, depending not on the browser, but on context.

If we use webgl2 context WEBGL_depth_texture doesn't work and we can directly access gl.UNSIGNED_INT_24_8 while we access it via WEBGL_depth_texture extension in webgl1 context.

https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_depth_texture

https://github.com/mrdoob/three.js/blob/399d806f01982b0105d46287f660fa8638a2a016/examples/webgl_depth_texture.html#L116

https://github.com/mrdoob/three.js/blob/dev/src/renderers/WebGLRenderer.js#L2895

[mrdoob]

Ah! I see I see.

[mrdoob]

Fixed!