HTML5 Canvas Cookbook

Creating a triangular plane

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.

How to do it...

Follow these steps to render a 2D triangle 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"> ...