Game Development Reference
In-Depth Information
Using a function like
animLoop
that calls itself again is essential to animate more than one frame.
In our
initWebGL
function, we need to enable depth testing, as shown in Listing 7-17.
Listing 7-17.
Enable gl.DEPTH_TEST
function initWebGL() {
…
if (!gl) {
alert("Error trying to initialise WebGL");
} else {
gl.clearColor(
0.7, 0.7, 0.7
, 1.0);
gl.enable(gl.DEPTH_TEST);
}
}
}
If we do not check the depth of our rendered triangles, then, at times, faces of our solid that should be
hidden from view are not. This gives unexpected results, as shown in Figure 7-10.
Figure 7-10.
Not enabling the depth test can produce strange results
Creating movement
To move our octahedron around the screen, we need to alter its position. In this example, we use the
trigonometric functions cosine and sine to alter our coordinates around circular paths. We then multiplied
and/or added values to these computed magnitudes. You can play around with your coordinate generation
functions to produce distinct and cool effects.
If the paused flag has been set by the user hitting the 'p' key, then we do not recalculate the
(x, y, z)
coordinates or
rotationRadians
and do not increment our
rotationIncrement
or
translationAngle
variables.
