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 theProgram.object.load:Here we request objects from the web server by callingScene.loadObject. We can also add locally generated geometry (such as theFloor)by callingScene.addObject.render(ordraw):This is the function that is called every time when the rendering timer goes off. Here we will retrieve the objects from the Scene, one by one, and we will render them paying attention to their location (applying local transforms using the matrix stack), and their properties (passing the respective uniforms to the Program).
Program.js: Is composed of the functions that handle programs, shaders, and the mapping between JavaScript variables and ESSL uniforms.
Scene.js: Contains a list of objects to be rendered by WebGL.
SceneTransform.js: Contains the matrices discussed in the book: The Model-View matrix, the Camera matrix, the Perspective matrix, and the Normal matrix. It implements the matrix stack with the operations push and pop.
Floor.js: Auxiliary object that when rendered appears like a rectangular mesh providing the floor reference for the scene.
Axis.js: Auxiliary object that represents the center of the scene.
Lights.js: Simplifies the creation and managing of lights in the scene.
Camera.js: Contains a camera representation. We have developed two types of camera: orbiting and tracking.
CameraInteractor.js: Listens for mouse and keyboard events on the HTML5 canvas that it is being used. It interprets these events and then transforms them into camera actions.
Picker.js: Provides color-based object picking.
Let's see how we can put everything together to create a Virtual Car Showroom.