We have created the following components, each one in its own file inside the common/js directory:
- Program.js: Creates the program using the shader definitions. Provides the mapping between JavaScript variables (program.*) and program attributes and uniforms.
- Scene.js: Maintains a list of objects to be rendered. Contains the AJAX/JSON functionality to retrieve remote objects. It also allows us to add local objects to the scene.
- Floor.js: Defines a grid on the X-Z plane. This object is added to scene to have a reference to the floor and its properties
- Axis.js: Represents the axis in world space. When added to scene, we will have a reference to the origin.
- Camera.js: Creates a camera instance to manipulate the various matrices and operations covered in this chapter with a simple interface.
- EventEmitter.js: A simple pub-sub event emitter for decoupling various components in our WebGL application. Instead of passing hard references around between unrelated functionality, we can leverage the pub-sub pattern to emit and listen to actions.
- Clock.js: A simple class that abstracts away the requestAnimationFrame API to have the entire WebGL application update from a single source of truth (such as clock).
requestAnimationFrame
The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. This will request that your animation function be called before the browser performs the next repaint.
The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. This will request that your animation function be called before the browser performs the next repaint.
- Controls.js: Provides the ability to capture various canvas DOM events to drive interactions.
- utils.js: Utility functions that we covered in earlier chapters.
Although we have enough foundation to understand how each components works, we will cover each component in Chapter 9, Putting It All Together. That being said, if you can't wait, feel free to inspect the source code to get an idea of what's to come.