WebGL Textures & Vertices

Beginner's Guide

Page Twenty One

Prepare Four Procedural Textures

The JavaScript file GLTexProcedure.js defines the GLTexProcedure class. The constructor initializes an array of vertices with textures, and an array of indices identical to arrays created for the Lighthouse Texture Map project. Create arrays which define a square plane with mapping coordinates from edge to edge. The only difference between the the GLSquare constructor and the GLTexProcedure constructor is that we don't need an image file. The following listing demonstrates filling the first GLEntity img property with data returned from the method generateGradientBG() declared within GLTexProcedure.js. Method generateGradientBG() creates color data to display a blue green gradient, covered in the next few sections. See method generateGradientBG().

var n = new GLEntity(null,0);
n.img = this.generateGradientBG();

Listing 18: Assign Procedural Data

Select a Procedural Texture from the Menu

The GLTexProcedure constructor calls setListener(controller) to assign a change event for the Web page's select menu element. setListener(controller) retrieves a reference to the Web page's select menu element. Then setListener(controller) assigns the GLTexProcedure method named optionSelect(ev) as the menu's change event handler. Last setListener(controller) creates a property named controller and assigns a reference to the GLControl controller. The following line demonstrates assigning the controller to the menu's property.

menu.controller = controller; .

The Web page's drop down menu allows the user to select procedural textures for display. For each selection, the menu's change event listener named optionSelect(ev), retrieves a reference to the controller GLControl, a reference to GLTexProcedure, and the first GLEntity from the controller's list. The following listing demonstrates saving references to the controller, entity, and the GLTexProcedure reference named glDemo. The controller saves a reference to the property glDemo. The property glDemo, references the current project's class. In this case the class is a reference to GLTexProcedure.

var controller = ev.currentTarget.controller;
// Reference to
// GLTexProcedure:
var glDemo = controller.glDemo;
var entity = controller.aEntities[0];

Listing 19: Menu for Procedural Textures

Method optionSelect(ev) calls one of GLTexProcedure's five texture generation methods. Each texture generation method returns an array of color data. The methods include generateGradientBG() which creates a blue green gradient, generateTilesRGB() which creates a texture with four colored tiles, generateStripesRB() which creates red and blue stripes, and generateSquareR() which creates a solid red square.

The following line demonstrates assigning a solid red square texture to the GLEntity.img property.

entity.img = glDemo.generateSquareR();

See the optionSelect(ev), and the setListener(controller) methods.

Show Array Data

Each texture generation method within GLTexProcedure displays the first 32 entries of pixel data, to the Web pages. The method printArray(s, a) simply outputs ordered numbers to a Web page text element. Displaying each entry helps when debugging texture values.

The first parameter to printArray(s, a) is a String to show to the user on the Web page. The second parameter is a reference to a filled Uint8Array. See the entire printArray(s, a) method.

The next few sections explain how to prepare arrays of color data for procedural textures. Then we explain how to initialize procedural textures.

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