CODEWITHSUNDEEP
javascriptwebglfragment-shader
pavelkolodin
pavelkolodin

Reputation: 2967

How to set individual color to every WebGL triangle?

I have a fragment shader:

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

and i set that color in JS code:

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

But I draw 50000 rectangles using 100000 triangles:

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

and would like each one has individual color.

My question is: How the fragment shader can (can it?) get some kind of an index of the current fragment (on which the shader working on NOW) to be able to pick up the color from some array (that array would contain a color for each fragment)?

(100000 fragments (triangles) is too much memory to have an array in shader code, but what about 100 fragments?)

Upvotes: 0

Views: 862

Answers (1)

WacławJasper
WacławJasper

Reputation: 3364

Send an additional attribute to the GPU, color of the triangle. The vertex shader then sends it to the fragment shader as varying. Webgl does not allow dynamic indexing in the fragment shader.

Upvotes: 1

Related Questions