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

Question

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

Answer 1

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

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

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

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

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