WebGL Textures & Vertices

Beginner's Guide

Page Thirty One

WebGL 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 project 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. The methods with white backgrounds are defined within GLControl.js.

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 top to bottom and 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

Activity Diagram

Diagram 10: Initialization Activity Diagram

Controller Overview

The next few paragraphs provide an overview of the controller GLControl class. For readers new to WebGL the overview might seem confusing. Sections following Controller Details provide step by step instructions to each WebGL feature.

GLControl Constructor

The constructor for GLControl initializes everything needed for a WebGL program. Formal parameters in order include Float32Array aVert, Uint16Array aIdx, Array aE, and glDemo. The aVert parameter by default includes a Float32Array of interleaved vertices and texels. The aIdx parameter is a Uint16Array for use as an element array buffer. The aE parameter is an array of GLEntity. The glDemo parameter references the current project. glDemo is a class reference, implemented for one of the book's examples.

The constructor assigns the aE parameter to its aEntity property, saving the array of GLEntity. The constructor assigns the glDemo parameter to the glDemo property. Many methods need references to the current project.

GLControl Initialization

The constructor for GLControl calls the following methods in order getGLContext(), getProgram(), getBuffers(), getImages(), and last setListeners().

Method getGLContext() obtains and saves a WebGLContext reference, to the property gl. Method getProgram() prepares the program from a fragment and vertex shader. If the Web page doesn't declare a shader, then getProgram() uses the provided default shaders. The compiled and linked program is saved to controller property, program. Method getBuffers() prepares an element array buffer from the Uint16Array of indices passed to the GLControl constructor. Method getBuffers() prepares a vertex buffer object from the Float32Array of vertices and texels passed to the GLControl constructor. Method getImages() calls the GLEntity method getImageVariables(), for each GLEntity maintained in the array of references. The array property's named, aEntity. Method setListeners() assigns event listeners to buttons which play and stop the project's animation. Additionally setListeners() assigns a click event listener to the canvas, which renders one frame of the animation.

After all textures load, setProgramVariables() calls method animOne() to display one frame of the scene.

Don't feel overwhelmed with the preceding overview. Sections following Controller Details provide step by step instructions to each WebGL feature. Also see the GLControl source code.

WebGL Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.