Game Development Reference
In-Depth Information
The second
for
loop iterates over the
faceVertexUvs
array. Remember that each
element of the
faceVertexUvs
array corresponds to a face element of the
faces
array in the
Geometry
class. Hence, you could iterate over either of them, as shown
in the following code snippet:
var face=this.faces[i]; // Pick one face
var textureIndices = this.faceVertexUvs[materialIndex][i]; // Pick
the corresponding vertexUV map
Retrieve one face element from the
faces
array and one element from the
faceVertexUv
array. The face element would contain indices to the vertices array
that make up a polygon, in our case triangle. Each UV element (textureIndices)
would contain indices to the UV array for each vertex. Hence, we iterate over these
elements to retrieve the value for each vertex denoted by
a
,
b
, and
c
, and store the
value for each vertex in the
redundantVertex
and
redundantUvs
arrays. We copy
each vertex index and UV index into their corresponding redundant array as follows:
redundantVertexVectors.push(face[aVertexIndex]); // For each
vertex in face, copy the vertex to the vertex redundant array.
redundantUVs.push(textureIndices[aVertexIndex]); // For each
vertex in face, copy the vertexUV map to the uv redundant array.
So, basically we copied each vertex and UV coordinate in an order as specified in the
faces
and
faceVertexUv
arrays. This means we would not even need the
indices
array and can use the
drawArrays
call without any indices. On the other hand, we
can create the
indices
array by simply storing elements starting from zero to the
number of faces multiplied by 3. Here, we are repeating each possible vertex and UV
coordinate as per the faces. As mentioned earlier, this would be a pretty inefficient
approach, so this code is commented out. Thus, if an object had 1200 faces, then
our vertex array would be
1200*3
elements and the UV array would have
1200*2
elements. Take a look at the following figure:
