How to enable EXT_shader_texture_lod extension support on my Three.js project?

Questions
1

This is the what I got in console

app.js:12418 THREE.WebGLRenderer: EXT_shader_texture_lod extension not supported.

and when I googled for solution I ended up here EXT_shader_texture_lod extension - Web APIs | MDN but not sure how to proceed?

Device: OnePlus 7
Browser: Chrome Stable Latest
Three.js: Version: 0.112.0

Thanks :slight_smile:

2

Please checkout with this page if the extension is supported for WebGL 1 on your device:

https://webglreport.com/

If not, you can try to use a WebGL 2 rendering context since the functionality of all WebGL 1 extensions are available on the WebGL2 context by default .

3

7fc60ed4-1010-42b0-b112-ed1f4b380d36
7fc60ed4-1010-42b0-b112-ed1f4b380d36540×1170 71.4 KB

it says, it is supported

4

Wait a second got something @Mugen87

EXT_shader_texture_lod

is available on my laptop but not my phone why? (on the list)

5

Well, not all devices support all extensions. This mainly depends on the used GPU.

1 Like
6

Any patch or something available for it?

because the same model is working perfectly with babylon JS
but how? (I got curious so checked it on babylon js on the phone with same model @Mugen87)

7

Is the model not rendered at all? In any event, if three.js needs the extension but it is not available, there is nothing we can do. It’s not possible to polyfill missing extensions.

8

Model is rendered but it’s glitching @mugen87

9

So after this

I came across this fix on model viewer https://github.com/google/model-viewer/search?utf8=✓&q=EXT_shader_texture_lod&type=

that they have implemented which is deleting the shader from gl

that didn’t solve my problem

So wrote my own

export var applyExtensionCompatibility = function (gl) {
    console.log("ext");
    function createShader (gl, sourceCode, type) {
        var shader = gl.createShader( type );
        gl.shaderSource( shader, sourceCode );
        gl.compileShader( shader );
      
        if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
          var info = gl.getShaderInfoLog( shader );
          throw 'Could not compile WebGL program. \n\n' + info;
        }
        return shader;
    }
    let shader = createShader(gl,`
    #extension GL_EXT_shader_texture_lod : enable
    precision mediump float;
    uniform sampler2D tex;
    void main() {
      gl_FragColor = texture2DLodEXT(tex, vec2(0.0, 0.0), 0.0);
    }`,gl.FRAGMENT_SHADER)    
    gl.deleteShader(shader);
};

which also does the same but written explicitly
which also didn’t work

but I did get this from the code I wrote (that was based on MDN)

WebGLUtils.js:41 Uncaught Could not compile WebGL program. 

WARNING: 0:2: 'GL_EXT_shader_texture_lod' : extension is not supported
ERROR: 0:6: 'texture2DLodEXT' : no matching overloaded function found
ERROR: 0:6: '=' : dimension mismatch
ERROR: 0:6: 'assign' : cannot convert from 'const mediump float' to 'FragColor mediump 4-component vector of float'

Some stuff I found by researching what it is

https://www.w3.org/standards/faq#std

still I am not able to write a patch though

but can confirm the same 3D model works flawlessly on Model Viewer
Just not on our project it’s glitching (as you can see on the previous comment)

cc @Mugen87 @mrdoob any help would be appreciated

or it can’t be fixed because EXT_shader_texture_lod is not available particularly on OnePlus 7’s GPU? (tested on like 3 oneplus 7 phones everything is glitching it’s this device specific)

10

Ok I found a solution

doing the fix that is from Model Viewer and upgrading the three version to 0.113.0 worked.

Thanks to everyone who helped along

Thanks

1 Like
11

You were able to get the extension to work where it previously said it was unsupported?

12

Yes

r113 and also patch from model viewer for the entension