WebGL Textures & Vertices

Beginner's Guide

Page Twenty Four

Procedural Texture-Blue Green Gradient

Gradation

This section describes how to create gradient texture data with method generateGradientBG(). The GLTexProcedure class defines method generateGradientBG(), to create data for a linear gradation from left to right. The left side displays primarily blue. The right side displays primarily green.

The first line in every texture generation method instantiates a Uint8Array named u8a. The body of every texture generation method fills the array with color data inside a for loop. The last line in every texture generation method returns u8a.

Each row in a 32 x 32 pixel texture includes 96 color channels, because each pixel includes 3 color channels. 32 * 3 = 96. We use the variable j to represent the particular pixel we're coloring per row. In other words j represents a column. Every column is the same color in a left to right linear gradient. The following line assigns a column number from 0 to 95 to j.

j = i % 96;.

The blue channel starts at 255 and ends at 160. Assign the blue channel a value with the following line.

u8a[i + 2] = 255-j; .

We want the green channel to follow an opposite pattern from the blue channel. In other words we want less green for the columns on the left and more green for the columns on the right. Use the variable k for the green channel. The following line reverses the values for k which start at 160 and end at 255.

k = 95 - j;

Iterate over every three entries within u8a to assign color channels. The following listing demonstrates creating a graded blue green texture. See the entire generateGradientBG() method.

for (var i = 0; i < this.nBuffer; i = i+3){ 
 // Each row r,g,b{0..95}
 // Each row one pixel 
 // range:{0..31}
 j = i % 96;
 k = 95 - j;

 // Assign Red, Green,
 // Blue values:
 u8a[i] = 0;
 u8a[i + 1] = 255-k;
 u8a[i + 2] = 255-j;
}

Listing 21: Generate Blue Green Gradation Procedural Data

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