CycleBlob: A WebGL Lightcycle Game - HTML5 Games Most Wanted - page 180

Vertices are specified by lines starting with the letter “ v ” and mesh faces are specified with “ f ” lines that, as
before, specify the vertices' indices. In this format, the vertices are specified as one-based indices, not
zero-based. The full .obj format specifies other types of lines for normal and texture coordinates.
A WebGL application can be set up to download .obj files directly from the server and parse them in
JavaScript to create the arrays for display. In CycleBlob, I opted for a slightly different approach. I wrote a
small C++ program that reads .obj files and converts them into the JSON representation. The WebGL
game then downloads the JSON files and converts them to JavaScript objects using the built-in JSON
library. This approach saves the time and code it takes to parse .obj files and is less prone to errors.
After reading the JSON files into JavaScript objects, the code converts the JavaScript arrays into
Float32Array and Int16Array typed arrays that are going to be sent to WebGL. The process culminates to
an eventual call to gl.bufferData() for every typed array. This call sends the data to the GPU and after it,
the JSON objects and the typed array can be safely discarded.
Figure 8-4. (a) The rendered bike model. (b) The triangle mesh of the model. (c) Parts of the models that are colored
according to the player color. (d) The rest of the model with constant color.