WebGL Textures & Vertices

Beginner's Guide

Page Sixty Six

Assign WebGL Texture Properties

The following diagram demonstrates the flow of events after an image file downloads. The solid black circle represents the start of the diagram, with setImage(). The black circle with black outline represents the end of the diagram, with animOne(). Rectangles with medium blue backgrounds represent GLEntity methods. For readers with black and white display screens, GLEntity methods display in rectangles with medium gray backgrounds. Rectangles with white backgrounds represent GLControl methods.

The diagram begins with the GLEntity method setImage(ev). The method setImage() activates when an image file downloads. setImage() and subsequent method calls assign a number of WebGL texture properties. Method setImage(ev) calls GLEntity methods setWrapToEdges(gl) and setMinMagFilters(gl). Finally setImage(ev) calls the GLControl method setProgramVariables(controller). The diagram terminates initialization with a black outlined circle. The last method call named animOne(ev) displays just one frame, the last frame of the animation.

This section includes the following WebGL methods uniform1i(Number, Number), createTexture(), activeTexture(Number), bindTexture(Number, WebGLTexture), pixelStorei(Number,boolean), validateProgram(WebGLProgram), getProgramParameter(WebGLProgram,Number), getProgramInfoLog(WebGLProgram), deleteProgram(WebGLProgram), drawElements(), texImage2D(), and texParameteri(Number,Number,Number). Initialization includes four unique calls to WebGL API method texParameteri(Number,Number,Number).

After Images Download

Diagram 21: After Images Download

Method setImage(ev) activates after an Image's onload event listener triggers. However procedural textures may call setImage(ev) immediately.

The only parameter to setImage(ev) may represent either an event object or the controller. When an onload event triggers setImage(ev), then the parameter represents an event object. When a procedural texture method calls setImage(ev), then the parameter represents a reference to GLControl.

Procedural textures use an overloaded version of texImage2D(). See the section titled Procedural Textures for details.

This section focuses on preparing WebGL texture settings after an onload event. The event's currentTarget property is the Image element. We previously demonstrated creating properties controller and entity on the Image itself. The following listing demonstrates retrieving references to to the controller and entity. Property ev.currentTarget references the Image. Therefore ev.currentTarget.controller references GLControl and ev.currentTarget.entity references the GLEntity associated with the image.

if (ev.currentTarget != null){ 
 controller = ev.currentTarget.controller;
 entity = ev.currentTarget.entity;

Listing 68: Retrieve GLControl and GLEntity from Onload Event

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