WebGL Textures & Vertices

Beginner's Guide

Page Seventeen

Tile Texture Mapping

The following listing demonstrates a tiled array of vertices and texels. With interleaved arrays each new texel needs a copy of vertex coordinates. Easier methods exist to copy textures across the surface. For example the next project demonstrates repeating a texture across one surface with the WebGL API method texParameteri(target, wrap mode, repeat type).

var aVertices =  new Float32Array(
[
// Top left quadrant:
-1.0, 1.0, 0.0, 
0.0,1.0,

0.0, 1.0, 0.0,
1.0, 1.0,

0.0, 0.0, 0.0,  
1.0, 0.0,

-1.0, 0.0, 0.0,  
0.0, 0.0,

//Top right quadrant:
0.0, 1.0, 0.0, 
0.0,1.0,

1.0, 1.0, 0.0,
1.0, 1.0,

1.0, 0.0, 0.0,  
1.0, 0.0,

0.0, 0.0, 0.0,  
0.0, 0.0,

//Bottom right quadrant:
0.0, 0.0, 0.0, 
0.0,1.0,

1.0, 0.0, 0.0,
1.0, 1.0,

1.0, -1.0, 0.0,  
1.0, 0.0,

0.0, -1.0, 0.0,  
0.0, 0.0,

//Bottom left quadrant:
-1.0, 0.0, 0.0, 
0.0,1.0,

0.0, 0.0, 0.0,
1.0, 1.0,

0.0, -1.0, 0.0,  
1.0, 0.0,

-1.0, -1.0, 0.0,  
0.0, 0.0,   
 ]
);

Listing 11: Tiled Array of Vertices and Texels

The following listing demonstrates the element index array for the tiled examples.

var aIndices = new Uint16Array([
  // upper left quadrant
 3,2,0,
 0,2,1,   
  
 // upper right quadrant
 7,6,4,
 4,6,5,
  
 // lower right quadrant
 11,10,8,
 8,10,9,
  
// lower left quadrant
 15,14,12,
 12,14,13,
]);

Listing 12: Tiled Element Index Array

Tile a Texture Map Summary

This section demonstrated how to tile graphics on a square plane manually. We added vertices and texels, dividing the plane into quadrants, or four sections. We added center vertices to each edge of the plane. The exact center of the plane includes a vertex at coordinate (0,0,0), as well. The next section Display Repeating Graphics demonstrates an easier method to tile graphics across a mesh. See the GLSquareTile constructor.

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