Linear Algebra for Computer Graphics

What is a vector?

A vector describes a length and a direction. In a 2D coordinate plane with an x-axis and a y-axis, the vector $\begin{pmatrix}4\\3\end{pmatrix}$ means 4 units in the x direction and 3 units in the y direction.

Diagram

Playground: drag or type to change the vector

x y

|v| = 5.00

Unit vectors & normalization

Often you care about direction, not length. Dividing a vector by its magnitude produces a unit vector of length 1 in the same direction:

\hat{\mathbf{v}}=\dfrac{\mathbf{v}}{|\mathbf{v}|}

Unit vectors show up everywhere in graphics: surface normals, light directions, camera axes, and ray directions. The dashed circle below has radius 1; the solid arrow always lands on it.

Diagram

Playground: drag or type to change v. Solid arrow is the unit vector

x y

|v| = 5.00

\hat{v}

= (0.80, 0.60)

Addition & subtraction

For $\mathbf{a}=\begin{pmatrix}a_x\\a_y\end{pmatrix}$ and $\mathbf{b}=\begin{pmatrix}b_x\\b_y\end{pmatrix}$ , add the corresponding components:

\mathbf{a}+\mathbf{b}=\begin{pmatrix}a_x+b_x\\a_y+b_y\end{pmatrix}

Subtraction works the same way, with the second vector negated: $\mathbf{a}-\mathbf{b}=\mathbf{a}+(-\mathbf{b})$ .

Diagram

Playground: drag or type to change a and b

ax ay

bx by

a + b = (4.00, 4.00)

Dot product

The dot product of two vectors gives a scalar. It measures how much one vector points in the direction of another.

\mathbf{a}\cdot\mathbf{b}=a_xb_x+a_yb_y

It also relates to the angle between the vectors, $\mathbf{a}\cdot\mathbf{b}=|\mathbf{a}||\mathbf{b}|\cos\theta$ , and to the signed length of the projection of a onto b, $d=\dfrac{\mathbf{a}\cdot\mathbf{b}}{|\mathbf{b}|}$ .

Diagram

Playground: drag or type to change a and b. The gray arrow is the projection of a onto b

ax ay

bx by

a · b = 11.00

θ = 42.27°

d = 3.05

Projection

The orthogonal projection of $\mathbf{a}$ onto $\mathbf{b}$ is the shadow of $\mathbf{a}$ on the line spanned by $\mathbf{b}$ . It is the part of $\mathbf{a}$ that lies parallel to $\mathbf{b}$ :

\mathrm{proj}_{\mathbf{b}}\mathbf{a}=\dfrac{\mathbf{a}\cdot\mathbf{b}}{\mathbf{b}\cdot\mathbf{b}}\,\mathbf{b}

What is left over is the rejection, perpendicular to $\mathbf{b}$ : $\mathbf{a}-\mathrm{proj}_{\mathbf{b}}\mathbf{a}$ . Lighting, constraints, and sliding along a surface all use this split.

Diagram

Playground: gray arrow is projection; dashed is rejection

ax ay

bx by

proj = (4.00, 0.00)

rej = (0.00, 3.00)

Cross product

The cross product takes two vectors, a and b, and produces a third vector perpendicular to both, following the right-hand rule. In 2D we only see its z-component: a signed number equal to the area of the parallelogram the two vectors span.

a_xb_y-a_yb_x

A positive value means b is counterclockwise from a; negative means clockwise.

Diagram

Playground: drag or type to change a and b

ax ay

bx by

a × b = 8.00

counterclockwise

Matrices

A matrix is an array of numbers with rules for multiplying vectors and other matrices. In graphics, each column is where a basis vector lands: the first column is the image of $(1,0)$ , the second of $(0,1)$ .

Matrix multiplication composes transforms. Order matters: $AB$ means “apply $B$ first, then $A$ ” (right to left). In general $AB\neq BA$ .

AB=\begin{pmatrix}a&b\\c&d\end{pmatrix}\begin{pmatrix}e&f\\g&h\end{pmatrix}=\begin{pmatrix}ae+bg&af+bh\\ce+dg&cf+dh\end{pmatrix}

Diagram

Playground: A = rotation, B = scaling along x. Toggle the order

θ (A = rotation)

sx (B = scaling along x)

A·B

1.23-0.641.030.77

Rotation

To rotate a vector by θ, picture rotating the basis vectors and watching where they land. The x-axis unit vector $\begin{pmatrix}1\\0\end{pmatrix}$ becomes $\begin{pmatrix}\cos\theta\\\sin\theta\end{pmatrix}$ , and the y-axis unit vector $\begin{pmatrix}0\\1\end{pmatrix}$ becomes $\begin{pmatrix}-\sin\theta\\\cos\theta\end{pmatrix}$ . Those two new columns are the rotation matrix:

R(\theta)=\begin{pmatrix}\cos\theta & -\sin\theta\\\sin\theta & \cos\theta\end{pmatrix}

The first column is where the new x-axis points; the second is where the new y-axis points. Multiplying a vector by R gives the rotated vector:

R(\theta)\begin{pmatrix}x\\y\end{pmatrix}=\begin{pmatrix}\cos\theta\cdot x-\sin\theta\cdot y\\\sin\theta\cdot x+\cos\theta\cdot y\end{pmatrix}

Diagram

Playground: move the slider or type θ

θ (vector shown dashed is

\begin{pmatrix}4\\2\end{pmatrix}

)

cos θ = 0.87, sin θ = 0.50

result = (2.46, 3.73)

Scale

Scaling works the same way. To stretch x by 3 and shrink y to half, the new x-axis unit vector becomes $\begin{pmatrix}3\\0\end{pmatrix}$ and the new y-axis unit vector becomes $\begin{pmatrix}0\\0.5\end{pmatrix}$ :

S=\begin{pmatrix}s_x & 0\\0 & s_y\end{pmatrix}\qquad S\begin{pmatrix}x\\y\end{pmatrix}=\begin{pmatrix}s_x\cdot x\\s_y\cdot y\end{pmatrix}

Diagram

Playground: move the sliders or type sx, sy

sx

sy

Shear

Shear slides one axis along the other. A horizontal shear ( $k_x$ ) keeps heights fixed and pushes $x$ by an amount proportional to $y$ . Vertical shear ( $k_y$ ) does the opposite. Together they form the matrix:

H=\begin{pmatrix}1 & k_x\\k_y & 1\end{pmatrix}\qquad H\begin{pmatrix}x\\y\end{pmatrix}=\begin{pmatrix}x+k_xy\\k_yx+y\end{pmatrix}

Shear is still a linear map (the origin stays put), but it is not a pure rotation or scaling. Reflection is related: flipping an axis is equivalent to applying a negative scale, as shown in the Scale playground.

Diagram

Playground: move the sliders or type kx, ky

kx (horizontal)

ky (vertical)

Translation

Translation shifts every point by a fixed offset: $\mathbf{a}=\begin{pmatrix}1\\2\end{pmatrix}$ translated by $\begin{pmatrix}1\\1\end{pmatrix}$ lands at $\begin{pmatrix}2\\3\end{pmatrix}$ .

Unlike rotation and scaling, translation cannot be written as a matrix multiplied by a 2D vector: there is no matrix M for which $M\begin{pmatrix}x\\y\end{pmatrix}$ produces $\begin{pmatrix}x+t_x\\y+t_y\end{pmatrix}$ for every x and y. Homogeneous coordinates solve this problem.

Diagram

Playground: move the sliders or type tx, ty

tx

ty

Homogeneous coordinates

To fold translation into matrix multiplication, we add an extra dimension. A 2D vector $\begin{pmatrix}x\\y\end{pmatrix}$ becomes $\begin{pmatrix}x\\y\\1\end{pmatrix}$ , and translation becomes:

T=\begin{pmatrix}1&0&t_x\\0&1&t_y\\0&0&1\end{pmatrix}\quad T\begin{pmatrix}x\\y\\1\end{pmatrix}=\begin{pmatrix}x+t_x\\y+t_y\\1\end{pmatrix}

Rotation and scaling extend the same way: add a third row and column that pass the extra coordinate through unchanged:

R=\begin{pmatrix}\cos\theta&-\sin\theta&0\\\sin\theta&\cos\theta&0\\0&0&1\end{pmatrix}\qquad S=\begin{pmatrix}s_x&0&0\\0&s_y&0\\0&0&1\end{pmatrix}

Now every affine transformation, including rotation, scaling, and translation, is represented by a 3×3 matrix. These transformations all compose through ordinary matrix multiplication.

Inverse transforms

Every nonsingular transform has an inverse that undoes it. Invert a translation with $-t$ , a rotation with $-\theta$ , and a nonzero scale with $1/s$ . For a rotation matrix, the inverse is simply the transpose: $R^{-1}=R^{\mathsf{T}}$ .

R(\theta)^{-1}=R(-\theta)=\begin{pmatrix}\cos\theta&\sin\theta\\-\sin\theta&\cos\theta\end{pmatrix}=R(\theta)^{\mathsf{T}}

For a composite $M=SRT$ , the inverse reverses the order: $M^{-1}=T^{-1}R^{-1}S^{-1}$ . Apply $M$ , then $M^{-1}$ , and you return to the original coordinates.

Playground: green is M·shape; orange is M⁻¹ applied to the green result

tx

ty

θ

sx

sy

show inverse

M⁻¹

0.550.48-3.00-0.380.68-2.000.000.001.00

Determinant

The determinant of a 2×2 matrix is the signed area of the parallelogram formed by its columns. If $M=\begin{pmatrix}a&b\\c&d\end{pmatrix}$ , then:

\det M=ad-bc

A positive value means orientation is preserved (a counterclockwise basis stays counterclockwise). A negative value means the shape is flipped by a reflection. The absolute value tells us how much the matrix scales area. Zero means the matrix collapses space onto a line.

Diagram

Playground: try negative sx to flip orientation. Fill turns orange when det < 0

sx

sy

kx (shear)

det M = 1.80

orientation preserved

Putting it together

Suppose a table asset must be transformed. First translate it by $\begin{pmatrix}t_x\\t_y\end{pmatrix}$ , then rotate it counterclockwise by θ, and finally scale it by $s_x$ and $s_y$ . Transformations apply from right to left, so the combined matrix is:

M=S\cdot R(\theta)\cdot T

Multiply the three matrices once in composition order, with translation innermost because it is rightmost. Reuse that single M for every vertex of the table, no matter how complex the mesh.

Playground: move the sliders or type values. The dashed rectangle is the original table; the vertex $\begin{pmatrix}1\\2\end{pmatrix}$ is marked before and after.

tx

ty

θ

sx

sy

M = S·R(θ)·T

1.73-1.004.660.751.308.950.000.001.00

vertex (1, 2) → (4.39, 12.29)

What is a vector? (3D)

In 3D, a vector has three components: $\begin{pmatrix}x\\y\\z\end{pmatrix}$ . Length is still the Euclidean norm: $|v|=\sqrt{x^2+y^2+z^2}$ . Drag the scene to orbit.

Playground: edit components; drag to orbit

x y z

|v| = 2.69

Unit vectors (3D)

Divide by the vector’s length to obtain a unit vector on the sphere of radius 1. This is the same idea as in 2D, now extended into space.

\hat{v}=\frac{v}{|v|}

Playground: green = v, orange = unit vector

x y z

|v| = 3.74

\hat v

A 3D rotation needs an axis. Here we rotate about x, y, or z. The dashed arrow is the original vector; the green arrow shows the result after rotation.

R_y(\theta)=\begin{pmatrix}\cos\theta&0&\sin\theta\\0&1&0\\-\sin\theta&0&\cos\theta\end{pmatrix}

Playground: pick axis and θ

θ

result = (1.77, 1.00, -1.06)

Scale (3D)

Nonuniform scaling stretches each axis independently. The dashed cube is the unit cube; the green cube shows the result after scaling.

S=\begin{pmatrix}s_x&0&0\\0&s_y&0\\0&0&s_z\end{pmatrix}

Playground: sx, sy, sz

sx

sy

sz

volume scale = 1.05

Shear (3D)

Shear changes one coordinate by an amount proportional to another. Here $x' = x + k_{xy} y + k_{xz} z$ while $y$ and $z$ stay fixed, producing a slanted box.

H=\begin{pmatrix}1&k_{xy}&k_{xz}\\0&1&0\\0&0&1\end{pmatrix}

Playground: shear factors

kxy

kxz

kxy = 0.80, kxz = 0.00

Translation (3D)

Translation offsets every point by $(t_x,t_y,t_z)$ . A linear $3\times 3$ matrix cannot do this; you need an extra homogeneous coordinate, just as in 2D.

p' = p + t = \begin{pmatrix}x+t_x\\y+t_y\\z+t_z\end{pmatrix}

Playground: move the cube

tx

ty

tz

p = (0.50, 0.50, 0.50)

p′ = (2.00, 1.50, 1.00)

Homogeneous coordinates (3D)

We use the same technique as in 2D, one dimension higher: append $w=1$ so a 3D point becomes a 4-vector and translation fits inside a $4\times 4$ matrix.

\begin{pmatrix}x\\y\\z\end{pmatrix}\mapsto\begin{pmatrix}x\\y\\z\\1\end{pmatrix}\qquad T=\begin{pmatrix}1&0&0&t_x\\0&1&0&t_y\\0&0&1&t_z\\0&0&0&1\end{pmatrix}

Rotation and scaling use a fourth row and column that leave $w$ unchanged. Every affine transformation can then be composed through ordinary $4\times 4$ matrix multiplication, applied from right to left.

R_z=\begin{pmatrix}\cos\theta&-\sin\theta&0&0\\\sin\theta&\cos\theta&0&0\\0&0&1&0\\0&0&0&1\end{pmatrix} \qquad S=\begin{pmatrix}s_x&0&0&0\\0&s_y&0&0\\0&0&s_z&0\\0&0&0&1\end{pmatrix}

Inverse transforms (3D)

For $M = SRT$ , the inverse reverses the order: $M^{-1}=T^{-1}R^{-1}S^{-1}$ . The green cube is the result of applying $M$ to the unit cube; orange recovers the original with $M^{-1}$ .

M^{-1}M = I

Playground: composite and its inverse

tx

ty

tz

θz

sx

sy

sz

show M⁻¹ recovery

M⁻¹ exists

Determinant (3D)

For a $3\times 3$ matrix, the determinant is the signed volume of the parallelepiped spanned by its columns. A negative value means the orientation is flipped, so the transformation includes a reflection.

\det M = \text{signed volume of basis parallelepiped}

Playground: scale, shear, flip Y

sx

sy

sz

shear

flip Y (negate sy)

det = 1.39 (preserving)

Putting it together (3D)

Compose scaling, rotation, and translation into one $4\times 4$ matrix $M = SRT$ . The dashed cube is in local space; the green cube shows the result after applying $M$ .

M = S\,R\,T

Playground: full affine stack

tx

ty

tz

θx

θy

θz

sx

sy

sz

M (4×4)

1.25-0.080.631.680.171.07-0.200.98-0.380.210.790.030.000.000.001.00

vertex (1, 1, 1) → (3.47, 2.02, 0.65)