Math Playground
Back to Graphics

Graphics › Start here

Vectors in graphics

Positions, directions, colours, normals — almost everything in a renderer is a vector. Two products do most of the work: dot and cross.

Drag the two vectors
a = (3, 1)b = (1, 3)
|a| = √3²+1²
3.16
|b|
3.16
a · b = 3·1 + 1·3 = 6
angle between ≈ 53.13°
a + b = (4, 4)
a × b (z-component) = 8
= signed area of the parallelogram

Position vs direction

A position says where (a vertex, the camera); a direction says which way (a normal, a light ray, a velocity). In homogeneous coordinates the only difference is the 4th number: positions carry w = 1 (translation affects them), directions carry w = 0 (translation doesn't — a north-pointing arrow stays north no matter where you move it).

Normalize

Divide a vector by its length and you get a unit vector— same direction, length 1. Lighting, reflection, and steering all assume unit vectors, so v / |v| shows up constantly.

The dot product — “how aligned?”

a · b = |a||b|cos θ. For unit vectors it's just cos θ: +1 = same direction, 0 = perpendicular, −1 = opposite. That single number is how a surface knows how much light it catches (normals & lighting), how a frustum decides if a point is in front, and how you project one vector onto another.

The cross product — “give me a perpendicular”

a × b is a vector perpendicular to both, with length |a||b|sin θ (the area of the parallelogram they span). Engines use it to build a surface normal from two triangle edges, to construct a camera's right/up axes, and to test which side of an edge a pixel is on.

Cheat sheet

Need an angle or “facing” test? dot product. Need a perpendicular or an area? cross product. Need a direction only? normalize it first.