Projection Into the Matrix

We finish off our tutorials covering different matrix operations with the final matrix in the transformation chain featured in the picture below, which will result in either an orthographic or a perspective view on the scene.

Orthographic and perspective projections

The last usage of matrices we will cover in this tutorial series is translating the modelview space into clip space. This will result in either an orthographic view of the scene or a perspective view. The main difference between these projections is their relation to reality. While the perspective projection offers a more realistic view of a scene (size of objects vary in relation to the observer’s distance from them), the orthographic one acts like objects are stuck to the screen, like everything is in 2D.

To understand why they act this way, we have to look at where the camera is situated in both cases. In the case of perspective projection, the camera sits in a fixed point in space, looking in a certain direction and seeing only part of the scene, or in other words the clip space. The viewing volume in this case is defined as a truncated pyramid shaped by 6 values: near, far, top, bottom, left and right culling distances or, more simply, by the near and far ones combined with the field of view’s angle (in the case of a normal camera, how much is the shutter open).

In the case of the orthographic projection, the camera is situated towards infinity on the +Z axis, thus all projections becoming parallel with each other. Thus, all objects within the clip plane become completely visible and will all have the exact relative dimensions specified.

This perspective is used mostly to depict 2D objects (maps, interfaces) or in combination with the perspective one to draw a HUD or GUI over the presented scene.

The matrices used in these transformations are the following:

perspective matrix 1

for perspective projection. It is also called a frustum matrix. However, this is only one example of a frustum matrix, based on the 6 value definition. We have another one, based on the field of view angle and the near and far clip planes:

perspective matrix 2

where ar is the ratio between the width and height of the screen and α (alpha) is the FOV angle. FOV is the field of view.

Matrix4x4 GetPerspective(float width, float height, float near, float far, float angle)
    Matrix4x4 m;//all values are 0
    float ar = width / height;
    m[0][0] = 1f / (ar * tan(angle / 2));
    m[1][1] = 1f / tan(angle / 2);
    m[2][2] = (-near -far) / (near - far);
    m[2][3] = 1f;
    m[3][2] = 2f * near * far /(near - far);

    return m;


Moving on to the orthographic perspective, the matrix is:

orthographic matrix 1The second example, with FOV angle:

orthographic matrix 2

Matrix4x4 GetOrthographic(float width, float height, float near, float far)
    Matrix4x4 m;//all values are 0
    m[0][0] = 2f / width;
    m[1][1] = 2f / height;
    m[2][2] = 1f / (far - near);
    m[3][2] = -near / (far-near);
    m[3][3] = 1f;

    return m;

These formulas are reached through a noticeable amount of calculations, which will not be presented here, because we’re all about the graphics. Plus it’s going to take too long. It should be said that the most used are the ones which take into consideration the window size, because they preserve the correct aspect ratio. If you are curious about how you arrive at these matrices, you can find the demonstrations here and here.

And with that, this math-intensive section of our tutorial series comes to an end. I hope you have enjoyed our explanations of these concepts and found them easy to understand. Now step into the matrix and make some graphics magic happen.



I'm an engineer, currently employed at a financial software company. My interests include gaming, LPing and, of course, reviewing, but also game dev and graphics. Also, in the past I've dabbled in amateur photography, reviewing movies and writing short stories and blog posts. I am also a huge Song of Ice and Fire fan, but that's beside the point. Youtube Channel, Deviantart , Google + , Twitter

blog comments powered by Disqus