I need to render a number of coloured quads, with one strong coloration per quad, utilizing WebGL 2.0 and Javascript. However, this query might be generalisable to different OpenGL implementations as properly.

The default approach to go a coloration to the fragment shader appears to be a by means of a uniform. However, I’ve many quads every with it is personal coloration. For efficiency causes, I must batch render them with one draw name. And I am unable to try this if I’ve to vary the uniform for each quad.

The subsequent answer appears to be to incorporate the colour within the vertex buffer and go them as a attribute to the vertex shader and from there as a various to the fragment shader. This works, however to me it appears very inefficient. Firstly, I must repeat the colour 4 occasions per quad, growing the visitors from the CPU to the GPU. Secondly, the GPU has to interpolate my strong coloration whish is simply pointless calculations.

Isn’t there a extra straight ahead approach to remedy this pretty easy downside with out losing efficiency? Could I in some way checklist the colours in an array and get WebGL to choose one aspect from the array per polygon or quad?

Or in additional basic phrases: How do I effectively go one uniform worth per polygon or quad to the fragment shader in a single batched draw name?