Physics and Terrains - WebGL Game Development - page 239

Coordinates Vertices

(1,0) a = 3 + 4 * 0 = 3

b = 3 + 4 * (0 + 1) = 7
c= (3 + 1) + 4 * (0 + 1) = 8
d = (3 + 1) + 4 * 0 = 4
Hence, the values for the vertices are (3, 7, 8, 4)

The formula to calculate UV maps for the corresponding vertices is as follows:

var uva = vec2.fromValues( j / gridX, 1 - i / gridZ );
var uvb = vec2.fromValues( j / gridX, 1 - ( i + 1 ) / gridZ );
var uvc = vec2.fromValues( ( j + 1 ) / gridX, 1 - ( i + 1 ) /
gridZ );
var uvd = vec2.fromValues( ( j + 1 ) / gridX, 1 - i / gridZ );

Let's now look at the complete code to generate the faces array, UV maps, and
normal array.

We first iterate over all segments of our plane. For each segment, we have two faces
and add them to our faces array. The following code calculates the indices and UV
coordinates for the four vertices of the polygon using the formula derived earlier:

var faceUVIndex=0;
var faceIndex=0;
this.faceVertexUvs[0]=[];
var uvs=[[]];
uvs[0]=[];
for ( i = 0; i<gridZ; i ++ ) {
for ( j = 0; j <gridX; j ++ ) {

var a = j + gridXN * i;
var b = j + gridXN * ( i + 1 );
var c = ( j + 1 ) + gridXN * ( i + 1 );
var d = ( j + 1 ) + gridXN * i;
var uva = vec2.fromValues( j / gridX, 1 - i / gridZ );
var uvb = vec2.fromValues( j / gridX, 1 - ( i + 1 ) / gridZ );
var uvc = vec2.fromValues( ( j + 1 ) / gridX, 1 - ( i + 1 ) / gridZ );
var uvd = vec2.fromValues( ( j + 1 ) / gridX, 1 - i / gridZ );