Upgrading three.js from 131 to 132 causes error in fragment shader for ShaderMaterial

Questions
1

I have a sample react project using three.js. I recently upgraded three.js from v0.131.3 to v0.132.2 and received an error in my fragment shader. I suspect it is due to the recent removal of Blinn Phong support.
I created a minimal reproducible repo at GitHub - kimbaudi/threejs-test. If you clone the repo, and yarn install && yarn start, you will see the three.js demo. However, if you update three.js to v0.132.2, you will get a blank screen and an error message in the console.

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Fragment shader is not compiled.

At the moment, I am just commenting out the fragment shader in my code to get rid of the error message. Instead of a blank screen, I get red squares to display.

So I’ve narrows down the issue to my custom fragment shader (shader.frag). How can I change my custom fragment shader so it works with the latest three.js?

3

Please use the solution from: Threejs r111 it normal but threejs r131 it error Using shaderMaterial.error:'mapTexelToLinear' : no matching - #10 by Mugen87

4

And at GitHub, too…

It would be totally sufficient to ask a question at one space. The forum, stackoverflow OR GitHub.

6

You are including normal_pars_vertex in the fragment shader. That chunk however is intended for the vertex shader.

7

Besides, normal_vertex does belong into the main() function.

8

Thanks for your response. I removed normal_pars_vertex and normal_vertex from the fragment shader (shader.frag) and added it to the vertex shader (shader.vert).

Now I am getting a different error from shader.frag:

Program Info Log: Fragment shader is not compiled.

FRAGMENT

ERROR: 0:459: 'getDirectionalDirectLightIrradiance' : no matching overloaded function found
ERROR: 0:479: 'getPointDirectLightIrradiance' : no matching overloaded function found

I digged into the commit history and found that getDirectionalDirectLightIrradiance is renamed to getDirectionalLightInfo and getPointDirectLightIrradiance is renamed to getPointLightInfo.

9

Certain parts of the GLSL were refactored with r132. In general, we consider the shader chunks as no part of the public API. If you use them to build custom shaders, you have to carefully migrate to newer engine versions.

To mitigate this issue a bit, consider to use Material.onBeforeCompile() if you need custom materials. In this way, you don’t compose a shader from scratch but enhance/change an existing material. That should lower the number of shader chunks you have to work with. Check out the following example to see this approach in action: three.js webgl - materials - modified

2 Likes