WebGL Textures & Vertices

Beginner's Guide

Page Thirty

Procedural Textures with API texImage2D()

Method texImage2D() uploads pixel data to the GPU. The Uint8Array behaves nearly identical to data from an Image element. However call texImage2D() with nine parameters instead of six. Include parameters specifying width, height, and border. The first six parameters tell WebGL how to store the image data. The last three parameters describe the image data for upload to the GPU.

Parameter 1 represents the texture's target. Use TEXTURE_2D for this book's examples. Use TEXTURE_CUBE_MAP_<side> to display 6 images mapped to 6 sides of a cube. <side> represents the side of the cube an image represents. Skyboxes use cube maps. For skybox online projects see WebGL Skybox examples.

Hopefully soon Seven Thunder Software will re-release WebGL Skyboxes, to Amazon, or post the book for free on this Website.

Parameter 2 represents the level of detail. Use 0 for parameter 2.

Parameter 3 represents the number of color channels for this texture. Pass RGB for parameter 3. RGB means this texture includes channels for red, green, and blue. We didn't include an alpha channel with the procedural texture examples.

Parameters 4 and 5 specify width and height. The book's examples generate 32 x 32 pixel square procedural textures. The width and height are required in this overloaded version of texImage2D() because an array of pixel data does not specify width and height. Set dimensions with the 4th and 5th parameters. We assigned the value 32 for both width and height.

Parameter 6 represents the border. We assigned the value 0 to display the texture without a border.

Parameter 7 represents the internal format and must match parameter 3. We used RGB for both parameter 7 and parameter 3.

Parameter 8 represents the type of data provided. We prepared texture data in a Uint8Array where each entry's type equals UNSIGNED_BYTE. Therefore pass UNSIGNED_BYTE as parameter 8.

Parameter 9 equals the Uint8Array filled with color data. Parameter 8 must match the data type for each entry in an array supplied with parameter 9. For procedural textures entity.img equals a Uint8Array and the type of each entry equals UNSIGNED_BYTE.

The following listing demonstrates our overloaded call to the WebGL API texImage2D(), for procedural textures. gl is a reference to a WebGLContext. The section titled Controller Details explains how to obtain a reference to the WebGLContext.

gl.texImage2D(
 gl.TEXTURE_2D,
 0,
 gl.RGB,
 32,
 32,
 0,
 gl.RGB,
 gl.UNSIGNED_BYTE,
 entity.img
);

Listing 25: WebGL API texImage2D() for Procedural Textures

Procedural Textures Summary

We demonstrated procedural textures prepared entirely with source code, rather than image files. This section explained how to create five different procedural textures. We demonstrated JavaScript which generates color values to display as a texture. We also covered WebGL initialization modifications required for procedural textures.

The procedural textures in this section included a blue to green linear gradient, red and blue striped texture, texture with different colored tiles, random green and red texture, and a solid red square. In the process we introduced the WebGL array type Uint8Array, and an overloaded version of the WebGL method texImage2D().

Procedural textures include a few advantages. First procedural textures are lightweight. They usually require less memory.

Second initialization is synchronous, as opposed to image files which must download asynchronously. Image file onload event listeners are asynchronous. We have to wait before the file loads to complete processing the texture. With synchronous processes, source code can move from one initialization method to the next. Therefore procedural textures allow more immediate texture processing.

Third JavaScript may resize graphics based on screen resolution, with no loss in image quality. Resized image files often result in blurry or distorted images. We don't cover resizing in this book, however you can modify JavaScript procedural texture methods to prepare textures for varying dimensions.

Fourth procedural texture generation includes the ability to create algorithms of imaginative, complex, and sometimes surreal beauty. Procedural textures offer the opportunity to generate imaginary and complex textures with source code alone. See the source code specific to procedural textures.

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