Welcome to 3D Worlds and Matrix Transformations! We're embarking on an exciting journey into the mathematical foundations that power modern 3D graphics. In this first lesson, we'll explore one of the most fundamental concepts in computer graphics: how we use matrices to move and rotate objects in 3D space.
Today, we'll focus on understanding translation and rotation matrices. By the end of this lesson, we'll have built a solid theoretical foundation that will prepare us for the hands-on work ahead. Think of this as laying the groundwork for everything we'll create together in this course.
Understanding 3D Space and Vectors
Introducing Bases
Understanding Change of Basis
Translation as a Change of Basis
Introducing Matrices
Why We Need 4×4 Matrices
Conclusion and Next Steps
We've built a solid theoretical foundation for understanding transformation matrices in 3D graphics. We explored how positions and vectors work in 3D space, learned why matrices are so powerful for coordinate transformations, and discovered why 4×4 matrices are essential for combining rotation and translation operations.
In the upcoming quiz, we'll test your understanding of these transformation concepts and reinforce how matrices work to manipulate objects in 3D space. You'll apply this theoretical knowledge to solve problems involving translation and rotation matrices, solidifying your grasp of how these mathematical concepts create the foundation for 3D graphics transformations.
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal
Before we dive into matrices, let's establish our foundation in 3D space. In computer graphics, we work with two essential mathematical objects: positions and vectors.
A position represents a specific point in 3D space using three coordinates (x,y,z). For example, the point (3,5,2) tells us exactly where something is located. A vector, on the other hand, represents a direction and magnitude. Think of it as an arrow pointing from one place to another, like moving 2 units right, 3 units up, and 1 unit forward, which we'd write as the vector (2,3,1).
The beauty of vectors lies in their versatility: they can represent movement, orientation, velocity, or any directional quantity in our 3D world. When we want to move an object from one position to another, we're essentially adding a vector to a position.
For visual clarity in our diagrams and examples, we'll often illustrate concepts using 2D coordinate space with just (x,y) coordinates. However, it's important to understand that every principle we discuss applies directly to 3D space with (x,y,z) coordinates, and even extends to higher-dimensional spaces. The mathematical concepts remain identical—we simply add more coordinate components as needed.
To truly understand how matrices transform 3D space, we need to grasp the concept of a basis. A basis is a set of vectors that defines our coordinate system—think of it as the fundamental "rulers" we use to measure and describe positions in 3D space.
The standard basis in 3D consists of three unit vectors:
i = 100 (points along the x-axis)
j = 010 (points along the y-axis)
k = 001 (points along the z-axis)
Here's the key insight: when we write a position like (1,5,3), we're actually expressing it as a linear combination of these basis vectors:
(1,5,3)=1⋅i+5⋅j+3⋅k
This means: "Start at the origin, move 1 unit in the i direction, then 5 units in the j direction, then 3 units in the k direction." The coordinates (1, 5, 3) are simply the coefficients that tell us how much of each basis vector to use.
This perspective is crucial because it reveals that every vector is really a recipe for combining basis vectors. When we transform space with matrices, we're changing what those basis vectors i, j, and k point toward, which automatically changes how every position and vector in our scene is interpreted.
Here's why bases are so fundamental for linear algebra and computer graphics. Imagine you're directing an animated movie and have spent months perfecting a complex 3D scene. Every character position, every camera angle, every light source has been meticulously placed using coordinates in your standard coordinate system. Now you want to rotate the camera 45 degrees to view the scene from a different perspective.
Without a change of basis, you'd need to manually recalculate and update every single coordinate—a computational nightmare.
Instead, we can change the coordinate system itself by redefining our basis vectors. The object coordinates (coefficients) stay exactly the same—we're literally warping the space they exist in. For example, instead of our standard basis:
i = (1,0)
k = (0,1)
We might create a rotated basis where:
i' = (cos(45°),sin(45°)) (45° rotation)
k' = (−sin(45°),cos(45°))
A point that was (3,2) remains (3,2)—but now those same coefficients describe a completely different location in space because we've changed the underlying coordinate system that those coefficients reference. This is the power of basis transformations: we warp space itself rather than moving individual objects.
Now that we've seen how rotation can be achieved by changing our basis vectors, let's explore another fundamental transformation: translation. Translation is simply moving objects from one location to another, but like rotation, we can think of it as a change to our coordinate system itself.
Instead of moving individual objects, we can shift the entire coordinate system by changing where our origin is located. This is like moving the center point from which all measurements are taken.
Consider our standard 2D coordinate system with origin at (0,0). If we want to translate our scene, we can redefine our coordinate system to have its origin at a different location, say (−2,−3). Now when we specify a point as (3,2) in our translated coordinate system, it actually appears at (3+(−2),2+(−3))=(1,−1) in the original world space.
The key insight is that translation is an offset applied to our entire coordinate system. Every point maintains its same coordinates within the translated system, but those coordinates now reference different locations in world space because we've shifted the reference frame itself.
That was a lot to take in! Thankfully, this is all the insight we need to understand linear transformations (translations, rotations, and scaling).
Now that we understand how transformations work conceptually as basis changes, let's explore the mathematical tool that makes these transformations practical: matrices. A matrix is simply a rectangular array of numbers that encodes a linear transformation. Think of it as a compact way to store the instructions for how to transform our coordinate system.
We won't go any deeper into the math, but all you need to know is this beautiful connection: the columns of a transformation matrix are exactly the new basis vectors we want to use.
For a 2×2 matrix in 2D space:
[ix′iy′jx′jy′]
For a 3×3 matrix in 3D space:
ix′iy′iz′jx′jy′jz′kx′ky′kz′
Each column represents where our standard basis vectors i, j, and k should point after the transformation. The first column ix′iy′iz′ tells us the new direction for the x-axis, the second column jx′jy′jz′ defines the new y-axis direction, and the third column kx′ky′kz′ defines the new z-axis direction.
When we multiply a vector by this matrix, we're essentially asking: "If I have 3 units of the new x-direction, 2 units of the new y-direction, and 1 unit of the new z-direction, where do I end up?" The matrix multiplication automatically combines these basis vectors with the appropriate coefficients to give us the final transformed position.
This is why matrix multiplication is so powerful for graphics: it lets us apply complex coordinate system changes to any number of points with a single, efficient operation. Instead of manually calculating how each point moves under a transformation, we encode the transformation once in a matrix and then apply it universally.
Here's where we encounter a fundamental limitation: while 3×3 matrices excel at rotation and scaling, they cannot represent translation. This creates a problem because moving objects is one of the most basic operations we need in 3D graphics.
The elegant solution is to simply add one more dimension and use 4×4 matrices with homogeneous coordinates. By adding this extra dimension to our mathematics, we can represent any combination of translation, rotation, and scaling in a single matrix multiplication! This unification is incredibly powerful because it means we can chain together complex transformations using simple matrix multiplication.
The structure of a 4×4 transformation matrix follows a clear pattern: the upper-left 3×3 section handles rotation and scaling, the rightmost column (excluding the bottom element) handles translation, and the bottom row remains [0,0,0,1] to maintain mathematical consistency.
Thus, our final package looks like this: R00R10R200R01R11R210R02R12R220TxTyTz1
The R values form the 3×3 rotation/scaling matrix, and Tx, Ty, Tz represent the translation components. This single matrix can now handle any combination of rotation, scaling, and translation in one unified operation.
.png)
