Shader Learn

00 Prologue: how a GPU paints

Four decimals become a colour on the page

Fragment output → blending → colour buffer → the browser shows the canvas. Only the last write counts.

(0.50, 0.50)
01
01
01
01
Explanation

Drag the underlined numbers left and right

void main() {  vec3 color = vec3(, , );  gl_FragColor = vec4(color, );}
  1. RGBA decimals
  2. depth / blending
  3. colour buffer
  4. canvas
8-bit bytes written to the buffer[245, 110, 77, 255]

gl_FragColor is an output slot: assigning it does not end main. Whatever it holds when main reaches } goes into the buffer.

A fragment outputs four numbers in 0–1; the colour buffer stores them as bytes in 0–255. Only the last write counts.

Try it

  • Set R to 1 and watch the byte become 255
  • Set A to 0.5: the fourth byte becomes 128 and the background shows through
  • Turn on “Write the colour again”: the second write replaces the first