Now that we have our WebGL wrapper set up, let's create our first WebGL application by drawing a simple triangle on the screen. It will serve as a good foundation for the typical steps that are required to create more complex 3D models. In this recipe, we'll introduce the concept of position buffers, which are simply arrays of vertices used to define the position and shape of a 3D model.
Follow these steps to render a 2D triangle 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...