HTML5 Canvas Cookbook

Creating a rotating cube

Okay, now the fun really begins. In this recipe, we'll create a rotating 3D cube with differently colored faces. To do so, we'll introduce two new kinds of buffers—color buffers and index buffers.

How to do it...

Follow these steps to create a rotating cube with WebGL:

1. Link to the glMatrix library and the WebGL wrapper:

   <script type="text/javascript" src="glMatrix-1.0.1.min.js">
   </script>
   <script type="text/javascript" src="WebGL.js">
   </script>

2. Define the initBuffers() function which initializes the position buffers, color buffers, and the index buffers for our cube:

    function initBuffers(gl){ var cubeBuffers = {} cubeBuffers.positionBuffer ...