Applications in Computer Graphics and Games

This is where everything connects. Every concept from this section (vectors, matrices, transformations, eigenvalues) is used in real game engines and graphics pipelines. In this lesson you’ll see exactly how.

Every vertex in a 3D game goes through three matrix multiplications to get from its position in the model to a pixel on your screen:

$$\text{Screen Position} = \text{Projection} \times \text{View} \times \text{Model} \times \text{Vertex}$$

Drag to rotate · Scroll/Pinch to zoom

This interactive scene demonstrates the MVP pipeline in action. The blue cube is the model, auto-rotating (Model matrix). You’re viewing it through a perspective camera (View matrix) that you can drag to orbit. The 3D scene is projected onto your 2D screen (Projection matrix). The orange arrow shows the light direction, and the cube’s shading changes based on the dot product between each face’s normal and the light. Every concept from this section is working together right here.

• Model matrix: positions, rotates, and scales the object in the world (uses rotation matrices, scaling matrices, translation via homogeneous coordinates)
• View matrix: represents where the camera is and what it’s looking at (inverse of the camera’s transformation)
• Projection matrix: converts 3D to 2D (perspective makes far things smaller, orthographic keeps sizes constant)

The brightness of a surface depends on the angle between the surface normal $\mathbf{n}$ and the light direction $\mathbf{L}$:

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

When the surface faces the light directly ($\mathbf{n}$ and $\mathbf{L}$ point the same way), the dot product is 1 (full brightness). When perpendicular, it’s 0 (no light). The $\max$ prevents negative values when the surface faces away.

• Vector addition combines forces and velocities
• Projection (from lesson 3) calculates sliding along walls when a character hits at an angle
• Systems of equations (lesson 6) find collision points between moving objects
• Cross products compute surface normals for physics responses

The “look-at” function builds a View matrix from three inputs: camera position, target point, and an up direction. It uses cross products to build an orthonormal basis (three perpendicular unit vectors), which becomes the rows of the View matrix.

Example 1: Lighting Calculation

Surface normal: $\mathbf{n} = \langle 0, 1, 0 \rangle$ (pointing straight up)

Light direction: $\mathbf{L} = \langle 0, 0.707, 0.707 \rangle$ (coming from 45 degrees above)

$\text{brightness} = \mathbf{n} \cdot \mathbf{L} = (0)(0) + (1)(0.707) + (0)(0.707) = 0.707$

The surface gets about 71% brightness. Makes sense: the light is hitting at a 45 degree angle, not straight on.

The diagram shows the surface normal (green, pointing up) and the incoming light (orange, at 45°). The angle between them determines brightness via the dot product. The bar on the right shows the resulting 71% brightness.

Example 2: Wall Sliding

A character moves with velocity $\mathbf{v} = \langle 3, 4 \rangle$ and hits a wall with normal $\mathbf{n} = \langle 1, 0 \rangle$ (vertical wall on the right).

The component into the wall: $\text{proj}_{\mathbf{n}} \mathbf{v} = \frac{\mathbf{v} \cdot \mathbf{n}}{\lVert \mathbf{n} \rVert^2} \mathbf{n} = \frac{3}{1} \langle 1, 0 \rangle = \langle 3, 0 \rangle$

Sliding velocity (remove the wall component): $\mathbf{v} - \text{proj}_{\mathbf{n}} \mathbf{v} = \langle 3, 4 \rangle - \langle 3, 0 \rangle = \langle 0, 4 \rangle$

The character slides upward along the wall instead of stopping.

The blue arrow is the character’s velocity hitting the wall. The dashed red component goes into the wall (removed). The green arrow is what’s left: the sliding direction along the wall.

Example 3: Combining Transformations

To rotate an object 45 degrees and then scale it by 2x, multiply the matrices:

$$\text{Combined} = \text{Scale} \times \text{Rotation}$$

Order matters. Rotating then scaling gives a different result than scaling then rotating. The engine applies transformations right-to-left: the rightmost matrix acts first.

Every frame in a modern game:

• The GPU multiplies millions of vertices by MVP matrices
• Lighting shaders compute dot products for every visible surface
• Physics engines solve systems of equations for collision constraints
• Animation systems blend transformations using matrix interpolation
• Particle systems use vector addition for velocity and acceleration

All of this happens 60+ times per second. Linear algebra is the engine behind the engine.