shader error with texture uniform and gl_FragData

I updated my three.js up to 118 and have error with older code parts related to shader : I get 2 types of error : one is when uniform variable is named texture : need to name it anything different from texture . The second one is : gl_FragData is now undeclared identifier (I'm using this in shader to read terrain height). All this was working earlier. Does any one know what happened ?

Solution

Since r118, WebGLRenderer uses WebGL 2 by default. That means that custom shader code based on ShaderMaterial is automatically interpreted as GLSL 3.0 code. Unfortunately, this change can break user code and requires a migration task.

If you don't have a time budget for this, I suggest you use WebGL1Renderer which was introduced with r118. This renderer is identical to WebGLRenderer, it just forces a WebGL 1 context and thus your code should run as before.

However, if you want to upgrade to WebGL 2, you have to upgrade your shader code to make it GLSL 3.0 conform. That means:

Since texture is a reserved word, you have to rename it to something else.
gl_FragData does not exist by default in GLSL 3.0. You have to define the output color manually. A simple fragment shader looks like so:

#version 300 es
precision highp float;
 
out vec4 outColor;
 
void main() {
   outColor = vec4(1.0);
}