A transformation moves geometry: translation shifts it, rotation spins it, scale resizes it. In the rendering pipeline, every vertex passes through a sequence of these transformations before it reaches the screen, and each one is stored as a matrix.

A matrix is a compact encoding of a linear transformation. The key observation is that a transformation is fully determined by what it does to the basis vectors, so the matrix only needs to record those images.

The Matrix Encodes the Basis

Let the standard basis vectors be $\mathbf{i} = [1, 0, 0], ; \mathbf{j} = [0, 1, 0], ; \mathbf{k} = [0, 0, 1]$. Multiplying each of these vectors by a matrix $\mathbf{M}$:

$$ \begin{aligned} \mathbf{iM} &= \begin{bmatrix}1 & 0 & 0\end{bmatrix} \begin{bmatrix} m_{11} & m_{12} & m_{13} \\ m_{21} & m_{22} & m_{23} \\ m_{31} & m_{32} & m_{33} \end{bmatrix} = \begin{bmatrix} m_{11} & m_{12} & m_{13} \end{bmatrix} \\ \mathbf{jM} &= \begin{bmatrix}0 & 1 & 0\end{bmatrix} \begin{bmatrix} m_{11} & m_{12} & m_{13} \\ m_{21} & m_{22} & m_{23} \\ m_{31} & m_{32} & m_{33} \end{bmatrix} = \begin{bmatrix} m_{21} & m_{22} & m_{23} \end{bmatrix} \\ \mathbf{kM} &= \begin{bmatrix}0 & 0 & 1\end{bmatrix} \begin{bmatrix} m_{11} & m_{12} & m_{13} \\ m_{21} & m_{22} & m_{23} \\ m_{31} & m_{32} & m_{33} \end{bmatrix} = \begin{bmatrix} m_{31} & m_{32} & m_{33} \end{bmatrix} \end{aligned} $$

The first row of $\mathbf{M}$ contains the transformed $\mathbf{i}$, the second row contains the transformed $\mathbf{j}$, and the third row contains the transformed $\mathbf{k}$. To build a matrix for a transformation, apply the transformation to each basis vector and write the results as the rows.

Transforming a Vector

Let $\mathbf{v}$ be a vector expressed in this coordinate space as a linear combination of basis vectors:

$$ \mathbf{v} = v_x \mathbf{i} + v_y \mathbf{j} + v_z \mathbf{k} $$

Multiplying $\mathbf{v}$ by matrix $\mathbf{M}$:

$$ \begin{aligned} \mathbf{v}^\prime = \mathbf{vM} &= (v_x \mathbf{i} + v_y \mathbf{j} + v_z \mathbf{k}) \mathbf{M} \\ &= v_x (\mathbf{iM}) + v_y (\mathbf{jM}) + v_z (\mathbf{kM}) \\ &= v_x \begin{bmatrix} m_{11} & m_{12} & m_{13} \end{bmatrix} + v_y \begin{bmatrix} m_{21} & m_{22} & m_{23} \end{bmatrix} + v_z \begin{bmatrix} m_{31} & m_{32} & m_{33} \end{bmatrix} \end{aligned} $$

If rows of $\mathbf{M}$ are denoted by basis vectors $\mathbf{p}, \mathbf{q}, \mathbf{r}$:

$$ \mathbf{M} = \begin{bmatrix} -\mathbf{p}- \\ -\mathbf{q}- \\ -\mathbf{r}- \end{bmatrix} $$

Then the matrix product expresses the transformed vector directly:

$$ \mathbf{v}^\prime = \mathbf{vM} = v_x \mathbf{p} + v_y \mathbf{q} + v_z \mathbf{r} $$

The product $\mathbf{vM}$ is a linear combination of the rows of $\mathbf{M}$. Because the rows are the transformed basis vectors, multiplying by $\mathbf{M}$ replaces each basis vector with its image and rebuilds $\mathbf{v}$ from those images. That is the entire mechanism of a transformation matrix in one sentence.

When the row vectors are the basis vectors of a coordinate system measured in an outer coordinate system, $\mathbf{M}$ encodes a coordinate space transformation:

$$ \mathbf{v}^\prime = \mathbf{vM} = \begin{bmatrix}v_x & v_y & v_z\end{bmatrix} \begin{bmatrix} -\mathbf{p}- \\ -\mathbf{q}- \\ -\mathbf{r}- \end{bmatrix} = v_x \mathbf{p} + v_y \mathbf{q} + v_z \mathbf{r} $$

To denote a matrix transforming frame $a$ to frame $b$ represented in frame $c$:

$$ ^c \mathbf{M}_{a \to b} $$

When frame $c$ equals frame $b$, the leading superscript is omitted:

$$ \mathbf{M}_{a \to b} $$

For example, the matrix transforming from object space to upright space is:

$$ \mathbf{M}_{\text{object} \to \text{upright}} $$

Transforming vector $\mathbf{v}_{\text{object}}$ into upright space:

$$ \mathbf{v}_{\text{upright}} = \mathbf{v}_{\text{object}} \mathbf{M}_{\text{object} \to \text{upright}} $$

Row Versus Column Vectors

In row-vector conventions, transformations post-multiply vectors:

$$ \mathbf{v}^\prime = \mathbf{vM} $$

Where $\mathbf{M}$ encodes basis vectors in its rows.

Applying transformations $\mathbf{A}$, $\mathbf{B}$, and $\mathbf{C}$ in order:

$$ \mathbf{v}^\prime = \mathbf{vABC} $$

In modern computer graphics and OpenGL/DirectX shaders, column vectors are the standard convention, and Three.js follows it. Applying the matrix transpose:

$$ \begin{aligned} \mathbf{v}^\prime &= \mathbf{vABC} \\ (\mathbf{v}^\prime)^T &= (\mathbf{vABC})^T \\ \mathbf{v}^\prime_{\text{col}} &= \mathbf{C}^T \mathbf{B}^T \mathbf{A}^T \mathbf{v}_{\text{col}} \end{aligned} $$

Column-vector matrices $\mathbf{A}^T, \mathbf{B}^T, \mathbf{C}^T$ store transformed basis vectors in their columns:

$$ \mathbf{M} = \begin{bmatrix} \mathbf{p} & \mathbf{q} & \mathbf{r} \end{bmatrix} \quad \text{where } \mathbf{p} = \begin{bmatrix} p_x \\ p_y \\ p_z \end{bmatrix}, ; \mathbf{q} = \begin{bmatrix} q_x \\ q_y \\ q_z \end{bmatrix}, ; \mathbf{r} = \begin{bmatrix} r_x \\ r_y \\ r_z \end{bmatrix} $$

In column notation, the subscript arrow points from right to left, matching matrix multiplication order:

$$ \mathbf{v}_{\text{upright}} = \mathbf{M}_{\text{upright} \leftarrow \text{object}} \mathbf{v}_{\text{object}} $$

Composition: Why Matrices Win

Multiplying two matrices produces a third matrix that applies both transformations in sequence. A chain of transformations therefore collapses into a single matrix, and one matrix multiply per vertex replaces a long sequence of steps. This is why the pipeline stores every stage as a matrix, and why a scene graph keeps a single model matrix per object instead of a list of operations.

Order matters: applying a rotation then a translation is not the same as applying the translation first. Combining Matrix Transformations works through the order rules and the resulting composed matrices.

What Comes Next

The rest of this stage builds each transformation matrix from the basis-vector recipe above:

3d_rotation Computer Graphics Rendering Pipeline Series
Interactive Pipeline Guide
In modern real-time rendering, 3D vertices flow through five sequential coordinate spaces from local geometry to 2D pixels: