WebGL Textures & Vertices

Beginner's Guide

Page Twenty

Procedural Textures Bonus Project

Procedural Textures
Procedural Textures

Procedural textures are prepared entirely with source code, rather than image files. Procedural textures don't require separate image files to download. This section explains how to create five different procedural textures. We'll demonstrate JavaScript which generates color values to display as a texture. We also cover WebGL initialization modifications required for procedural textures.

The procedural textures in this section include 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 introduce 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 the procedural texture initialization, in this book, is synchronous. Yet Image file onload event listeners are asynchronous. Asynchronous means we have to wait, an unspecified amount of time, before the image file loads. We can't complete processing the texture until the file loads.

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.

Consider style sheets or JavaScript to resize the canvas for mobile devices, rotations, scrolling, and browser resize events. The newest e-book WebGL Beginner's Guide: For Designers and Developers demonstrates responsive Web design with WebGL.

Fourth procedural texture generation includes the ability to create algorithms of imaginative, complex, and sometimes surreal beauty.

Perhaps the only disadvantage to procedural textures involves processing time. With complicated textures many lines of code execute before the texture completes preparation. The simple textures demonstrated in this section require minimal processing time.

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