WebGL Textures & Vertices

Beginner's Guide

Page Sixty Two

Prepare Textures from Images

The method getImages() called by the GLControl constructor begins the process of preparing images as textures for display with WebGL. GLControl contains three properties which track images as they download. Property aEntities maintains an array of GLEntity instances. Property nImagesToLoad keeps count of the number of images required to download. Property nImagesLoaded tracks how many images have downloaded.

First getImages() initializes both nImagesToLoad and nImagesLoaded to 0. Second getImages() iterates over every GLEntity in the array named aEntities. For each GLEntity in the array, execute the GLEntity method getImageVariables(GLControl).

The only parameter to getImageVariables(GLControl), is a reference to the controller. getImageVariables(GLControl) returns either 1 or 0. If the current entity needs to download an image file, then getImageVariables(GLControl) returns 1. Otherwise getImageVariables(GLControl) returns 0. The controller calls getImageVariables(GLControl) in a loop incrementing property nImagesToLoad, for each iteration. We use nImagesToLoad to verify every image has downloaded before attempting to render a frame. The following listing demonstrates calling getImageVariables(GLControl) from the controller.

for (var i = 0; i < aEntities.length; i++){
 // GLEntity at 'i'.
 var entity = aEntities[i];
 
 // Increment property nImagesToLoad:
 this.nImagesToLoad += entity.getImageVariables
 (
 this
 );        
}

Listing 61: Call getImageVariables(GLControl)

GLEntity Method getImageVariables(GLControl controller)

Method getImageVariables(GLControl) prepares shader variables to process one texture for a GLEntity.

If an associated uniform sampler2D exists in the shader, then the entity maintains the uniform's location. If an associated attribute exists in the shader, then the entity maintains the attribute's location. Entities use the idx property to access shader variables. For entities with an image source path, getImageVariables(GLControl) prepares to download the image.

For example the book's default fragment shader includes a uniform sampler2D named u_sampler0. The entity with idx value of 0 saves u_sampler0 to it's uSampler property. However the default fragment shader doesn't include a u_sampler1. Therefore an entity with idx value of 1 simply doesn't have an associated sampler2D. This flexible structure allows other books in the series to utilize additional samplers and attributes. The following listing demonstrates saving the location of a sampler2D to property uSampler.

this.uSampler = gl.getUniformLocation
(
 program, 
 "u_sampler"+this.idx
);

Listing 62: Save Uniform sampler2D Location

The book's default vertex shader includes an attribute named a_tex_coord0. The attribute processes texels. The entity with idx value of 0 saves a_tex_coord0 to it's aTexCoord property. However the default fragment shader doesn't include an a_tex_coord1. Therefore an entity with idx value of 1 simply doesn't have an associated attribute. This flexible structure allows other books in the series to utilize additional attributes. The following listing demonstrates saving the location of an attribute to property aTexCoord.

this.aTexCoord = gl.getAttribLocation
(
 program, 
 "a_tex_coord"+this.idx
);

Listing 63: Save Attribute Location

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