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

【问题标题】：shader error with texture uniform and gl_FragData纹理均匀和 gl_FragData 的着色器错误
【发布时间】：2020-11-04 21:44:37
【问题描述】：

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

【问题讨论】：

编译器已更改，容错性降低。当您从一个编译器迁移到另一个编译器时，此类问题很常见
备注；用 gl_FragColor 替换 gf_FragData[0] 但不能解释 gl_FragData 的问题
您可能升级了您的 glsl 语言，您使用的是什么版本？这很有趣：io7m.com/documents/fso-tta
不，我的版本不是最新版本：4.2
无论如何，如果你使用的GLSL语言版本（不同于OpenGL 3.2版本之前的OpenGL版本，3.2之后他们对其进行了规范化以避免混淆）大于1.30，你应该使用声明方式而不是通过内置变量。在此链接上，您可以获得更改代码所需的所有信息。 io7m.com/documents/fso-tta

标签： three.js opengl-es shader

【解决方案1】：

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

如果您对此没有时间预算，我建议您使用WebGL1Renderer，它是与r118 一起引入的。此渲染器与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);
}

【讨论】：

好的，谢谢。我会更新但有一个问题：FragColor 仍然存在，但会影响“所有渲染缓冲区”，因为 FragData 只是一个（如果我是对的）；手动操作“out vec4 outColor”是否对寻址单个缓冲区有类似的效果？
TBH，我不确定你的意思，但我上面分享的代码是前一个 gl_FragData^^ 的 1:1 替换。
如果答案对您有用，请接受/投票。