Beginning WebGL - HTML5 Games Most Wanted - page 155

Listing 7-18. Calculating Our Translation and Rotation After Each Frame
mat4.translate(mvMatrix, [3*x, y, -12.0 + 5*z]);
if(!paused){
x = Math.cos(translationAngle);
y = x;
z = Math.sin(translationAngle);
rotationRadians = rotationIncrement/(180/Math.PI);
rotationIncrement++;
translationAngle += .01;
}
mat4.rotate(mvMatrix, rotationRadians, rotationVector);
Using an index buffer
In this demo, we will use gl.TRIANGLES instead of a gl.TRIANGLE_STRIP . While it is still possible to use a
TRIANGLE_STRIP here, doing so is much more complicated.
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, octahedronVertexIndexBuffer);
gl.drawElements(gl.TRIANGLES, octahedronVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT,
0);
The initBuffers function (from Listing 7-12) has been completely replaced, as shown in Listing 7-19. Our
vertex and fragment shaders remain exactly the same.
Listing 7-19. Our Octahedron Buffer Initialization Function
function initBuffers() {
octahedronVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, octahedronVertexPositionBuffer);
vertices = [
// top faces
0.0, height, 0.0,
1.0, 0.0, 1.0,
-1.0, 0.0, 1.0,
0.0, height, 0.0,
1.0, 0.0, -1.0,
-1.0, 0.0, -1.0,
0.0, height, 0.0,
1.0, 0.0, 1.0,
1.0, 0.0, -1.0,
0.0, height, 0.0,
-1.0, 0.0, 1.0,
-1.0, 0.0, -1.0,
//bottom faces
0.0, -height, 0.0,
1.0, 0.0, 1.0,