Game Development Reference
In-Depth Information
(function main() {
// ...
// Clear the WebGL canvas context to some
background color
gl.clearColor(0.2, 0.8, 0.2, 1.0);
gl.enable(gl.DEPTH_TEST);
// WebGL: Please draw this triangle on the gl
object,
using this shader...
drawScene(gl, triangleVertBuf, shader);
})();
A couple of things about the preceding code are noteworthy. First, you will notice that
this is a single frame that's only drawn once. Had we decided to animate our scene
(which we most definitely would in a real game), we would need to run the
drawS-
cene
function inside a request animation frame loop. This loop would involve all of
the steps shown, including all of the matrix math that generates our MVP matrix for
each and every model that we would render on the scene. Yes, that is a lot of com-
putations to perform multiple times per second, especially on more complex scenes.
Second, observe the usage of our model-view-projection matrices. We first create
them as 4 x 4 matrices, then instantiate each of them. The projection matrix's job is to
do just that—project the 3D points onto a 2D space (the canvas rendering context),
stretching the points as needed in order to maintain the specified aspect ratio of the
canvas. In WebGL, the coordinate system of the rendering context goes from zero
to one on both axis (the vertical and horizontal axis). The projection matrix makes it
possible to map points beyond that limited range.
The model and view matrices allow us to model points relative to the object's center
(its own coordinate system) onto the world's coordinate system. For example, say
we're modeling a robot. Suppose the robot's head is centered at point (0, 0, 0). From
that point, the robot's arms would be, say, at points (-5, 1, 0) and (5, 1, 0) respect-
ively, both relative to the robot's head. But where exactly is the robot placed with
respect to the world? And what if we had another robot in this scene, how are they
positioned relative to each other? Through the model and view matrices, we can put
them both on the same global coordinate system. In our example, we moved the tri-
