The following components are present in the architecture that has been built throughout this book:

• Axis.js: Auxiliary object that represents the center of the scene with visual helpers.
• Camera.js: Contains a camera representation from the two types of camera we have developed: orbiting and tracking.
• Clock.js: A requestAnimationFrame-based timer to synchronize our entire application from a single source of truth.
• Controls.js: Listens for mouse and keyboard events on the HTML5 canvas. It interprets these events and then transforms them into camera actions.
• EventEmitter.js: A simple class that provides a pub-sub approach for managing interactions between components in our application.
• Floor.js: Auxiliary object that appears like a rectangular mesh and provides the floor reference for the scene.
• Light.js: Simplifies the creation and managing of lights in the scene.
• Picker.js: Provides color-based object picking.
• Program.js: Composes the functions that handle programs, shaders, and the mapping between JavaScript values and ESSL uniforms.
• Scene.js: Contains a list of objects to be rendered by WebGL.
• Texture.js: A class for the creation and managing of WebGL textures.
• Transforms.js: Contains the matrices discussed in this book, that is, the Model-View matrix, the Camera matrix, the uProjectionMatrix, and the Normal matrix. It implements the matrix stack with the push and pop operations.
• utils.js: Contains auxiliary functions, such as getGLContext, which helps create a WebGL context for a given HTML5 canvas.
• Application hook functions, which are as follows:
  • init: This function initializes the application and is only called when the document has loaded via window.onload = init;.
  • configure: This function creates and configures dependencies, such as the program, cameras, lights, and so on.
  • load: This function requests objects from the web server by calling scene.load. We can also add locally generated geometry (such as the Floor) by calling scene.add.
  • draw: This function is called when the rendering timer goes off. Here, we retrieve objects from the scene and render them appropriately by ensuring their location (for example, applying local transforms using the matrix stack) and their properties (for example, passing the respective uniforms to the program).

Now, let's bring all of these concepts together and create a 3D virtual car showroom.