Applying Textures - WebGL Game Development - page 130

Parsing UV coordinates from the
JSON file
Now, we will walk you through the code to show the changes that we need to
perform to load the JSON file with a texture. But, first let's understand the biggest
challenge we are going to face to load the JSON file in order to have the minimum
memory footprint.
The challenge and the algorithm
First, let's review the basic principles of WebGL texture mapping:
• Each texture coordinate is mapped to a vertex and vice versa. So, if we have
eight vertices defined in the vertex buffer, we need eight texture coordinates.
If we have 16 vertices defined in the vertex buffer, we need 16 texture
coordinates. Take a look at the previous code snippets of this chapter and
you will notice we had four UV values for four vertices of the square. This
applies to all vertex attributes, such as colors and normals, among others.
• We used the index buffer so that we do not have to repeat vertices in the
vertex buffer. We did this so that the memory we assign for the vertex buffer
in the GPU is of the smallest footprint. However, there is no rule that says
that the vertices cannot be redundant. We can repeat vertices, but then we
would have to change the indexing in the indices array.
• There is no relation of the texture coordinates with the indices defined.
Why are we discussing this? Notice in the Box.json file that you have eight vertices
but 15 texture coordinates. This will happen with any visual designing tool, be it
Blender, Maya, or 3ds Max, the number of vertices will never match the number
of texture coordinates. The export tools will always generate a minimum number
of vertices and texture coordinates and their relation will be expressed in the face
information such as the Box.obj file. We have more UV coordinates than vertex
coordinates because a vertex can be shared between many faces and we can have
different UV coordinates for each face. This is explained and implemented in depth
in the upcoming sections.
Again, texture coordinates are relative to the vertex data and not the index data.
The indexing is independent of texturing.
Suppose you have the following vertex array made of three vertices (three
components each):
var vertices = [x0, y0, z0, x1, y1, z1, x2, y2, z2];