Applying Textures - WebGL Game Development - page 133

The first if condition in the preceding code checks whether the JSON has the face's
UV coordinates, then stores the index to the uvs array in the corresponding face
index. Hence for each face, we will have a UV coordinate. This case will not prove
untrue for an OBJ file as the OBJ format stores UV coordinates per face vertex.
However, there are other formats where this case might be helpful.
The second if condition checks whether the JSON file has face UV coordinates
per vertex, then stores the index of the texture coordinate for each vertex in a uvs
array. Then, it stores the UV index array in the corresponding face index of the
faceVertexUvs array.
The outer i loop of the second if condition is for the material index. An object can
have multiple materials. In our case, we have a single material, but in most cases,
you might find multiple materials for a geometry. Hence, faceUvs[materialIndex]
[faceIndex] is a double dimensional array declared in the Geometry class
and faceVertexUvs[material index][faceIndex][vertexIndex] is a three
dimensional array.
Algorithm one to create new arrays
Let's take a look at the verticesFromFaceUvs function from Geometry.js , which is
present in the primitive directory. We have commented out the function since we
do not use it in our examples—it is just for our reference.
The verticesFromFaceUvs function takes vertices[i+2]); , uvs , and materialIndex as
parameters. The values of vertices[i+2]); and uvs are derived from the JSON object.
They are redundant data. The actual arrays from the JSON file are passed into the
function, as shown in the following code snippet:
/* verticesFromFaceUvs: function(vertices, uvs, materialIndex) {
var vertexVectors = []; // will hold the redundant indexes to
the vertex array
var redundantVertexVectors = []; // Will hold the redundant
indexes to the uv array
var redundantUVs[]; // Create vector vertex from vertices for
easy indexing
for(var i=0; i<vertices.length; i=i+3) {
var vector = vec3.fromValues(vertices[i], vertices[i+1],
vertices[i+2]);
vertexVectors.push(vector);
}
// One faceVertexUV corresponds to one face
for(var i=0; i<this.faceVertexUvs[materialIndex].length; ++i) {
var face=this.faces[i]; // Pick one face