Beginning WebGL - HTML5 Games Most Wanted - page 159

Listing 7-21. Defining Six Colors Instead of Twenty-four
for(var i=0; i < 6; ++i){
var color = colors[i];
unpackedColors = unpackedColors.concat(color);
}
octahedronVertexColorBuffer.itemSize = 4;
octahedronVertexColorBuffer.numItems = 6;
Figure 7-12. Two colors on the left, six colors on the right. Both illustrate varying vertex colors per face, resulting in
blended faces. You may want this effect, just be aware that one color per vertex will not result in solid faces if at least
two vertices differ in color.
The full source code is available on the topic web site at octahedron.html . As you can see, even a simple
shape involves a high number of vertices. Creating images quickly becomes tedious and error-prone from
inputting raw data by hand. A better solution is to load existing models.
Loading a complex model
Higher-level libraries will load wavefront obj files, collada, and other model file formats. The most common
way to load data is using Ajax and JSON or XML.
The program Blender, available at www.blender.org , is an open-source 3D suite. A script to export Blender
models in JSON format is available at http://code.google.com/p/blender-webgl-exporter/ .
A basic game
When creating a game, you should plan what you wish to accomplish and how to implement it (at a high
level) before you write any code. This can always be modified during development. but is a good start.