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.
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...