Applying Textures - WebGL Game Development - page 131

Also, there is a texture coordinate array made of three coordinates (two
components each):
var t-co-ordinates = [s0, t0, s1, t1, s2, t2];
We associate the vertex 0 ( x0, y0, z0 ) with the texture coordinate 0 ( s0, t0 ). The
index data is a way of specifying the vertices. In our previous example, if we would
like to render the triangle twice, we would specify an index array as follows:
var indices[] = {0, 1, 2, 0, 1, 2};
The index data is independent of texture coordinates or other vertex attributes such
as colors and normals, among others. Hence, we do not bind texture coordinates to
the index data.
So, if we have a situation like in our case, where the number of texture coordinates
does not match the number of vertices, then we have to create redundant vertex
information or texture information and re-arrange our indices.
Now, we need to prepare our vertex array, index array, normal array, and texture
coordinates array from the face information before making the drawElements call.
Revisiting vertices, normals, and the indices array
Let's summarize how we created our vertices, normals, and the indices arrays so far.
We were simply copying our vertices from the JSON object to the vertices array.
The parseJSON function in the parseJSON.js file, present in the primitive
directory, was reading the Box.json file and creating face objects, as shown in
the following code snippet:
Face = function (a, b, c, normal, color, materialIndex) {
this.a = a;
this.b = b;
this.c = c;
this.normal = normal ;
this.vertexNormals = [ ];
this.vertexColors = color instanceof Array ?color : [];
this.colorIndex = color;
this.vertexTangents = [];
this.materialIndex = materialIndex !==
undefined ? materialIndex : 0;
};