The Matrix

2 min read•1 page

Matrix Dimensions:

Points and vectors are specific instances of matrices. A 3D homogeneous vector is simply a matrix with 4 Rows × 1 Column (column vector) or 1 Row × 4 Columns (row vector), sitting inside a higher-dimensional M × N matrix framework.

4 Rows × 1 Column Matrix

[x]

[y]

[z]

[w]

1 Row × 4 Columns Matrix

[x, y, z, w]

python

1# 1. A 4x1 Column Vector (4 rows, 1 column)
2col_vec = [[x], [y], [z], [1.0]]
3
4# 2. A 1x4 Row Vector (1 row, 4 columns)
5row_vec = [[x, y, z, 1.0]]
6
7# 3. A 4x4 Transformation Matrix (4 rows, 4 columns)
8matrix_4x4 = [
9    [1.0, 0.0, 0.0, tx],
10    [0.0, 1.0, 0.0, ty],
11    [0.0, 0.0, 1.0, tz],
12    [0.0, 0.0, 0.0, 1.0],
13]

More generally, an array of numbers can extend to m × n × t (m rows, n columns, t depth slices, known as a 3D tensor), though 3D graphics relies primarily on 4 × 4 matrices and 4 × 1 column vectors.

A Point is a specific instance of a Vector (anchored to the origin), and a Vector is a specific 1D instance of a Matrix.

Dimension (1D / 2D / 3D)

3.00

2 min read•1 page

ToHomogeneousColumn():

Modern 3D graphics is built on one core mathematical tool: the 4×4 transformation matrix. Every object in engines like Unity, Unreal, Blender, or WebGL is constantly transformed by representing each point as a 4×1 column vector with a homogeneous coordinate (w = 1.0).

python

1class Point3d:
2    def ToHomogeneousColumn(self) -> list[list[float]]:
3        """Converts a 3D point into a 4x1 homogeneous column vector (w = 1.0)."""
4        return [
5            [self.X],
6            [self.Y],
7            [self.Z],
8            [1.0]  # w = 1.0 for Points (0.0 for Vectors)
9        ]

Why the extra 1? This fourth value is called the homogeneous coordinate (w). Without it, simple translation (shifting points) cannot be achieved via matrix multiplication. That is why 3D graphics uses 4×4 matrices instead of 3×3 matrices.

3.00

3.50

2.00

Up until this point, storing [x, y, z, 1] looks just like defining a point or vector—the magic happens as soon as we multiply it by a 4×4 matrix.

1 min read•1 page

The Structure of a 4×4 Matrix

A general 3D transformation matrix contains several different operations encoded into exactly 16 numbers. It is divided into logical blocks that each serve a distinct purpose:

Section	Purpose
Upper-Left 3×3	Rotation and Scaling
Right Column	Translation (Position)
Bottom Row	Homogeneous Coordinate Mechanics

Use the dropdown above to highlight and activate the different sections of the matrix and see how they map directly to 3D space behaviors!

switch transform

1 min read•1 page

Matrix4x4 Structure:

A standard 3×3 matrix can rotate, scale, and shear space, but it is mathematically impossible for a 3×3 matrix to translate (move) the origin [0, 0, 0]. Adding a 4th homogeneous row and column unlocks translation inside a unified 4×4 structure.

python

1class Matrix4x4:
2    def __init__(self):
3        # 4x4 Homogeneous Identity Matrix
4        self.M = [
5            [1.0, 0.0, 0.0, 0.0],
6            [0.0, 1.0, 0.0, 0.0],
7            [0.0, 0.0, 1.0, 0.0],
8            [0.0, 0.0, 0.0, 1.0],
9        ]

Observe the Origin (Red Point): In 3×3 mode, changing the Translation Sliders does nothing because the origin remains locked at [0, 0, 0]. Switching to 4×4 mode allows translation to occur because the homogeneous coordinate w = 1 activates the 4th translation column!

3x3 vs 4x4

2.00

1.50

2 min read•1 page

Identity:

The Identity Matrix is the standard “do-nothing” transformation. Applying it to any point or vector leaves it completely unchanged. It acts like the number 1 in ordinary arithmetic.

python

1# The Identity Matrix (I):
2# Columns 1, 2, 3 are the X, Y, Z basis vectors; Column 4 is translation
3#     Col 1(X) Col 2(Y) Col 3(Z) Col 4(T)
4I = [
5    [  1.0,     0.0,     0.0,     0.0  ],
6    [  0.0,     1.0,     0.0,     0.0  ],
7    [  0.0,     0.0,     1.0,     0.0  ],
8    [  0.0,     0.0,     0.0,     1.0  ]
9]

A crucial concept in linear algebra is that the first three columns of a 4×4 transformation matrix store the X, Y, and Z basis vectors, while the fourth column stores the translation offset.

Adjust the sliders to warp the X and Y basis vectors. Watch how the corresponding columns of the matrix update live to represent the new coordinate system!

Skew X

0.00

Skew Y

0.00

2 min read•1 page

Translation(Vector3d):

Translation shifts an object through 3D space by adding constants to its coordinates. In a 4×4 matrix, the translation amounts occupy the first three cells of the rightmost column: t_x, t_y, and t_z.

python

1# Translation Matrix:
2T = [
3    [1.0, 0.0, 0.0, tx ],
4    [0.0, 1.0, 0.0, ty ],
5    [0.0, 0.0, 1.0, tz ],
6    [0.0, 0.0, 0.0, 1.0]
7]
8# Applied to v = [x, y, z, 1]^T:
9# v_new = [x + tx, y + ty, z + tz, 1]^T

Notice that when translation is performed on points, the homogeneous coordinate w = 1 ensures the translation factor is added. If applied to a pure directional vector (where w = 0), the translation is ignored because directions are position-independent!

Translate X (tx)

1.50

Translate Y (ty)

-1.00

Translate Z (tz)

2.00

2 min read•1 page

Scale(Vector3d):

Scaling adjusts the size of an object along individual coordinate axes. In a 4×4 matrix, the scaling factors reside directly on the main diagonal: s_x, s_y, and s_z.

python

1# Scaling Matrix:
2S = [
3    [sx , 0.0, 0.0, 0.0],
4    [0.0, sy , 0.0, 0.0],
5    [0.0, 0.0, sz , 0.0],
6    [0.0, 0.0, 0.0, 1.0]
7]
8# Applied to v = [x, y, z, 1]^T:
9# v_new = [sx*x, sy*y, sz*z, 1]^T

Scaling properties:
• s > 1: stretches the object along that axis.
• 0 < s < 1: squashes the object.
• s < 0: mirrors/flips the object across that plane! Try dragging any slider below zero.

Scale X (sx)

1.20

Scale Y (sy)

0.80

Scale Z (sz)

1.50

4 min read•1 page

Determinant & Mirroring:

The determinant is a single scalar value that describes how the matrix scales volume. Crucially, if the determinant is negative, the coordinate space has been mirrored (flipped inside-out).

python

1def GetDeterminant(self) -> float:
2    """Calculates the determinant of the 4x4 matrix using Laplace expansion."""
3    m00, m01, m02, m03 = self.m00, self.m01, self.m02, self.m03
4    m10, m11, m12, m13 = self.m10, self.m11, self.m12, self.m13
5    m20, m21, m22, m23 = self.m20, self.m21, self.m22, self.m23
6    m30, m31, m32, m33 = self.m30, self.m31, self.m32, self.m33
7
8    d2_01_01 = m20 * m31 - m21 * m30
9    d2_01_02 = m20 * m32 - m22 * m30
10    d2_01_03 = m20 * m33 - m23 * m30
11    d2_01_12 = m21 * m32 - m22 * m31
12    d2_01_13 = m21 * m33 - m23 * m31
13    d2_01_23 = m22 * m33 - m23 * m32
14
15    minor0 = m11 * d2_01_23 - m12 * d2_01_13 + m13 * d2_01_12
16    minor1 = m10 * d2_01_23 - m12 * d2_01_03 + m13 * d2_01_02
17    minor2 = m10 * d2_01_13 - m11 * d2_01_03 + m13 * d2_01_01
18    minor3 = m10 * d2_01_12 - m11 * d2_01_02 + m12 * d2_01_01
19
20    return m00 * minor0 - m01 * minor1 + m02 * minor2 - m03 * minor3

Mirroring geometry is just scaling by -1 across an axis. However, this flips the matrix determinant to negative, which means mesh faces will render inside-out (normals are inverted).

Scale X

2.00

3 min read•1 page

Rotation(Vector3d, float):

Unlike 2D, there is no single universal 3D rotation matrix. Instead, separate matrices exist for rotating around each coordinate axis: X, Y, and Z.

python

1import math
2
3def RotationX(a: float) -> list[list[float]]:
4    c, s = math.cos(a), math.sin(a)
5    return [
6        [1.0, 0.0, 0.0, 0.0],
7        [0.0,   c,  -s, 0.0],
8        [0.0,   s,   c, 0.0],
9        [0.0, 0.0, 0.0, 1.0],
10    ]
11
12def RotationY(a: float) -> list[list[float]]:
13    c, s = math.cos(a), math.sin(a)
14    return [
15        [  c, 0.0,   s, 0.0],
16        [0.0, 1.0, 0.0, 0.0],
17        [ -s, 0.0,   c, 0.0],
18        [0.0, 0.0, 0.0, 1.0],
19    ]
20
21def RotationZ(a: float) -> list[list[float]]:
22    c, s = math.cos(a), math.sin(a)
23    return [
24        [  c,  -s, 0.0, 0.0],
25        [  s,   c, 0.0, 0.0],
26        [0.0, 0.0, 1.0, 0.0],
27        [0.0, 0.0, 0.0, 1.0],
28    ]

Axis	Behavior
X-Axis	X coordinate remains fixed; Y and Z rotate.
Y-Axis	Y coordinate remains fixed; X and Z rotate.
Z-Axis	Z coordinate remains fixed; X and Y rotate.

Observe how the selected axis remains completely stationary while the other two dimensions perform a circular orbit!

Rotation Axis (0: X, 1: Y, 2: Z)

2.00

Angle (Degrees)

45.00

LookAt(Eye, Target, Up):

Creates a rotation matrix that aligns an object to face a specific target point. This is the most common way to position cameras and orient objects in 3D pipelines.

python

1def LookAt(eye: 'Point3d', target: 'Point3d', up: 'Vector3d') -> 'Matrix4x4':
2    # 1. Forward Vector (Z)
3    forward = (target - eye).Unitize()
4    
5    # 2. Right Vector (X) = Cross Product of Up and Forward
6    right = Vector3d.CrossProduct(up, forward).Unitize()
7    
8    # 3. True Up Vector (Y) = Cross Product of Forward and Right
9    true_up = Vector3d.CrossProduct(forward, right)
10    
11    # Build rotation matrix from these 3 basis vectors
12    return Matrix4x4([
13        right.X,   true_up.X,   forward.X,   eye.X,
14        right.Y,   true_up.Y,   forward.Y,   eye.Y,
15        right.Z,   true_up.Z,   forward.Z,   eye.Z,
16        0,         0,           0,           1
17    ])

Target X

3.00

Target Y

3.00

2 min read•1 page

Multiply(Matrix4x4, Matrix4x4):

One of the greatest features of matrices is composition. You can multiply multiple transformation matrices together to bake complex operations (Scale, Rotate, Translate) into a single 4×4 matrix. Instead of running multiple operations per vertex on the CPU, the GPU performs exactly one matrix multiplication.

python

1def Multiply(A: list[list[float]], B: list[list[float]]) -> list[list[float]]:
2    """Multiplies two 4x4 matrices (Row i of A dot Column j of B)."""
3    return [
4        [sum(A[i][k] * B[k][j] for k in range(4)) for j in range(4)]
5        for i in range(4)
6    ]
7
8# Composition order goes RIGHT to LEFT: M = Multiply(T, Multiply(R, S))

Matrix multiplication is non-commutative (AB ≠ BA). The order of operations matters:

Order: TR vs RT

Translate X

2.50

Angle (Degrees)

45.00

Observe the Orbit!
• Rotate then Translate (0): Spins the box in place, then pushes it out. The box stays close.
• Translate then Rotate (1): Pushes the box out, then rotates around the origin, causing it to orbit along a large arc!

2 min read•1 page

Decompose(Matrix4x4):

The reverse of matrix multiplication. It extracts the raw Translation, Rotation, and Scale values from a baked 4x4 matrix. Essential for UI and animation.

python

1def Decompose(self) -> tuple['Vector3d', 'Quaternion', 'Vector3d']:
2    """Extracts Translation, Rotation, and Scale from a 4x4 matrix."""
3    
4    # 1. Translation is easily extracted from the 4th column
5    translation = Vector3d(self.m03, self.m13, self.m23)
6    
7    # 2. Scale is the magnitude of the 3 basis vectors (columns)
8    scaleX = Vector3d(self.m00, self.m10, self.m20).Length
9    scaleY = Vector3d(self.m01, self.m11, self.m21).Length
10    scaleZ = Vector3d(self.m02, self.m12, self.m22).Length
11    scale = Vector3d(scaleX, scaleY, scaleZ)
12    
13    # 3. Rotation is what's left after removing scale from the 3x3
14    # Usually returned as a Quaternion or Euler angles
15    rotation = ExtractRotation(self)
16    
17    return translation, rotation, scale

Translate X

2.00

Scale

1.50

Rotate Z

1.00

3 min read•1 page

Invert(Matrix4x4):

The inverse of a transformation matrix M⁻¹ reverses every operation of M such that M × M⁻¹ = I (the Identity Matrix). If the Model matrix transforms a vertex from Local Space → World Space, its inverse Model⁻¹ maps coordinates back from World Space → Local Space:

Local Space: Object's own origin (model-relative, recovered via Model⁻¹).
World Space: Scene-wide origin (v_world = Model × v_local).
View Space: Relative to camera lens (View = CameraWorld⁻¹).
Screen Space: Flattened 2D screen coordinates.

python

1def InvertRigid(M: list[list[float]]) -> list[list[float]]:
2    """Inverts a rigid 4x4 affine matrix (R^T and -R^T * T)."""
3    # Transpose the upper-left 3x3 orthonormal rotation block (R^T)
4    rt = [[M[j][i] for j in range(3)] for i in range(3)]
5    tx, ty, tz = M[0][3], M[1][3], M[2][3]
6
7    # Inverse translation is -R^T * T
8    itx = -(rt[0][0] * tx + rt[0][1] * ty + rt[0][2] * tz)
9    ity = -(rt[1][0] * tx + rt[1][1] * ty + rt[1][2] * tz)
10    itz = -(rt[2][0] * tx + rt[2][1] * ty + rt[2][2] * tz)
11
12    return [
13        [rt[0][0], rt[0][1], rt[0][2], itx],
14        [rt[1][0], rt[1][1], rt[1][2], ity],
15        [rt[2][0], rt[2][1], rt[2][2], itz],
16        [0.0,      0.0,      0.0,      1.0],
17    ]

Observe how the coordinates and coordinate framework reshape at each step of the rendering chain—and how inverting a matrix lets you walk backwards up the pipeline!

Local -> Screen

0.00

1 min read•1 page

Space Transformation (Instancing):

A matrix does not simply “move individual points.” Instead, a matrix transforms the coordinate system itself. When you apply a matrix to an object, you are warping, rotating, and scaling the entire fabric of space. The object's local coordinates remain unchanged — they only appear to deform because the space they sit in is mathematically reshaped.

python

1def BuildInstancedTransforms(grid_pts: list['Point3d'], space_matrix: list[list[float]]) -> list['Point3d']:
2    """Applies a single 4x4 space transformation matrix across an entire instanced grid."""
3    return [pt.Transform(space_matrix) for pt in grid_pts]

Reshaping space: Observe the grid of instanced spheres. As you adjust the sliders, the entire coordinate space stretches, tilts, or shrinks. The basis vectors stretch along with the fabric of space!

Shear Space (X by Y)

0.00

Scale Space

1.00

Rotate Space (Degrees)

0.00

Related Concepts

The Quaternion

The robust mathematical representation of 3D orientation.

Explore concept →

Geometry

3D geometry basic concepts

Explore concept →

Primitives

Explore concept →