ShaderMaterial: Extension fragDepth no longer working.

[dragly]

Description of the problem

In the latest version of three.js, the fragDepth extension no longer works.

Here is an example that simply sets the fragment depth in version r110, which works fine:

https://jsfiddle.net/5o9s8kru/

Here is a corresponding example using version r113:

https://jsfiddle.net/5o9s8kru/1/

The relevant shader material is set up as follows:

    var material = new THREE.ShaderMaterial( {
        extensions: {
          fragDepth: true,
        },
        fragmentShader: `
        void main() {
        	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
          gl_FragDepthEXT = 0.5;
        }
        `,
        vertexShader: `
        void main()	{
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );
        }`
    } );

In the most recent version, the shader compilation fails with

ERROR: 0:110: 'GL_EXT_frag_depth' : extension is disabled

The error is caused by a typo introduced in #18279, where fragDepth is replaced with frawbuffer:

#18279 (comment)

Three.js version

• Dev
• r113

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

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

[Mardonis]

Hello,

Upon doing an excellent threejsfundementals.org tutorial https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html, where at the bottom it shows you three cubes spinning, I am getting two warnings as follows for v113 but if you change it to v112 or below say v110 it is fine errors go away as stated by @dragly. Is this part of that bug? Hope this helps.

THREE.WebGLRenderer: EXT_frag_depth extension not supported.
get | @ | three.module.js:16000
  | WebGLPrograms.getParameters | @ | three.module.js:18725
  | initMaterial | @ | three.module.js:24971
  | setProgram | @ | three.module.js:25161
  | WebGLRenderer.renderBufferDirect | @ | three.module.js:24193
  | renderObject | @ | three.module.js:24953
  | renderObjects | @ | three.module.js:24923
  | WebGLRenderer.render | @ | three.module.js:24702
  | render | @ | main.js:84
  | requestAnimationFrame (async) |   |  
  | main | @ | main.js:89
  | (anonymous) | @ | main.js:92

THREE.WebGLRenderer: EXT_shader_texture_lod extension not supported.
get | @ | three.module.js:16000
  | WebGLPrograms.getParameters | @ | three.module.js:18727
  | initMaterial | @ | three.module.js:24971
  | setProgram | @ | three.module.js:25161
  | WebGLRenderer.renderBufferDirect | @ | three.module.js:24193
  | renderObject | @ | three.module.js:24953
  | renderObjects | @ | three.module.js:24923
  | WebGLRenderer.render | @ | three.module.js:24702
  | render | @ | main.js:84
  | requestAnimationFrame (async) |   |  
  | main | @ | main.js:89
  | (anonymous) | @ | main.js:92

Thanks
Mardonis

[Mugen87]

I don't think these warnings are related to this issue. Seems like the mentioned extensions are not supported by your platform.

[Mardonis]

I thought the same thing as well but find it odd that it would work for v112 but not v113. If you goto a codepen example for that link I gave with the three cubes and click on the console and change to v113 what does it say on your platform?

[Mugen87]

Do you mean the live examples on threejsfundamentals? Well, I've changed one example to import * as THREE from 'https://threejs.org/build/three.module.js'; which means the latest version R113 is now used. I see no warnings after doing this

Also note that this issue only affects custom materials which enable a specific extension. This is not relevant for the examples at threejsfundamentals.

[Mardonis]

Ok thank you, I will try and look more into this.