00 Prologue: how a GPU paints

Two nested loops in C, one pass on the GPU

The same shade() function: the CPU computes one cell at a time; the GPU calls it for every cell at once.

UV0.50, 0.50

Execution

Cells per side12

424

CPU speed · cells/s24

4120

Explanation

Drag the underlined numbers left and right

for (int y = 0; y < ; y++)  for (int x = 0; x < ; x++)    image[y][x] = shade(x, y);// the i-th call

i =0/ 144

void main() {  // no loop here:  // main runs once per pixel  gl_FragColor = shade(vUv);}

Called144times at once

This cell(6, 6) → RGB (0.54, 0.54, 0.25)

Key differencemain knows only its own position; it cannot see what its neighbours computed

A real canvas has hundreds of thousands to millions of pixels; a GPU has thousands of small cores running at once.

JS sidegl.uniform1f(uTime, 0.00)

In C you write two nested for loops; on the GPU you write only the loop body, and the GPU calls it for every pixel at once.

Try it