Isometric projection is one of the ways to map a 3D point on a 2D plane. It is a linear transformation, which means it can be represented by a 2-by-3 matrix. A common way to explain the projection and derive the matrix is via using a composition of rotations - a 3D vector is linearly transformed by two rotations. Finally its z-coordinate is ignored, giving a 2D vector corresponding to the 3D vector.

However there is another way to arrive at the projection matrix. This way is arguably simpler and completely circumvents the rotation matrices. Let's take a look at both the approaches and build the isometric projection matrix from the ground up.

Below is the function that maps a 3D vector to a 2D vector. The rest of this article discusses two approaches to derive this function.

def get_isometric_projection(x:int, y:int, z:int):
    SQRT_2, SQRT_3, SQRT_6 = 2**0.5, 3**0.5, 6**0.5
    x_out = (x-y) / SQRT_2
    y_out = (x+y-2*z) / SQRT_6
    return x_out, y_out

For the purpose of illustration, we will map a cube whose eight vertices are located at the points \( \begin{bmatrix} ±1 \\ ±1 \\ ±1 \end{bmatrix} \). Note that each side of this cube has length 2. To distinguish between different sides, the top edges of this cube are drawn in red, the bottom edges in black and vertical edges in teal.

Probably the simplest way to map a 3D vector to a 2D plane is to simply ignore its z-coordinate: \( \begin{bmatrix} x \\ y \\ z \end{bmatrix} \) → \( \begin{bmatrix} x \\ y \end{bmatrix} \). This projection is shown in the visual below. We only see the top edges located at \( \begin{bmatrix} ±1 \\ ±1 \end{bmatrix} \).

To make all edges visible, we rotate the 3D vectors such that the vector \( \begin{bmatrix} 1 \\ 1 \\ 1 \end{bmatrix} \) becomes perpendicular to the XY-plane. This can be done in two rotations:

You can combine the two rotations by multiplying the two rotation matrices. Using ⍺ = π/4, θ = arctan(√2) and plugging in the values in the matrices we get:

Finally, ignoring the z-coordinate gives us the matrix for isometric 3D to 2D projection: \( \begin{bmatrix} 1/√2 & -1/√2 & 0 \\ 1/√6 & 1/√6 & -√2/√3 \end{bmatrix} \).

There is another approach to arrive at this matrix directly without thinking in terms of rotations. It uses the same line of reasoning that we used to derive the rotation matrix . Let's assume the 2-by-3 matrix we want is \( \begin{bmatrix} p_1 & q_1 & r_1 \\ p_2 & q_2 & r_2 \end{bmatrix} \). All we need to do is to find out where on the XY-plane the three 3D basis vectors are mapped:

But in the visual above, we can see where these basis vectors are mapped:

Here \( \text{r} \) is the ratio by which each vector is scaled. We do not know its value at this point but will calculate it shortly. But knowing these values almost gives us the entire matrix:

\( \text{r} \)\( \begin{bmatrix} √3/2 & -√3/2 & 0 \\ 1/2 & 1/2 & -1 \end{bmatrix} \)

All we need to do is find the value of \( \text{r} \). We can find it out by comparing the edge length of the cube after the first rotation (which does not change the lengths) and the second rotation (which changes the length of each side). From the visual below, it is easy to see that \( \text{r = √2/√3} \):

Setting this value in the above matrix gives us the isometric projection matrix as:

This is the same matrix that we arrive at using the approach of two rotations above.