The Camera matrix

Let's say, for a moment, that we do have a camera in WebGL. A camera should be able to rotate and translate to explore this 3D world. For example, think of a first person shooter game where you have to walk through levels killing zombies. As we saw in the previous section, a 4x4 matrix can encode rotations and translations. Therefore, our hypothetical camera could also be represented by one such matrix.

Assume that our camera is located at the origin of the world and that it is oriented in a way that it is looking towards the negative z-axis direction. This is a good starting point—we already know what transformation represents such a configuration in WebGL (identity matrix of rank 4).

For the sake of analysis, let's break the problem down into two sub-problems: camera translation and camera rotation. We will have a practical demo on each one.

Camera translation

Let's move the camera to [0, 0, 4] in world coordinates. This means 4 units from the origin on the positive z-axis...