Game Development Reference
In-Depth Information
18, 19, 20, 21, 22, 23
];
octahedronVertexIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, octahedronVertexIndexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new
Uint16Array(octahedronVertexIndices), gl.STATIC_DRAW);
octahedronVertexIndexBuffer.itemSize = 1;
octahedronVertexIndexBuffer.numItems = 24;
}
Note
Even though we want to render the vertices in groups of three (triangles), the
itemSize of the indices buffer is one. Each element represents one vertex. WebGL will
assemble triplets of vertex indices when we render and specify gl.TRIANGLES.
Figure 7-11 is a composite of three screenshots of our second demo, which demonstrates the animation in
the program.
Figure 7-11.
Octahedron rotating around the screen
To create the figure of the octahedron, there are actually only six distinct vertices. However, we want each
face to be a different color. If we used only six vertices in our vertex buffer, than we could only have six
colors—one for each vertex, not the eight needed for each of the eight faces to be different. Furthermore,
even if the number of vertices was equal or greater than the number of faces (as in the case of a cube)
then vertices are shared across different faces. You cannot define a buffered vertex to be a different color
based on its usage and because of this, blending will occur (see Figure 7-12). To bypass this issue, we will
need to define each vertex-color pair separately.
Referring again to Figure 7-9, when the octahedron is centered at the origin (0,0,0) and vertices A, B, C, D
lie on the plane formed by y=0, than the vertex points are:
