WebGL Textures & Vertices
Vertices with Texels
Diagram 5: Associate Vertices with Texels
The following listing from
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, ] );