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

• Dev
• r84
• ...

Browser

• All of them
• Chrome 56
• Firefox 51
• Internet Explorer

OS

• All of them
• 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;

three.js/src/renderers/webgl/WebGLExtensions.js

Line 24 in 79e5837

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

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 ) ) {

three.js/examples/webgl_depth_texture.html

Line 130 in 399d806

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

[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

three.js/examples/webgl_depth_texture.html

Line 116 in 399d806

gl = canvas.getContext('webgl2');

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

[mrdoob]

Ah! I see I see.

[mrdoob]

Fixed!