Linear Algebra in Computer Graphics and Games

Every time a character turns, a camera pans or a car spins across your screen, a computer is multiplying matrices and vectors millions of times per second. Linear algebra is the hidden engine of computer graphics, and the same Matric and FSc ideas you learn about vectors and matrices are exactly what game engines such as Unity and Unreal use. This article shows how those ideas work in practice, with fully worked examples you can check by hand.

Points and Vectors: The Raw Material

In a game, every object is built from vertices, points in 2D or 3D space. A 3D model of a character might contain tens of thousands of vertices, each stored as a vector such as \( (x, y, z) \). Edges join vertices into triangles, and triangles form the visible surface (a "mesh").

Vectors also describe directions: where a player is facing, which way light travels, and how fast a bullet moves. Two operations do most of the work:

• Dot product: \( \mathbf{a}\cdot\mathbf{b} = a_x b_x + a_y b_y + a_z b_z = |\mathbf{a}||\mathbf{b}|\cos\theta \). It measures how much two directions agree.
• Cross product: \( \mathbf{a}\times\mathbf{b} \) gives a vector perpendicular to both, which is how engines find the direction a surface faces (its normal).

Transformations as Matrices

Moving an object means applying the same rule to every vertex. The key insight is that rotation and scaling are linear transformations, so each one can be written as a matrix. To transform a point, multiply its vector by the matrix.

Scaling

To stretch an object by a factor \( s_x \) horizontally and \( s_y \) vertically:

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

Rotation

To rotate a point anticlockwise about the origin by an angle \( \theta \):

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

Worked Example 1: Rotating a Point

Rotate the point \( P = (4, 2) \) anticlockwise by \( 30^\circ \) about the origin.

Step 1. Use \( \cos 30^\circ = \frac{\sqrt{3}}{2} \approx 0.8660 \) and \( \sin 30^\circ = 0.5 \).

Step 2. Multiply the matrix by the vector:

$$ \begin{pmatrix} x' \\ y' \end{pmatrix} = \begin{pmatrix} 0.8660 & -0.5 \\ 0.5 & 0.8660 \end{pmatrix}\begin{pmatrix} 4 \\ 2 \end{pmatrix} $$

Step 3. Compute each row:

• \( x' = 0.8660(4) - 0.5(2) = 3.464 - 1 = 2.464 \)
• \( y' = 0.5(4) + 0.8660(2) = 2 + 1.732 = 3.732 \)

Step 4. Check. Rotation should not change distance from the origin. Originally \( \sqrt{4^2+2^2} = \sqrt{20} \approx 4.472 \). Now \( \sqrt{2.464^2 + 3.732^2} = \sqrt{6.071 + 13.928} = \sqrt{19.999} \approx 4.472 \). The length is preserved, so the answer is \( P' \approx (2.464,\ 3.732) \).

The Translation Problem and Homogeneous Coordinates

Moving an object sideways, called translation, is not linear: adding a fixed vector \( (t_x, t_y) \) cannot be done with a \( 2\times 2 \) matrix, because a matrix always sends the origin to the origin.

Graphics programmers solve this with a clever trick called homogeneous coordinates. A 2D point \( (x, y) \) is written as \( (x, y, 1) \), and we use \( 3\times 3 \) matrices. Translation becomes:

$$ T = \begin{pmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{pmatrix} $$

In 3D, points become \( (x, y, z, 1) \) and every transformation is a \( 4\times 4 \) matrix. This is why shader code in games is full of mat4 types.

Worked Example 2: Combining Scale and Translation

A sprite at \( P = (1, 3) \) must be doubled in size (about the origin) and then moved by \( (5, -1) \). Find one matrix that does both, and the final position.

Step 1. Write the two matrices:

$$ S = \begin{pmatrix} 2 & 0 & 0 \\ 0 & 2 & 0 \\ 0 & 0 & 1 \end{pmatrix}, \qquad T = \begin{pmatrix} 1 & 0 & 5 \\ 0 & 1 & -1 \\ 0 & 0 & 1 \end{pmatrix} $$

Step 2. Scaling happens first, so it sits closest to the vector. The combined matrix is \( M = TS \):

$$ M = \begin{pmatrix} 2 & 0 & 5 \\ 0 & 2 & -1 \\ 0 & 0 & 1 \end{pmatrix} $$

Step 3. Apply it to \( (1, 3, 1) \):

• \( x' = 2(1) + 0(3) + 5(1) = 7 \)
• \( y' = 0(1) + 2(3) - 1(1) = 5 \)
• last entry \( = 1 \)

Step 4. Check. Doing it in two steps: scaling gives \( (2, 6) \), then translating gives \( (2+5,\ 6-1) = (7, 5) \). It matches.

Notice that order matters. If we translated first and then scaled, \( ST \) would give \( (2(1+5),\ 2(3-1)) = (12, 4) \), a completely different place. Matrix multiplication is not commutative, and many beginner graphics bugs come from multiplying in the wrong order.

The Graphics Pipeline: A Chain of Matrices

A modern engine sends each vertex through a chain of matrices, often called MVP:

1. Model matrix: places the object in the game world (its position, rotation and size).
2. View matrix: moves the whole world so the camera sits at the origin looking down an axis.
3. Projection matrix: squashes the 3D scene into 2D, making distant objects smaller (perspective).

Because matrix multiplication is associative, the engine multiplies \( P \cdot V \cdot M \) once per object, then applies that single matrix to every vertex. That saves enormous amounts of work, and graphics cards (GPUs) are designed to perform thousands of these multiplications in parallel.

Lighting with the Dot Product

How bright should a surface look? The simplest model, Lambertian (diffuse) shading, says brightness is proportional to \( \cos\theta \), where \( \theta \) is the angle between the surface normal \( \mathbf{n} \) and the direction to the light \( \mathbf{l} \). With unit vectors this is just a dot product:

$$ \text{brightness} = \max(0,\ \mathbf{n}\cdot\mathbf{l}) $$

Worked Example 3: Shading a Triangle

A triangle has vertices \( A(0,0,0) \), \( B(1,0,0) \) and \( C(0,1,0) \). Light comes from the direction \( (0, 1, 1) \). How bright is the triangle?

Step 1. Find the normal. Edge vectors are \( \mathbf{AB} = (1,0,0) \) and \( \mathbf{AC} = (0,1,0) \). Their cross product:

$$ \mathbf{AB}\times\mathbf{AC} = (0\cdot 0 - 0\cdot 1,\ 0\cdot 0 - 1\cdot 0,\ 1\cdot 1 - 0\cdot 0) = (0, 0, 1) $$

Step 2. Normalise the light direction. \( |(0,1,1)| = \sqrt{2} \), so \( \mathbf{l} = \left(0, \tfrac{1}{\sqrt2}, \tfrac{1}{\sqrt2}\right) \).

Step 3. Dot product. \( \mathbf{n}\cdot\mathbf{l} = 0 + 0 + 1\cdot\tfrac{1}{\sqrt2} \approx 0.707 \).

Step 4. Interpret. The triangle shows about 70.7% of full brightness, which makes sense because the light hits it at \( 45^\circ \).

Did You Know?

• A typical modern game may perform billions of matrix-vector multiplications every second, which is why GPUs were later repurposed for training AI models: both jobs are mostly linear algebra.
• Many engines store rotations as quaternions, four-number objects discovered by William Rowan Hamilton in 1843, because they avoid "gimbal lock" and blend smoothly between orientations.
• The order of vertices in a triangle (clockwise or anticlockwise) decides the direction of its cross-product normal, and engines use this to skip drawing the back faces of objects.

Key Takeaways

• Vertices are vectors, and moving an object means multiplying every vertex by a transformation matrix.
• Rotation and scaling are linear; translation needs homogeneous coordinates and \( 3\times3 \) or \( 4\times4 \) matrices.
• Matrix order matters: \( TS \) and \( ST \) generally give different results.
• The Model, View and Projection matrices carry each vertex from object space to the screen.
• Dot products control lighting and cross products give surface normals.

If you need step-by-step help with matrices, vectors or a graphics programming assignment, Amathify's subject experts and PhD scholars are ready to help; just message us on WhatsApp or send your problem through the Ask a Question form.