Applying Textures - WebGL Game Development - page 136

Algorithm one is not the right way to proceed. It is good for
objects such as a plane where the vertex information might
not be redundant and indices might not be that valuable,
but for most objects in games, vertices are reused. Hence,
using this algorithm is not a very bright idea and so, we
have commented out the function.
Algorithm two to create new arrays
In this algorithm, let's first understand the problem again. We need the same number
of vertices as the UVs before we invoke the drawElements function call. So, we
know that each face has a vertex index and faceVertexUvs has a UV index from
that geometry. So, we have a relation between UV coordinates and vertices as each
faceVertexUv element corresponds to a face element.
Our new algorithm is pretty simple. If a vertex index is pointing to two different UV
coordinates, then clone that vertex. Each vertex clones at the same index as the UV
coordinates. If a UV coordinate is pointing to two different vertices, then clone the
UV coordinate. We will make some information redundant and it would be much
better than making complete copies for each face.
How do we achieve that? Let's look at the algorithm we designed:
verticesFromFaceUvs: function(vertices, uvs, materialIndex) {
var vertexVectors = [];
var redundantVertexVectors = [];
var vertexCovered = [];
//Copy vertices to a vec3 array
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);
}
var count = 0;
//Iterating over all uv indices for each vertex in a face.
for (var i = 0; i < this.faceVertexUvs[materialIndex].length;
++i) {
var face = this.faces[i];
var textureIndices = this.faceVertexUvs[materialIndex][i];
var aVertexIndices = ["a", "b", "c"];
//Iterating over the each vertex of the face.
for (var j = 0; j < aVertexIndices.length; ++j) {
var aVertexIndex = aVertexIndices[j];