WebGL Textures & Vertices

Beginner's Guide

Page Twenty Seven

Find Procedural Texture's Left Half

We know each row equals 96 entries in the Uint8Array. Because 32 * 3 = 96. Every 96 entries represent another row. The following line assigns the column number to variable j.

var j = i % 96;

48 equals one half of a row because because 96/2 = 48. Therefore bLeft = j < 48 equals true when j represents the left half of the texture. If j represents the right half of the texture, then bLeft equals false.

The following listing demonstrates assigning color channels based on quadrant. In other words display four square tiles on a square texture map. See the entire generateTilesRGB() method.

for (var i = 0; i < this.nBuffer; i = i+3){
// Default black:
nRed = Number(0);
nGreen = Number(0);
nBlue = Number(0);

 // pixels display
 // in the top half if
 // less than 
 // half the size
 // of the entire buffer.
 bTop = i < nHalf;
 
 // j equals 
 // column number:
 var j = i % 96;
 bLeft = j < 48;

 // Top tiles.
 if (bTop){
 
  // Top left tile:
  if (bLeft){
   nRed = Number(255); 
  }
  // Top right tile.
  else {
   nBlue = Number(255);
  }
 }
 
  // Bottom tiles.
  else {
  
  // Bottom left.
  // Blue+Red=Violet.
  if (bLeft){
   nRed = Number(255);
   nBlue = Number(255); 
  }
  // Bottom right tile.
  else {
   nGreen = Number(255);
  }
 } 
 // Assign three
 // color channels
 // for one pixel.
 u8a[i] = nRed;
 u8a[i+1] = nGreen;
 u8a[i+2] = nBlue; 
}

Listing 23: Generate Tiles Procedural Data

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