Beginning WebGL - HTML5 Games Most Wanted - page 158

A: (-width, 0, -width)
B: (width, 0, -width)
C: (width, 0, width)
D: (-width, 0, width)
E: (0, height, 0)
F: (0, -height, 0)
We have chosen 1 for the width and the square root of 2 (1.41) for the height.
Each buffer specifies the itemSize , which is the number of sub-elements per item. For vertex position, this
is 3, corresponding to the three position values (x, y, z). For vertex color, it is 4, corresponding to the four
color channels (r, g, b, a). The numItems is how many items, each with the itemSize sub-elements that you
have. So for an itemSize of 3 with 24 numItems , your buffer would hold 3 × 24 = 72 values, while an
itemSize of 4 with 24 numItems requires 4 × 24 = 96 values.
If we did not care about faces having blended colors, we could have defined six vertices and used the
index buffers shown in Listing 7-20.
Listing 7-20. Using Six Vertices Instead of Twenty-four
vertices = [
0.0, height, 0.0,
width, 0.0, width,
-width, 0.0, width,
-width, 0.0, -width,
width, 0.0, -width,
0.0, -height, 0.0,
];
octahedronVertexPositionBuffer.itemSize = 3;
octahedronVertexPositionBuffer.numItems = 6;
//A,B,C,D = 1,2,3,4 E = 0, F = 5
var octahedronVertexIndices = [
//top
0, 1, 2, 0, 1, 4,
0, 2, 3, 0, 3, 4,
//bottom
5, 1, 2, 5, 1, 4,
5, 2, 3, 5, 3, 4,
];
octahedronVertexIndicesBuffer.itemSize = 1;
octahedronVertexIndicesBuffer.numItems = 24;
If you do not modify the color code, then only the first six colors are used—three red and three green, as
shown on the left of Figure 7-12. If you do modify the code to remove the k loop, and use six of your eight
colors, then you get the result on the right of Figure 7-12.