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.
Follow these steps to create a rotating cube with WebGL:
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>
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 = gl.createArrayBuffer([ // Front face -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1, // Back face -1, -1, -1, -1, 1, -1, 1, 1, -1, 1, -1, -1, // Top...