Architectural review

The following diagram presents the architecture that has been built throughout the book:

Globals.js: Defines the global variables gl (WebGL context), prg (ESSL program), and the canvas width (c_width) and height (c_height).

Utils.js: Contains auxiliary functions such as getGLContext which tries to create a WebGL context for a given HTML5 canvas.

WebGLApp.js: It provides three function hooks, namely: configureGLHook, loadSceneHook, and drawSceneHook that define the life cycle of a WebGL application.

As the previous diagram shows these hooks are mapped to JavaScript functions in our web page:

• configure: Here we create cameras, lights, and instantiate the Program.object.

• load: Here we request objects from the web server by calling Scene.loadObject. We can also add locally generated geometry (such as the Floor) by calling Scene.addObject.

• render (or draw): This is the function that is called every time when the rendering timer goes off. Here we will retrieve the objects...