Potential regression v149 -> v150

Questions
1

When upgrading from v149 to v150, I get the following error; my code has no WebGL custom code, and it works without warnings or errors with v149

I did not open an issue since I’m not fluent in WebGL, and it’s not obvious to me how to create a minimal reproducible example; I wonder if someone else is having similar issues

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Vertex shader is not compiled.

VERTEX

ERROR: 0:165: 'textureLod' : no matching overloaded function found
ERROR: 0:165: 'textureLod' : no matching overloaded function found
ERROR: 0:166: 'textureLod' : no matching overloaded function found
ERROR: 0:166: 'textureLod' : no matching overloaded function found
ERROR: 0:165: 'return' : function return is not matching type:
ERROR: 0:169: 'textureSize' : no matching overloaded function found
ERROR: 0:170: 'textureSize' : no matching overloaded function found
ERROR: 0:173: 'textureSize' : no matching overloaded function found


  160:     vec2 p1 = ( vec2( iuv.x + h1x, iuv.y + h0y ) - 0.5 ) * texelSize.xy;
  161:     vec2 p2 = ( vec2( iuv.x + h0x, iuv.y + h1y ) - 0.5 ) * texelSize.xy;
  162:     vec2 p3 = ( vec2( iuv.x + h1x, iuv.y + h1y ) - 0.5 ) * texelSize.xy;
  163:     
  164:     vec2 lodFudge = pow( 1.95, lod ) / fullSize;
> 165: 	return g0( fuv.y ) * ( g0x * textureLod( tex, p0, lod ) + g1x * textureLod( tex, p1, lod ) ) +
  166: 		   g1( fuv.y ) * ( g0x * textureLod( tex, p2, lod ) + g1x * textureLod( tex, p3, lod ) );
  167: }
  168: vec4 textureBicubic( sampler2D sampler, vec2 uv, float lod ) {
  169: 	vec2 fLodSize = vec2( textureSize( sampler, int( lod ) ) );
  170: 	vec2 cLodSize = vec2( textureSize( sampler, int( lod + 1.0 ) ) );
  171: 	vec2 fLodSizeInv = 1.0 / fLodSize;
FRAGMENT

ERROR: 0:135: 'textureLod' : no matching overloaded function found
ERROR: 0:135: 'textureLod' : no matching overloaded function found
ERROR: 0:136: 'textureLod' : no matching overloaded function found
ERROR: 0:136: 'textureLod' : no matching overloaded function found
ERROR: 0:135: 'return' : function return is not matching type:
ERROR: 0:139: 'textureSize' : no matching overloaded function found
ERROR: 0:140: 'textureSize' : no matching overloaded function found
ERROR: 0:143: 'textureSize' : no matching overloaded function found


  130:     vec2 p1 = ( vec2( iuv.x + h1x, iuv.y + h0y ) - 0.5 ) * texelSize.xy;
  131:     vec2 p2 = ( vec2( iuv.x + h0x, iuv.y + h1y ) - 0.5 ) * texelSize.xy;
  132:     vec2 p3 = ( vec2( iuv.x + h1x, iuv.y + h1y ) - 0.5 ) * texelSize.xy;
  133:     
  134:     vec2 lodFudge = pow( 1.95, lod ) / fullSize;
> 135: 	return g0( fuv.y ) * ( g0x * textureLod( tex, p0, lod ) + g1x * textureLod( tex, p1, lod ) ) +
  136: 		   g1( fuv.y ) * ( g0x * textureLod( tex, p2, lod ) + g1x * textureLod( tex, p3, lod ) );
  137: }
  138: vec4 textureBicubic( sampler2D sampler, vec2 uv, float lod ) {
  139: 	vec2 fLodSize = vec2( textureSize( sampler, int( lod ) ) );
  140: 	vec2 cLodSize = vec2( textureSize( sampler, int( lod + 1.0 ) ) );
  141: 	vec2 fLodSizeInv = 1.0 / fLodSize;

thanks,
Francesco

2

This is potentially related to a change in context of MeshPhysicalMaterial.

Do you mind sharing more information about how the error occurs? What browser, OS, device are you using? How does the scene setup look like? Can you reproduce the issue with one of the official examples?

3

I’m testing on Chrome 110 on MacOS 13.1.

I’ve tried many of the official examples, and I cannot reproduce the problem.

The scene is a custom layer on MapBox JS GL, developed following the guidelines in this example (the example works correctly on my setup)

The bridge between MapBox and ThreeJS in my code is simple:

       // method called when the layer is added to the map
       onAdd: function (map, gl) {
           this.map = map;

           this.renderer = new THREE.WebGLRenderer({
               canvas: map.getCanvas(),
               context: gl,
               antialias: true,
           });
           this.renderer.autoClear = false;
       },

       // method fired on each animation frame
       render: function (gl, matrix) {
           this.camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);
           this.renderer.resetState()
           this.renderer.render(this.scene, this.camera);
       },

       repaint: function() {
           this.map?.triggerRepaint();
       }

The objects displayed are simple (2d) custom BufferGeometry with MeshBasicMaterial

Thanks for your help; let me know if there are more useful details that I can share
Francesco

4

Don’t know if it’s relevant, but I never use MeshPhysicalMaterial

5

The problematic shader code was added to a chunk which is included in all built-in materials. Not sure that was a good decision…

6

Can you please verify if the WebGL context you get from Mapbox is a WebGL 1 or 2 context?

7

Try to fix this here: Shaders: Move bicubic texture filtering to transmission chunk. by Mugen87 · Pull Request #25563 · mrdoob/three.js · GitHub

8

MapBox JS GL uses WebGL 1 and has a beta feature to enable GL 2 support

If I force GL2 by enabling the beta feature (useWebGL2: true) the problem disappears:

GL1 → has the problem
GL2 → does not have the problem

This is a reasonable temp workaround for me, even if I’m not totally happy to use a preview feature

thanks, Francesco

1 Like
9

0.150.1 fixes the problem for me, even when using WebGL 1

Thanks for your support
Francesco

1 Like
10

the problem seems to have come back again after upgrading to revision 0.160.0