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.
Follow these steps to rotate a triangle about the y-axis 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 for our triangle:function initBuffers(gl){ var triangleBuffers = {}; triangleBuffers.positionBuffer = gl.createArrayBuffer([ 0, 1, 0, -1, -1, 0, 1, -1, 0 ]); return triangleBuffers; }
Define the
stage()
function which sets the perspective, sets the model-view matrix to the identity matrix, translates the triangle, rotates the triangle about the y-axis, pushes the...