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

How to set individual color to every WebGL triangle?

本文关键字：设置 单独 颜色 三角形 WebGL      更新时间：2023-09-26

我有一个片段着色器：

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);

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

我的问题是：片段着色器如何（可以吗？）获得当前片段的某种索引（着色器在NOW上工作），以便能够从某个数组中拾取颜色（该数组将为每个片段包含一种颜色）？

（100000个碎片（三角形）内存太多，着色器代码中无法有数组，但100个碎片呢？）

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

相关文章：