Adding Features to Your Game - Learn HTML5 by Creating Fun Games - page 275

angle to the point (0, 0, -0.5, -3.0), which is a point somewhere close to the origin of
the world coordinate system.
Finally, we bind our matrices to the graphics card, where we later render our scene
by calling the draw functions defined in the WebGLRenderingContext object. If
you look closely at the end of the drawScene function, we send some values
to the shader object. Looking at the two shader programs we wrote earlier (us-
ing GLSL), we specified three variables that are used as input into the programs.
The observant student will ask where those variables came from (the variables
are defined in the vertex shader and are named aVertPos , uMVMat , and uPMat ,
which are special data types defined in the GLSL language). They come from our
JavaScript code and are passed to the shader program in the GPU through calls to
gl.vertexAttribPointer and gl.uniformMatrix4fv .
About 150 lines of code later, we have a yellow triangle rendered against a green
background that looks like the following screenshot. Again, I remind you that WebGL
is by no means a trivial programming interface and is not the tool of choice for simple
drawing that could be done with easier tools, such as the 2DRenderingContext of the
canvas element, SVG, and possibly just a simple piece of photo editing software.
Although WebGL takes a lot of boilerplate code to render a very simple shape, as
shown in the following screenshot, rendering and animating complex scenes is not
much more complicated than that. The same basic steps required to setup a ren-
dering context, create a shader program, and load buffers, are used in creating ex-
tremely complicated scenes.