## WebGL Textures & Vertices

## Beginner's Guide

### Page Seven

# Vertices with 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, ] );