HTML and CSS Reference
In-Depth Information
How Do I Learn More About WebGL?
The best place to learn about WebGL is at
http://learningwebgl.com/
. This site has an
FAQ, a blog, and some helpful low-level lessons on how to create apps using WebGL.
You can also find a ton of great content about WebGL at
http://developer.mozilla.org
.
One warning, though: programming WebGL is not for the uninitiated. Although
WebGL is based on OpenGL, it is still a very low-level API, meaning you will need to
create everything by hand. At the end of this section, we will guide you toward some
higher-level libraries that should make this process a bit easier.
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
). Since 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 in-
teresting sections of code to help you understand what is happening.
This demo is based on Lesson 4 from Giles Thomas's Learning WebGL website (
http:
//learningwebgl.com/blog/?p=370
). 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.
Much of this code has been adapted from the work of Giles Thomas
with his expressed, written permission.
JavaScript libraries
First, we add some JavaScript libraries. Modernizr 1.6 includes a test for WebGL sup-
port 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 1.7). It is necessary to make sure you have the most recent versions of your
libraries:
<script src="modernizr-1.6.min.js"></script>
We now need to include some JavaScript libraries to assist with our application.
sylvester.js
and
glUtils.as
are two libraries that you will find included for most apps that
use WebGL.
sylvester.js
(
http://sylvester.jcoglan.com/
)
is a library that helps when per-
forming vector and matrix math calculations in JavaScript.
glUtils.as
is an extension
for
sylvester.js
, specifically for helping with math related to WebGL:
<script type="text/javascript" src="sylvester.js"></script>
<script type="text/javascript" src="glUtils.js"></script>
