Camera and User Interaction - WebGL Game Development - page 162

The following algorithm explains how the lookAt function computes the view matrix:
Vector3 zaxis = normal( lookAtPosition - this.pos); // The
"look-at" vector.
Vector3 xaxis = normal(cross(this.up, zaxis)); // The
"right" vector.
Vector3 yaxis = cross(zaxis, xaxis); // The "up" vector.
// Create a 4 x 4 orientation matrix from the right, up, and at
vectors
Matrix4 orientation = {
xaxis.x, yaxis.x, zaxis.x, 0,
xaxis.y, yaxis.y, zaxis.y, 0,
xaxis.z, yaxis.z, zaxis.z, 0,
0, 0, 0, 1
};
// Create a 4 x 4 translation matrix by negating the eye
position.
Matrix4 translation = {
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
-pos.x, -pos.y, -pos.z, 1
};
// Combine the orientation and translation to compute the view
matrix
return ( translation * orientation );
The function first calculates our three vectors (look, up, and right). If you look at
the figure above the direction, the look vector represents the z axis of the camera
and the up vector represents the y axis. First, we calculate the z axis (the look or
direction vector) by subtracting the position of the camera from lookAtPosition .
As we mentioned earlier, each vector is orthogonal, so if we have two vectors, we can
calculate the third. In order to calculate the x axis, we find the cross product of the
look and the up vectors ( yaxis = cross(zaxis, xaxis) ). Now we readjust our y
axis with respect to our computed z and x axes.
The function then creates the orientation matrix and translation matrix using the
position and orthogonal vectors. Then, we calculate the view matrix by multiplying
the translation with the orientation matrix.
The preceding algorithm is already implemented in the
lookAt function in glMatrix . We have presented this
algorithm to explain the logic to calculate the vectors
(direction, up, and right) from lookAtPosition , the camera
position, and the up vector. This logic will be instrumental in
understanding the implementation of orbit cameras.