I want to render multiple colored quads, with one solid color per quad, using WebGL 2.0 and Javascript. However, this question is probably generalisable to other OpenGL implementations as well.
The default way to pass a color to the fragment shader seems to be a through a uniform. However, I have many quads each with it's own color. For performance reasons, I need to batch render them with one draw call. And I can't do that if I have to change the uniform for every quad.
The next solution seems to be to include the color in the vertex buffer and pass them as a attribute to the vertex shader and from there as a varying to the fragment shader. This works, but to me it seems very inefficient. Firstly, I need to repeat the color four times per quad, increasing the traffic from the CPU to the GPU. Secondly, the GPU has to interpolate my solid color whish is just pointless calculations.
Isn't there a more straight forward way to solve this fairly simple problem without wasting performance? Could I somehow list the colors in an array and get WebGL to pick one element from the array per polygon or quad?
Or in more general terms: How do I efficiently pass one uniform value per polygon or quad to the fragment shader in a single batched draw call?