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 ...
Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.