WebGL Textures & Vertices

Beginner's Guide

Page Sixty One

WebGL Entity Details

The GLEntity class prepares a texture and matrix for use with WebGL. The section titled Default Matrix for Each Entity discusses the GLEntity matrix property. This section details texture initialization. A set of GLEntity may share one texture, or each entity may retain a unique texture. A set of GLEntity may share shader variables, or each entity can use a unique set of shader variables. The GLEntity property named, uSampler maintains the location of a uniform sampler2D. The aTexCoord property saves the location of an attribute for processing texture coordinates.

This section discusses GLEntity methods getImageVariables(), setImage(), setActiveTexture(), setMinMagFilters(), and last setWrapToEdges(). Method getImageVariables() saves the location of shader variables associated with the entity's texture. Method setImage() activates and creates a WebGLTexture for the entity. Method setMinMagFilters() assigns minification and magnification filters for the active texture. Method setWrapToEdges() assigns wrapping types for the active texture.

WebGL API methods discussed include getUniformLocation(), getAttribLocation(), vertexAttribPointer(), enableVertexAttribArray(), uniformi(), createTexture(), texParameteri(), activeTexture(), bindTexture(), pixelStorei(), and texImage2D().

Prepare Textures

The following activity diagram demonstrates steps to initialize textures. 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. Initialization begins with the solid black circle which represents a class prepared for one of the book's projects. The diagram terminates initialization with a black outlined circle. The dotted line indicates an asynchronous event handler to download images. Asynchronous processes operate during the same time sequence as other processes. Asynchronous processes have unpredictable activation times. In other words developers don't know when an asynchronous process will start or terminate.

The rectangle with a green background represents method init(). Individual projects define init(). Method init() provides initialization unique to individual projects. If the project defines init(), then the controller calls init() before rendering the scene. Method init() completes last minute initialiazation before the first rendering.

For readers with black and white display screens, the init() method displays with the darkest gray background. The Display Repeating Graphic project includes an init() method. Other projects in the series also employ different initialization techniques. However Display Repeating Graphic is the only project in this first book, which defines init().

In this example, setImage(ev) activates after an image downloads. No one knows how how much time it takes to download an image. The examples run on a range of devices with various Web connection data speeds. While waiting for downloads, the GLControl constructor prepares animation features. See the section titled Animation and Rotation for details. This section focuses on preparing textures from image data.

The texture preparation diagram follows the same path as the comprehensive Controller Activity Diagram. However the texture preparation diagram includes a few more details. GLEntity methods setWrapToEdges(gl) and setMinMagFilters(gl) assign WebGL values to the currently active texture. The method getImages() called by the GLControl constructor begins the process of preparing images as textures for display with WebGL.

Diagram Prepare Textures

Diagram 19: Prepare Textures

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