05 Data becomes vertices

Per vertex, per draw, and in between

Each vertex has its own colour; the GPU interpolates between them; uGain affects the whole triangle at once.

uGain · overall brightness1.00

Explanation

Drag the underlined numbers left and right

// vertex: every corner has its own colourvColor = aColor;// fragment: receives the interpolated colourvec3 color = vColor * ;gl_FragColor = vec4(color, 1.0);

attributeOne per vertex

varyingvertex → interpolation → fragment

uniformShared by one draw call

The interpolation weights are the barycentric coordinates w0, w1, w2 from the previous lesson.

JS sidegl.uniform1f(uGain, 1.00)

An attribute has one value per vertex; a varying is interpolated by the GPU for the fragment; a uniform is shared by the whole draw.

Try it

Set uGain to 0.5: the whole triangle dims together
In the vertex code, change aColor to vec3(1.0)