WebGL Textures & Vertices

Beginner's Guide

Page Twenty Nine

Procedural Textures Properties

The GLEntity Details section, explains how to prepare textures from image files which download. Procedural textures require two modifications to the texture initialization process. First the WebGL method texImage2D() has two overloads. The simpler overload applies to image files. Image objects maintain width and height parameters. The texImage2D() overload which applies to procedural textures requires width and height parameters in the method call. Second the book's GLEntity class initializes textures after an image downloads, with the method setImage(ev). We can call setImage(ev) directly to prepare a texture from a Uint8Array.

Initialize Uint8Array

The following diagram provides an overview of the sequence of events to initialize a WebGLTexture from a Uint8Array of procedurally generated data.

First select a texture from the Web page's drop down menu. The selection calls a method to fill a Uint8Array with color data. Second call the GLEntity method setImage(ev). Pass a reference of the controller as the only parameter. Third GLEntity calls the overloaded version of the WebGL method texImage2D(). The rest of the method calls are covered in the sections titled Entity Details and Finalize then Display the Mesh.

Procedural Texture Diagram

Diagram 9: Procedural Texture Diagram

If nImagesToLoad == 0 then GLEntity calls the overloaded version of texImage2D(). With procedural textures, we don't need to load an image. Overloaded means the same method can receive a different number of parameters. In the section titled Load the Image File, we demonstrate calling texImage2D() with six parameters. However call texImage2D() with nine parameters to properly initialize procedural textures.

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