We need to derive a projection matrix, as alluded to in the previous post. The orthographic is the simplest to start with, but we’ll move on to a perspective projection in a subsequent post. I want to use a perspective projection for the WebGPU game series, to make the environment a little bit more interesting.

What is an orthographic projection?

An orthographic projection is one in which objects in the distance do not appear smaller than objects that are nearby. This is not true to how we experience the natural world around us1. However, it is common for stylistic applications or for computer-aided design (CAD) software. The following is a representation of an orthographic projection compared to a perspective projection.

In both cases, the volume is transformed into a cube volume with specific dimensions – the canonical view volume. As you can imagine, this doesn’t really distort the orthographic projection, but it heavily influences the perspective projection.

Desired outcome

We want to map the cube into the following ranges, assuming a left-handed coordinate system.

x∈[−1,1]y∈[−1,1]z∈[0,1]x \in [-1, 1] \\ y \in [-1, 1] \\ z \in [0, 1]

However, assume we have some orthographic camera that is not centered on the axis and scaled to suit these requirements such as the following:

Derivation

We want to shift the cube to the center and scale it to fit within the ranges specified above.

Steps

We want to perform the following steps (in order):

  1. Translate the center, cc, of the near plane to the origin:
    c=(r+l2,t+b2,n)c = \left(\frac{r+l}{2},\frac{t+b}{2},n\right)

  2. Scale the volume to the size of the canonical view volume, sCs_C:
    sC=(2,2,1)s_C = (2,2,1)

Therefore, we can calculate the orthographic projection matrix, OO, as:

O=ST=[2sx00002sy00001sz00001][100−r+l2010−t+b2001−n0001]=[2r−l00002t−b00001f−n00001][100−r+l2010−t+b2001−n0001]∴O=[2r−l00−r+lr−l02t−b0−t+bt−b001f−n−nf−n0001]\begin{aligned} O = ST &= \begin{bmatrix} \frac{2}{s_x} & 0 & 0 & 0 \\ 0 & \frac{2}{s_y} & 0 & 0 \\ 0 & 0 & \frac{1}{s_z} & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} 1 & 0 & 0 & -\frac{r+l}{2} \\ 0 & 1 & 0 & -\frac{t+b}{2} \\ 0 & 0 & 1 & -n \\ 0 & 0 & 0 & 1 \end{bmatrix} \\ &= \begin{bmatrix} \frac{2}{r-l} & 0 & 0 & 0 \\ 0 & \frac{2}{t-b} & 0 & 0 \\ 0 & 0 & \frac{1}{f-n} & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} 1 & 0 & 0 & -\frac{r+l}{2} \\ 0 & 1 & 0 & -\frac{t+b}{2} \\ 0 & 0 & 1 & -n \\ 0 & 0 & 0 & 1 \end{bmatrix} \\ \therefore O &= \begin{bmatrix} \frac{2}{r-l} & 0 & 0 & -\frac{r+l}{r-l} \\ 0 & \frac{2}{t-b} & 0 & -\frac{t+b}{t-b} \\ 0 & 0 & \frac{1}{f-n} & -\frac{n}{f-n} \\ 0 & 0 & 0 & 1 \end{bmatrix} \end{aligned}

There are some additional reductions that can be made, but that’s essentially the orthographic projection matrix. For example, if using this as your projection matrix, you may simply want to store the near, far, screen width and screen height values. Then, you simply create this matrix from the specified values when doing the full MVP transformation.

Footnotes

  1. Otherwise cosmic background radiation would have been really obvious (given we could also perceive microwave radiation). ↩