WebGL Textures & Vertices

Beginner's Guide

Page Twenty Six

Procedural Texture-Four Tiles

Tiles

This section describes how to create a texture with four different colored tiles. Each quadrant or quarter of the texture displays a different color. The GLTexProcedure class defines method generateTilesRGB(), to create data with red, blue, violet, and green tiles.

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.

Determine which quadrant the pixel represents. JavaScript checks to determine if the pixel displays in the top or bottom half. Then JavaScript checks to determine if the pixel displays on the left or right side.

Find the Top Half

The total number of entries in the array equals 3072, which we assigned to the property nBuffer. The line nHalf = this.nBuffer/2;, assigns the local variable nHalf half the number of entries in the array. Colors for the top half of the texture reside in the first half of the array. Within the for loop the statement bTop = i < nHalf, assigns either true or false to the local variable bTop. If bTop equals true then i displays within the top half of the texture. Otherwise i displays in the bottom half of the texture.

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

Fatal error: Internal zval's can't be arrays, objects or resources in Unknown on line 0