Chapter 03 · Matrix Transforms

One matrix moves
every point at once.

Last chapter you moved one point along a curve. But a spaceship is a thousand points. A character is fifty thousand. You are not going to hand-move each one — you build a machine that moves them all the same way. That machine is a matrix, and it's smaller than you think: two arrows.

press play — 90 seconds ↓
▶ watch rgbguy's original — Game Engine EP2 — the matrix part
The lesson · a 90-second movie you can touch

Press play. It explains itself.

Plays like the video — one caption at a time, the picture animating under it — and it pauses when it's your turn. Skip around with the dots or arrow keys. The full lab comes after.

0
skip the lesson ↓
90 seconds · it pauses when it's your turn
Step 1 · The big idea

A matrix is just: where do the axes land?

Every point in the ship is built from two ingredient arrows: î (one step right) and ĵ (one step up). The wingtip p = (1.5, 0.8) literally means 1.5·î + 0.8·ĵ. So here's the whole trick: move î and ĵ, keep the recipe. Every point re-follows its own recipe with the new arrows, and the entire grid — ship and all — transforms in lockstep. Drag the arrow tips.

drag the î and ĵ tips ↓
2×2 linear transform

Basis

the columns ARE the arrows — that's the whole secret ✎
column 1 = î · column 2 = ĵ
M = 1.000.000.001.00
p = (1.50, 0.80) — the wingtip
M·p = 1.5·î + 0.8·ĵ
M·p = (1.50, 0.80)
Step 2 · The named machines

Translate · Rotate · Scale · Shear

Some arrow-positions are so useful they have names. Rotate swings both arrows by θ. Scale stretches them. Shear tilts one. And translate… is the odd one out — sliding every point isn't something two arrows can do, so we cheat with a third row and column. Pick a machine, drag its slider, and watch the matrix become the motion.

translation matrix

Machine controls

1.50
0.80
3×3 homogeneous matrix:
translation needs the extra 1 — trust the trick: it turns "move" into "multiply", so ALL four machines speak the same language ✎
Step 3 · Compose them

Order matters!

Two machines, same settings — rotate by θ, translate by d — chained in opposite order. Left: rotate FIRST, then translate (written T·R). Right: translate FIRST, then rotate (written R·T). Same ingredients, wildly different landing spot: rotating after translating swings the whole offset around the origin. Hit step to watch each pipeline one stage at a time.

rotate ▸ then translate = T·R
translate ▸ then rotate = R·T

Shared settings

45°
150
stage 0 / 2 — original ship, untouched
the two composed matrices (top two rows):
T·R = R·T =
same rotation block — only the last column (where the origin lands) disagrees.
matrix multiplication reads RIGHT to LEFT — the matrix closest to the point acts first ✎
Step 4 · Real production code

The line every 3D game runs

Open any engine's vertex shader and you'll find this exact line. Three machines, chained. You now read it fluently — and you know the order isn't an accident.

// vertex shader — runs once for EVERY vertex, EVERY frame
gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition;
↑ Projectionsqueeze the world into the screen
↑ Viewwhere's the camera
↑ Modelplace the object in the world — this chapter!
← aPosition starts HERE, at the right

Read right-to-left: position → world → camera → screen. Chapter 04 shows WHY a GPU runs this millions of times in parallel.

Step 5 · Spot it in the wild
where matrices are hiding, right now —
  • Character skeletons. Every bone is a matrix multiplying its children. Rotate the hip matrix and the knee, ankle, toes all follow for free — chapter 06 bends that chain backwards.
  • Camera shake & zoom. The camera is just one more matrix applied to everything. Shake = a tiny random translate each frame. Zoom = a scale. Screen-wobble juice is three numbers.
  • Sprite flipping. Your character faces left with scale(−1, 1) — î lands on the negative x-axis and the whole sprite mirrors. Engines flip millions of sprites with a sign bit.
See it in 3D · orbit it like Blender

A crate, a matrix, and you

The exact machine from this chapter, in true 3D: push the crate around with game-style controls and read its real 4×4 world matrix — the same numbers Blender shows in its N-panel and the same uModelMatrix the shader multiplies by. The ghost crate is the identity matrix, staying home.

drag to orbit · scroll to zoom

Drive the matrix

world matrix (live):

      
The source · rgbguy's original

Watch the video, jump by section

Click any moment on the right — it takes you straight there (in place when this site is served over http, on YouTube when opened as a local file).