HTML5 Canvas Cookbook

Rotating a triangular plane in 3D space

Now that we can draw a 2D triangle in 3D space, let's try spinning it about the y-axis using the animation methods we added to the WebGL wrapper object.

How to do it...

Follow these steps to rotate a triangle about the y-axis 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 for our triangle:

    function initBuffers(gl){ var triangleBuffers = {}; triangleBuffers.positionBuffer = gl.createArrayBuffer([ 0, ...