Matrix Transformations in 3D Graphics

Introduction

In our previous lessons, we have developed a solid understanding of matrices as mathematical objects. We've explored their properties through determinants, which tell us how they scale space, and norms, which measure their "size" or amplification factor. Now, we will connect these abstract concepts directly to one of their most powerful and visual applications: 3D computer graphics. Your interest in low-level engineering and graphics will find a strong anchor here, as these principles form the very foundation of every modern 3D rendering pipeline.

This lesson addresses the final outcome of our first module: Relate matrix transformations (rotation, scale, shear) to their application in 3D computer graphics. We will see how a handful of numbers in a matrix can precisely describe the position, orientation, and size of an object in a virtual world. We will also uncover a clever mathematical "trick" that unifies all these operations into a single, elegant framework, which is essential for performance in graphics systems.

What is a Linear Transformation?

At its core, a 3D transformation is a function that takes a point (a vector) in 3D space and moves it to a new location. A special and very important class of these are linear transformations. They have two key properties: lines remain lines after the transformation, and the origin $(0,0,0)$ remains fixed in place.

The renowned 3Blue1Brown channel offers a superb visualization of what this means in three dimensions.

This second point is the fundamental bridge between the geometry and the algebra. A 3x3 matrix is not just a grid of nine numbers; it is a compact description of a new coordinate system.

A Geometric Interpretation of Matrices

Let's formalize this crucial insight. The text 3D Math Primer for Graphics and Game Development provides an excellent breakdown of how to interpret a matrix geometrically.

This is different from the 3Blue1Brown videos, which use column vectors, where transformation happens via pre-multiplication: ${\mathbf{v}}^{\prime }=\mathbf{Mv}$. In that convention, the columns of the matrix are the transformed basis vectors. Both conventions are valid and widely used (DirectX often uses row vectors, while OpenGL and many academic texts use column vectors). The underlying principle is the same; what matters is consistency. For the rest of this lesson, we will adopt the column vector convention (${\mathbf{v}}^{\prime }=\mathbf{Mv}$).

The key takeaway is that to construct a matrix for a desired linear transformation, you only need to answer one question: "Where do my basis vectors end up?"

Let's build a few examples:

• Scaling: To scale an object by a factor of 2 along the Y-axis and 0.5 along the Z-axis, we find where the basis vectors land:

  • $\hat{\mathbf{i}}=(1,0,0)$ remains unchanged: $(1,0,0)$.
  • $\hat{\mathbf{j}}=(0,1,0)$ is scaled by 2: $(0,2,0)$.
  • $\hat{\mathbf{k}}=(0,0,1)$ is scaled by 0.5: $(0,0,0.5)$.

  Placing these new vectors as columns in our matrix gives us the scaling matrix $\mathbf{S}$:

  $$\mathbf{S}=\left(\begin{array}{ccc}1& 0& 0\\ 0& 2& 0\\ 0& 0& 0.5\end{array}\right)$$

• Rotation: Let's find the matrix for a 90-degree counter-clockwise rotation around the Y-axis.

  • $\hat{\mathbf{i}}=(1,0,0)$ rotates to the Z-axis: $(0,0,1)$.
  • $\hat{\mathbf{j}}=(0,1,0)$ is on the axis of rotation, so it's unchanged: $(0,1,0)$.
  • $\hat{\mathbf{k}}=(0,0,1)$ rotates to the negative X-axis: $(-1,0,0)$.

  The rotation matrix $\mathbf{R}$ is:

  $$\mathbf{R}=\left(\begin{array}{ccc}0& 0& -1\\ 0& 1& 0\\ 1& 0& 0\end{array}\right)$$

Other linear transformations like shear (which skews an object) can be constructed in the same way.

The Problem with Translation

We now have matrices for scaling and rotation. What about translation—moving an object in space?

Let's try to build a translation matrix $\mathbf{T}$ that moves every point by a vector $(t_x,t_y,t_z)$. A point at the origin $\mathbf{v}=(0,0,0)$ should move to $(t_x,t_y,t_z)$. However, with a 3x3 matrix $\mathbf{M}$, what is $\mathbf{Mv}$ when $\mathbf{v}$ is the zero vector?

$$\mathbf{Mv}=\left(\begin{array}{ccc}{m}_{11}& m_{12}& m_{13}\\ m_{21}& m_{22}& m_{23}\\ m_{31}& m_{32}& m_{33}\end{array}\right)\left(\begin{array}{c}0\\ 0\\ 0\end{array}\right)=\left(\begin{array}{c}0\\ 0\\ 0\end{array}\right)$$

The origin always maps to the origin. This means a 3x3 matrix, representing a linear transformation, cannot perform translation. Translation is an example of an affine transformation, which is a linear transformation followed by a translation.

This poses a problem for graphics pipelines. We want to represent all our transformations as matrices so we can combine them easily through multiplication. How can we include translation in this framework?

The Solution: Homogeneous Coordinates

The solution is a beautifully clever mathematical construction. We embed our 3D world into 4D space. A 3D point $\mathbf{p}=(x,y,z)$ is represented by a 4D vector ${\mathbf{p}}^{\prime }=(x,y,z,1)$. This is called using homogeneous coordinates.

By adding this fourth component, we gain the ability to perform translation via matrix multiplication. The video below explains both the mathematical mechanics and the profound geometric intuition behind this idea.

With this, we can now define a 4x4 translation matrix $\mathbf{T}$ that moves a point by $(t_x,t_y,t_z)$:

$$\mathbf{T}=\left(\begin{array}{cccc}1& 0& 0& t_x\\ 0& 1& 0& t_y\\ 0& 0& 1& t_z\\ 0& 0& 0& 1\end{array}\right)$$

When we multiply this by our homogeneous point $(x,y,z,1)$, we get:

$$\left(\begin{array}{cccc}1& 0& 0& t_x\\ 0& 1& 0& t_y\\ 0& 0& 1& t_z\\ 0& 0& 0& 1\end{array}\right)\left(\begin{array}{c}x\\ y\\ z\\ 1\end{array}\right)=\left(\begin{array}{c}1x+0y+0z+t_x(1)\\ 0x+1y+0z+t_y(1)\\ 0x+0y+1z+t_z(1)\\ 0x+0y+0z+1(1)\end{array}\right)=\left(\begin{array}{c}x+t_x\\ y+t_y\\ z+t_z\\ 1\end{array}\right)$$

The result is our translated point, still in homogeneous form! Our linear transformation matrices (scale, rotation) can be easily expanded to 4x4 matrices by embedding the 3x3 part and filling the rest with elements of the identity matrix.

Composing Transformations

The real power of this unified 4x4 matrix framework is composition. If we want to scale an object, then rotate it, then translate it, we can apply the matrices in sequence:
${\mathbf{p}}_{\mathbf{final}}=\mathbf{T}(\mathbf{R}(\mathbf{S}{\mathbf{p}}_{\mathbf{initial}}))$
Because matrix multiplication is associative, this is the same as:
${\mathbf{p}}_{\mathbf{final}}=(\mathbf{TRS}){\mathbf{p}}_{\mathbf{initial}}$
We can pre-multiply our transformation matrices to create one single matrix, $\mathbf{M}=\mathbf{TRS}$, that performs all the operations at once. This is a massive performance win, as every vertex of a complex 3D model can be transformed with a single matrix-vector multiplication.

A single 4x4 matrix transforms a model from its own "object space" (centered at its origin) to its final position and orientation in "world space".

Critically, matrix multiplication is not commutative. The order of operations matters immensely. Scaling then translating is not the same as translating then scaling.

This image shows the result of applying a rotation and a translation in different orders. Top: Rotate 90° then translate along X. Bottom: Translate along X then rotate 90°.

Question: Imagine a model of a car is defined around the origin. You want to place it at position $(10,0,0)$ and then have it rotate around its own center. Should you apply the rotation matrix first or the translation matrix first? What would happen if you did it in the opposite order?

Answer

You should apply the rotation first, then the translation ($\mathbf{M} = \mathbf{TR}$). This rotates the car around the origin (its center) and then moves the already-rotated car to position $(10, 0, 0)$.

If you were to translate first, the car would move to $(10,0,0)$. The subsequent rotation would then happen around the world origin, causing the car to orbit the point $(0,0,0)$ at a distance of 10 units, rather than spinning in place. This corresponds to the bottom half of the "Order Dependency" image.

Conclusion

This lesson bridged the gap from abstract linear algebra to the practical foundations of computer graphics. We have seen that matrices are not just arrays of numbers, but the language of geometric transformations.

Key Takeaways:

• Linear Transformations (3x3): Rotation, scaling, and shearing are linear transformations that can be represented by 3x3 matrices. The columns of the matrix are simply the new positions of the standard basis vectors.
• Affine Transformations: Translation is not linear because it moves the origin.
• Homogeneous Coordinates (4x4): By adding a 4th dimension, we can represent 3D translation as a 4x4 matrix multiplication. This unifies all standard geometric operations into a single framework.
• Composition and Order: Multiple transformations can be combined into a single matrix by multiplying their individual matrices. The order of multiplication is critical, as transformations are not commutative. The final transformation matrix ($\mathbf{M}=\mathbf{TRS}$) is applied to vertices in the reverse order of multiplication (scale, then rotate, then translate).

You now have the complete mathematical toolkit to understand how any rigid object is placed and oriented in a 3D scene. This is the first and most fundamental step in the rendering pipeline.

In the next module, we will reverse our thinking. Instead of building matrices to create transformations, we will learn how to decompose an existing matrix to understand the transformation it represents. Our first topic will be eigenvalues and eigenvectors, which reveal the intrinsic "axes" of a linear transformation and form the bedrock of many advanced techniques in both graphics and machine learning.