纹理均匀和 gl_FragData 的着色器错误

Question

我将我的 three.js 更新到 118，并且与着色器相关的旧代码部分有错误：我遇到两种类型的错误：一种是当统一变量被命名为纹理时：需要将它命名为不同于质地。第二个是：gl_FragData 现在是未声明的标识符（我在着色器中使用它来读取地形高度）。所有这些都在早些时候起作用。有谁知道发生了什么事吗？

Answer 1

由于 r118，WebGLRenderer 默认使用 WebGL 2。这意味着基于 ShaderMaterial 的自定义着色器代码会自动解释为 GLSL 3.0 代码。不幸的是，此更改可能会破坏用户代码并需要迁移任务。

如果您没有时间预算，我建议您使用 r118 引入的 WebGL1Renderer。此渲染器与 WebGLRenderer 相同，它只是强制 WebGL 1 上下文，因此您的代码应该像以前一样运行。

但是，如果您想升级到 WebGL 2，则必须升级您的着色器代码以使其符合 GLSL 3.0。这意味着：

由于texture是一个保留字，你必须将它重命名为其他名称。
gl_FragData 在 GLSL 3.0 中默认不存在。您必须手动定义输出颜色。一个简单的片段着色器如下所示：

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

纹理均匀和 gl_FragData 的着色器错误

shader error with texture uniform and gl_FragData

three.js

opengl-es

shader