WebGL Textures & Vertices

Beginner's Guide

Page Seven

Vertices with Texels

Vertices and Texels

Diagram 5: Associate Vertices with Texels

The following listing from GLSquare.js, generates an array containing interleaved vertices and texels. Interleaved entries alternate between three vertex coordinates and two texel coordinates.

For example the first three entries represent the X, Y, and Z components for one vertex at the top left corner of the square. The next two entries represent the texel's S and T values for the top left corner of the lighthouse image. The next three entries in the array declare the top right corner of the square with X, Y, and Z coordinates. The following two entries declare the top right corner of the lighthouse image with S and T coordinates for one texel.

The array includes the data to declare four vertices mapped with four texels. Represent vertices with X, Y, and Z coordinates. Represent texels with S and T coordinates. The array describes a square plane covered with a graphic at full size. In other words the following array prepares to map an image fully from the top left corner to the bottom right corner of a square mesh.

var aVertices = new Float32Array(
[
 // left top:  
 // X,Y,Z:
 -1.0, 1.0, 0.0, 
 // S,T:
 0.0,1.0,
   
 // right top: 
 // X,Y,Z:
 1.0, 1.0, 0.0,
 // S,T:
 1.0, 1.0,
 
 // right bottom:
 // X,Y,Z;
 1.0, -1.0, 0.0,   
 // S,T:
 1.0, 0.0,
 
 // left bottom
 // X,Y,Z:
 -1.0, -1.0, 0.0,   
 // S,T:
 0.0, 0.0,
 ]
);

Listing 2: Interleaved Array

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