webgl - gl_FragData 必须为常量零

Question

我在尝试编译片段着色器时遇到问题。我不断收到此错误:

Uncaught Error: Fragment Shader Compiler Error: ERROR: 0:21: '[' :
array index for gl_FragData must be constant zero ERROR: 0:21: '[' :
array index for gl_FragData must be constant zero ERROR: 0:21: '[' :
array index for gl_FragData must be constant zero

这是代码:

#ifdef GL_EXT_draw_buffers
#extension GL_EXT_draw_buffers : require
#endif
#ifdef GL_ES
precision highp float;
#endif
void main() {
    gl_FragData[0] = vec4(1.,2.,3.,4.);
    gl_FragData[1] = vec4(1.,2.,3.,4.);
    gl_FragData[2] = vec4(1.,2.,3.,4.);
    gl_FragData[3] = vec4(1.,2.,3.,4.);
}

如果我设置 gl_FragColor(将 4 个纹理附加到帧缓冲区)，整个设置工作正常，但尝试执行上面的代码(索引缓冲区以输出)似乎不编译。我已经看到这在使用扩展的 WebGL1 中运行良好。我正在使用 WebGL2，所以在这种情况下可能有些不同？ (我正在最新版本的 Chrome 中尝试)。

Answer 1

所以看起来从 WebGL1 到 WebGL2 需要考虑一些变化。鉴于@gman 的评论，我认为最好链接到他的文章，因为我知道他真的是这里的专家。 ;)

WebGL 1 到 WebGL 2 的转换:https://webgl2fundamentals.org/webgl/lessons/webgl1-to-webgl2.html

我还发现记住版本 differences 很有帮助:

WebGL 1.0 is based on OpenGL ES 2.0 and provides an API for 3D graphics. It uses the HTML5 canvas element and is accessed using Document Object Model (DOM) interfaces.

WebGL 2.0 is based on OpenGL ES 3.0 and made guaranteed availability of many optional extensions of WebGL 1.0 and exposes new APIs.

简而言之(也指历史上的第一个链接):

1. 我的着色器代码是为我见过的使用扩展的 WebGL 1 (OpenGL ES 2) 示例设计的。这很好用，因为 OpenGL 2.0 通过 gl_FragData 支持多个颜色值。

2. 切换到 WebGL 2 (OpenGL ES 3) 这已被弃用，取而代之的是一种不同的方式。现在需要 out 声明，例如 out vec4 out_0;主要(无效){ out_0 = vec4(1.0，0.0，0.0，1.0); }。但我仍然遇到了一些问题。看来我需要指定缓冲区位置。另外，我收到了这个错误:

   ERROR: must explicitly specify all locations when using multiple fragment outputs

   这意味着我需要将 #version 300 es 添加到我的程序的顶部，因此 WebGL 2 的正确代码看起来更像这样:

   #version 300 es
   layout(location = 0) out vec4 out_0;
   layout(location = 1) out vec4 out_1;
   main(void) {
       out_0 = vec4(1.0, 0.0, 0.0, 1.0);
       out_1 = vec4(1.0, 0.0, 0.0, 1.0);
   }
   

   有一次我的版本不对，导致了这个错误:

   invalid version directive ERROR: 0:24: 'out' : storage qualifier supported in GLSL ES 3.00 and above only

   但我发现 WebGL 2 的版本特别是 #version 300 es(注意 es 部分)，它有效!

   注意:版本说明符必须在第一行，不幸的是，它不能在预处理器指令中(即 #ifdef)，所以我必须在将其发送到之前动态更改字符串被编译。如果没有，你会得到这个:

   #version directive must occur before anything else, except for comments and white space

3. 对于顶点着色器，如果为 WebGL 2 (ES 3) 编译，请注意 attribute 现在是 in。顶点着色器的版本也必须与正在编译的片段的版本相匹配，否则你会得到这个:

   ERROR: Shader Linking Error: Versions of linked shaders have to match.

我希望将所有这些困惑粘合在一起可以帮助其他人节省大量时间。 ;)