A Program Per Pixel

What this page does

Rings move out from the middle of the canvas. There is no ring anywhere in the code. There is no circle either. There are two triangles making a rectangle, and one program that decides, for each of 240,000 pixels, what colour that pixel should be.

How a pixel knows where it is

The vertex shader knows where each corner is. The fragment shader needs to know where each pixel is. A varying is the bridge.

attribute vec2 corner;
varying vec2 spot;

void main() {
    spot = corner;
    gl_Position = vec4(corner, 0.0, 1.0);
}

spot is written once per corner and read once per pixel. In between, the value is blended. A pixel halfway between two corners receives a value halfway between theirs. Nobody writes that blending. It is what the hardware is for, and it is where the word varying comes from.

Rings out of a sine wave

float distance = length(spot);
float wave = sin(distance * rings - time) * 0.5 + 0.5;

gl_FragColor = vec4(mix(colourA, colourB, wave), 1.0);

Four corners, two triangles

var corners = new Float32Array([
    -1, -1,
     1, -1,
    -1,  1,
     1,  1
]);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

gl.TRIANGLES would need six corners for two triangles, with two of them written twice. gl.TRIANGLE_STRIP reuses the last two corners for the next triangle, so four corners make two triangles. The rectangle covers the canvas exactly, because the canvas runs from -1 to 1.

Making it move

function drawFrame(milliseconds) {
    gl.uniform1f(timeSlot, (milliseconds / 1000) * SPEED);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    requestAnimationFrame(drawFrame);
}

requestAnimationFrame(drawFrame);

This is the same loop as the platformer course. Change one number, draw, ask for the next frame. The only value that changes between one frame and the next is time. The corners never move.

The honest limitation

None of this is 3D. It is a flat rectangle with a clever paint job, and no amount of ring detail will make it a shape you could walk around. What makes it worth doing is that the paint job is the same mechanism a 3D engine uses for every lit surface in every game you have played. The next lesson starts using one.