Как установить индивидуальный цвет для каждого треугольника WebGL?

Question

У меня есть фрагмент шейдера:

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

Но я рисую 50000 прямоугольников, используя 100000 треугольников:

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

и хотелось бы, чтобы у каждого был свой цвет.

Мой вопрос: как фрагментный шейдер может (может ли он?) Получить какой-то индекс текущего фрагмента (над которым шейдер работает сейчас), чтобы можно было подобрать цвет из некоторого массива (этот массив будет содержать цвет для каждого фрагмента)

(100000 фрагментов (треугольников) - это слишком много памяти, чтобы иметь массив в шейдерном коде, но как насчет 100 фрагментов?)

Answer 1

Отправьте дополнительный атрибут в графический процессор, цвет треугольника. Затем вершинный шейдер отправляет его фрагментному шейдеру как изменяющийся. Webgl не позволяет динамическое индексирование в фрагментном шейдере.