如何为每个 WebGL 三角形设置单独的颜色？

Posted 2023-02-22

【中文标题】如何为每个 WebGL 三角形设置单独的颜色？

【英文标题】：How to set individual color to every WebGL triangle?

【发布时间】：2015-12-25 16:23:15

【问题描述】：

我有一个片段着色器：

uniform vec4 zz_color;
void main(void) 
    gl_FragColor = zz_color;

我在 JS 代码中设置了该颜色：

ccc = gl.getUniformLocation(this.program, "zz_color");  // 1 time
gl.uniform4f(ccc, r, g, b, 1);                          // on animation frame

但我使用 100000 个三角形绘制了 50000 个矩形：

gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.my_vertices_data);
gl.drawArrays(gl.TRIANGLES, 0, 6 * number_of_vertices);

并且希望每个都有单独的颜色。

我的问题是：片段着色器如何（可以吗？）获得当前片段的某种索引（着色器现在正在处理该片段）能够从某个数组中获取颜色（该数组将包含每个片段的颜色）？

（100000 个片段（三角形）对于着色器代码中的数组来说内存太大，但是 100 个片段呢？）

【问题讨论】：

见this tutorial或this one

【参考方案1】：

向 GPU 发送一个附加属性，即三角形的颜色。然后顶点着色器将其作为变化发送到片段着色器。 Webgl 不允许在片段着色器中进行动态索引。