HTML5 Canvas, 2nd Edition

What Does a WebGL Application Look Like?

Now we are going to show you a WebGL application demo that rotates a 3D cube on Canvas (see Figure 11-2). Because we are not experts in 3D graphics, we will forgo our practice of describing every line of code in the example; instead, we will highlight interesting sections of code to help you understand what is happening.

This demo is based on Lesson 4 from Giles Thomas’s Learning WebGL website. While this is only one short demo, it should give you a very good idea of how to structure and build code for a WebGL application.

Note

Much of this code has been adapted from the work of Giles Thomas with his express written permission.

Figure 11-2. 3D rotating cube (CH11EX1.html)

JavaScript libraries

First, we add some JavaScript libraries. Modernizr includes a test for WebGL support in a web browser. This version was freshly released, but it could be updated with new features at any time (in fact, at the time of this writing, this had been updated to version 2.6). It is necessary to make sure that you have the most recent versions of your libraries:

<script src="modernizr.js"></script>

We now need to include some JavaScript libraries to assist with our application. sylvester.js and glUtils.js are two libraries that you will find included for most apps that use WebGL. sylvester.js is a library that helps when performing vector and matrix math calculations ...