Camera and User Interaction - WebGL Game Development - page 158

// Rotate the matrix by objects rotation X and replace the matrix
with the result(mat4.rotateX(out,in,vec3))
mat4.rotateX(mvMatrix, mvMatrix,
stage.stageObjects[i].rotationX);
mat4.rotateY(mvMatrix, mvMatrix,
stage.stageObjects[i].rotationY);
mat4.rotateZ(mvMatrix, mvMatrix,
stage.stageObjects[i].rotationZ);

In the preceding code, we created a ModelView matrix, mvMatrix , which stores the
translation and rotation of the object. We passed this matrix to our fragment shader
using our own function, setMatrixUniforms . When we invoked drawElements , each
vertex of the object was transformed in the vertex shader because of the multiplication
of each vertex location with the mvMatrix , as shown in the following code:

vec4 vertexPos4 = mvMatrix * vec4(aVertexPosition, 1.0);

So why is this matrix called a ModelView matrix when it stores only the model
transformations? Well, this is because until now, we have not considered the view
matrix. We have only been viewing our objects from one angle and location. The
view matrix and object matrix are combined to render our scene ( v'=Mv ). Let's define
these two transformations.

Applying the model transformation
We use the modeling transformation to position and orient the model. For example,
we can translate, rotate, or scale the model or perform a combination of these
operations. These three operations are depicted in the following figure:

y y y

x x

x

z z z

y

Translate Rotate Scale

Model transformations