Further Explorations - HTML5 Canvas - page 885

mvPushMatrix ();
mvRotate ( rotateCube , [ 0 , . 5 , . 5 ]);
Next, we draw the cube by binding the buffers that hold the vertices and color information
that we set up earlier for the cube's sides. We then draw each side, made up of two triangles
each:

webGLContext . bindBuffer ( webGLContext . ARRAY_BUFFER , cubeVertexPositionBuffer );
webGLContext . vertexAttribPointer ( shaderProgram . vertexPositionAttribute ,
cubeVertexPositionBuffer . itemSize , webGLContext . FLOAT , false

false , 0 , 0 );

webGLContext . bindBuffer ( webGLContext . ARRAY_BUFFER , cubeVertexColorBuffer );
webGLContext . vertexAttribPointer ( shaderProgram . vertexColorAttribute ,
cubeVertexColorBuffer . itemSize , webGLContext . FLOAT , false false , 0 , 0 );

webGLContext . bindBuffer ( webGLContext . ELEMENT_ARRAY_BUFFER , cubeVertexIndexBuffer );
setMatrixUniforms (); webGLContext . drawElements ( webGLContext . TRIANGLES ,
cubeVertexIndexBuffer . numItems , webGLContext . UNSIGNED_SHORT , 0 );

mvPopMatrix ();

Finally, we increase the rotateCube variable so that the next time drawScreen() is called,
the cube will be updated with a new angle. The following code adds 2 degrees to the rotation
angle each time drawScreen() is called:

rotateCube += 2 ;

}