WebGL Textures & Vertices: Beginner's Guide (2015)
Initialization
The following sections cover details of WebGL initialization for the book's projects. The projects share functionality implemented within supporting files GLControl.js and GLEntity.js. The files prepare WebGL properties. Every book in the Online 3D Media with WebGL series, follows the same sequence.
The JavaScript file GLControl.js declares the GLControl prototype class controller. GLControl prepares the WebGL context, program, shaders, and buffers. GLControl maintains an array of GLEntity. The controller calls initialization methods for each GLEntity in the array. The GLEntity prototype class initializes textures. Projects may initialize multiple textures for a set of GLEntity, or multiple GLEntity with one texture.
The following chart demonstrates the sequence of events GLControl follows to prepare WebGL properties. The solid black circle at the top of the diagram indicates the start of initialization. Each example creates a reference to GLControl(). Parameters passed to the GLControl constructor include a Uint16Array of indices, a Float32Array of vertices with texels, and an array of GLEntity. Each project defines it's own unique class. Pass a reference to the project's class with the this keyword, as the last parameter.
Functions declared within the JavaScript file GLEntity.js appear in rectangular boxes with light blue backgrounds. For those with black and white displays, GLEntity methods display with light gray backgrounds.GLControl.js defines the remainder of methods in the diagram, with white backgrounds.
The solid black circle with a black outline indicates the end of the initialization process. Method animOne() activates last to render one frame of the project's scene.
The next few sections of the book discuss each method in the diagram as illustrated from right to left. Topics cover details such as 4 x 4 matrices, line by line instructions regarding shaders, and how to use WebGL methods.
See the GLControl and GLEntity source code.
Initialization Activity Diagram
Diagram 10: Activity Diagram