Camera and User Interaction - WebGL Game Development - page 177

Here, on the left-hand side, is the view from the city line, parallel to the road, and to
the right-hand side is the top view.
Now, let's add a camera to our scene. Open 05-Loading-Scene-With-Camera.html
in your favorite text editor. There is no change in our shader code.
Implementing the control code
The first change is in our start function. We have initialized our camera object in the
function before adding objects to the scene. We set the position and the "look at point"
position of the camera. You will have to change the values in accordance to the scene
you plan to develop for your game, as shown in the following code snippet:
cam=new FreeCamera();
cam.setPosition(new Array(0.0, 25.0, 150.0));
cam.setLookAtPoint(vec3.fromValues(0.0, 0.0, 1.0));
Before we understand the other changes, let's first understand the order of
multiplication of the perspective, model, and view transformations. First the
view matrix is multiplied with the model transformation matrix, Mv = V*M .
Then, the projection matrix is multiplied with the Mv matrix, MvP = P*V*M .
The vertices are transformed in the vertex shader:
vec4 vertexPos4 = mVMatrix * vec4(aVertexPosition, 1.0);
gl_Position= pMatrix *vertexPos4;
Hence, the complete transformation of vertices happens in the order MVP*
vertex = P*V*M*Vertex .
We initialize our mvMatrix as an identity matrix in the initScene function, as follows:
mat4.identity(mvMatrix);
In the calculateMvMatrix function that we added, we invoke the camera's apply
function to calculate and set our view and projection matrices. We pass the aspect
ratio of our scene ( gl.width / gl.height ) to the apply function. Then, we multiply
our cam.viewMatrix with our mvMatrix (identity matrix). As multiplying by an
identity matrix has no effect, our mvMatrix now holds the view matrix:
function calculateMvMatrix(){
cam.apply(gl.viewportWidth / gl.viewportHeight);
mat4.multiply(mvMatrix, mvMatrix, cam.viewMatrix);
}