Game Development Reference
In-Depth Information
Each face object had the structure, shown in the preceding code snippet, with
a
,
b
,
and
c
as the indices to the vertices for that face. We simply iterated over the
faces
array of the
Geometry
class and copied the
a
,
b
, and
c
values of each face object
into our indices array using the
indicesFromFaces
function of our
Geometry
class
(defined in
primitive/Geometry.js
), as shown in the following code snippet:
indicesFromFaces: function () {
for(var i=0; i<this.faces.length; ++i) {
this.indices.push(this.faces[i].a);
this.indices.push(this.faces[i].b);
this.indices.push(this.faces[i].c);
}
}
For normals, we wrote a function,
calculateVertexNormals
, in the
Geometry
class. We did not use the
normal
array from the
Box.json
file because normals are
associated with vertices and not indices or faces. The
Box.json
file gave a normal for
each vertex with respect to that face. Hence, if a vertex was being used in two faces,
then we had two normals for the same vertex and to get the final normal for that
vertex, we had to add them up. However, we decided not to use that information
and we calculated our normal array from indices and vertices.
Restructuring for texture coordinates
First, let's study the changes we need to perform to read the UV information of faces
in our
parseJSON.js
file:
fi = geometry.faces.length;
if ( hasFaceUv ) {
for ( i = 0; i < nUvLayers; i++ ) {
uvLayer = data.uvs[ i ];
uvIndex = faces[ offset ++ ];
geometry.faceUvs[ i ][ fi ] = uvIndex;
}
}
if ( hasFaceVertexUv ) {
for ( i = 0; i < nUvLayers; i++ ) {
uvLayer = data.uvs[ i ];
uvs = [];
var aVertexIndices=["a","b","c","d"];
for ( j = 0; j < nVertices; j ++ ) {
uvIndex = faces[ offset ++ ];
uvs[ aVertexIndices[j]] = uvIndex;
}
geometry.faceVertexUvs[ i ][ fi ] = uvs;
}
}
