WebGL Textures & Vertices

Beginner's Guide

Page Twenty Two

WebGL API Type Uint8Array

Every procedural texture described with the book, creates a Uint8Array. A Uint8Array represents a typed array with unsigned integer entries of 8 bits. The values for an entry in the array range from 0 to 255. Eight bit unsigned values represent 20 - 1 = 0 to 28 - 1 = 255. The values range from {0...255}.

Entries in order represent red, green, and blue color channels. For example given a Uint8Array named u8a, the value at u8a[0] represents the amount of red in the first pixel. The value at the value at u8a[1] represents the amount of green in the first pixel. The value at u8a[2] represents the amount of blue in the first pixel.

Additionally the value at u8a[3] represents the amount of red in the second pixel. The value at the value at u8a[4] represents the amount of green in the second pixel. The value at u8a[5] represents the amount of blue in the second pixel. Every three entries within u8a declare the color for one pixel.

The examples prepare an array filled with color data to display a square texture 32 x 32 pixels in dimension. To fill the array we need 32 * 32 pixels. Each pixel requires 3 entries, where each entry represents a red, green, or blue channel. We need a Uint8Array with 3072 entries.

32 * 32 * 3 = 3072

The constructor saves a member variable named nBuffer to maintain the size of each Uint8Array with the following line of JavaScript.

this.nBuffer = Number(3072);

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