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.
Let's move the camera to [0 ,0, 4] in world coordinates. This means 4 units from the origin on the positive z-axis.
Remember that we do not know at this point of a matrix to move the camera, we only know how to move the world (with the Model-View matrix). If we applied:
mat4.translate(mvMatrix, [0,0,4]);
In such a case, the world would be translated 4 units on the positive z-axis and as the camera position has not been changed (as we do not know a matrix to do this), it would be located at [0,0,-4], which is exactly the opposite of what we wanted in the first place!
Now, say that we applied the translation in the opposite direction:
mat4.translate(mvMatrix, [0,0,-4]);
In such a case, the world would be moved 4 units on the negative z-axis and then the camera would be located at [0,0,4] in the new world coordinate system.
We can see here that translating the camera is equivalent to translating the world in the opposite direction.
In the following section, we are going to explore translations both in world space and in camera space.