WebGL Textures & Vertices

Beginner's Guide

Page Eighteen

Display Repeating Graphics

Repeating Fish
Repeating Butterfly Fish
Repeating Lighthouse
Repeating Lighthouse

Repeating graphics with the WebGL API method texParameteri(target, wrap mode, repeat type), offer a simpler and faster method to tile textures across a surface. This section demonstrates how to easily assign tiles across the vertical and horizontal axis of a mesh. Combine a properly constructed array of texels with the WebGL API method texParameteri(target, wrap mode, repeat type), to eliminate the need for additional vertices and texels.

First modify the texel coordinates to range from 0.0 to n, where n equals a number representing the desired tile count along an axis. The following array displays a texture 4 times along the horizontal axis and 4 times along the vertical axis.

var aVertices = new Float32Array(
[
 // left top
 -1.0, 1.0, 0.0, 
 0.0,4.0,
 
 // right top 
 1.0, 1.0, 0.0, 
 4.0, 4.0,
 
 // right bottom
 1.0, -1.0, 0.0, 
 4.0, 0.0, 
 
 // left bottom
 -1.0, -1.0, 0.0, 
 0.0, 0.0,
]);

Listing 13: Array Repeats Texture 4 x 4 Times

Horizontal and vertical tile count can vary. For example assign 2 tiles across the horizontal and 8 tiles across the vertical dimension, to quickly change a texture's appearance. The following listing stretches graphics horizontally, and squashes them vertically on a square mesh. The square mesh displays 2 x 8 tiles.

var aVertices = new Float32Array(
 [
 // left top
 -1.0, 1.0, 0.0, 
 0.0,8.0,
 
 // right top

 1.0, 1.0, 0.0,
 2.0, 8.0,
 
 // right bottom 
 1.0, -1.0, 0.0, 
 2.0, 0.0,
 
 // left bottom 
 -1.0, -1.0, 0.0, 
 0.0, 0.0,
]);

Listing 14: Array Repeats Texture 2 x 8 Times

The element array for repeating tiles is identical to the Lighthouse Texture Map element array. Use the same number of indices in the same order.

var aIndices = newUint16Array
([
3,2,0,
0,2,1,
]);

Listing 15: Repeating Element Array

Repeat Texture Initialization

Texel coordinates work with WebGL settings to display an image repeatedly across a texture. The WebGL API method texParameteri(target, wrap mode, repeat type) includes options which instruct WebGL to repeat the texture.

The GLSquareRepeat class includes an init(controller) method. If a project defines the init(controller) method, then GLControl calls init(controller) once for preparation unique to the project. The call to init(controller) happens after all textures have initialized and before the first rendering sequence. This is the only project in the book which requires unique initialization. However other projects in the series prepare WebGL properties before rendering.

Method init(controller) calls the WebGL API method texParameteri(target, wrap mode, repeat type) to assign repeating values for the active texture.

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