WebGL Textures & Vertices

Beginner's Guide

Page Twenty Three

Procedural Texture-Red Square

Red Square

This section describes how to create a red texture with method generateSquareR(). The GLTexProcedure class defines method generateSquareR() to create data for a solid red texture. First generateSquareR() instantiates a Uint8Array.

Every texture generation method in this book follows the same pattern. The first line initializes a Uint8Array named u8a. The following line demonstrates creating a Uint8Array of the desired length.

var u8a = new Uint8Array(this.nBuffer);.

The body of each texture generation method fills u8a with color data within a for loop. Every three entries within u8a represent one pixel with three color channels. One channel for red. One channel for green, and one for blue, in that order. The following line demonstrates iterating over every three entries in the array.

for (var i = 0; i < this.nBuffer; i = i+3).

Assume c represents a value between 0 and 255. Fill the red color channel with u8a[i] = c. Fill the green color channel with u8a[i + 1] = c. Fill the blue color channel with u8a[i + 2] = c. If the value of c never changes, then the final texture will represent a value between white and black, with no hue, or completely desaturated hue. Learn to create a few interesting brightly colored textures in the next few sections.

The last line of every texture generation method, returns the Uint8Array with the following line return u8a;.

To generate a solid red texture, assign the maximum value to the first channel, which represents red. The red channel receives the value 255. The second and third channels represent green and blue. Green and blue channels receive the minimum value 0. The following listing demonstrates creating a solid red texture.

for (i = 0; i < this.nBuffer; i+=3){  
 u8a[i] = 255; // Red  
 u8a[i + 1] = 0; // Green
 u8a[i + 2] = 0; // Blue   

Listing 20: Generate Solid Red Procedural Data

See the entire generateSquareR() method.

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