Game Development Reference
In-Depth Information
With some minor exceptions, (until WebGL arrived) interactive 3D content has been largely confined to
monolithic applications that the user downloads and runs on a desktop computer. Back in the
'
90s, we had
VRML, an XML-like language that described 3D models and worlds. VRML had very few mechanisms for
interacting with the user and it was primarily used for displaying static, 3D content. Its current incarnation—
in the form of X3D—addresses this issue to a large extent, adding mechanisms for creating fully interactive
worlds. X3D, however, is not intended to allow full programmability the way JavaScript does. X3D is a
declarative language that allows the programmer to describe what objects to display and what the relations
between those objects are. WebGL, on the other hand, comes from the
imperative
paradigm: the
programmer writes the exact instructions on
how
to draw every element of the scene. This opens up a
whole new world of options and flexibility—compared to what is possible with X3D. Another drawback of
X3D is that like VRML, it requires the user to install a plug-in to the browser. WebGL, on the other hand, is
an integral part of the HTML5 standard and does not require an external plug-in in the browsers that
support it.
WebGL is fully supported by the latest versions of Mozilla Firefox and Google Chrome, and is in
development for Safari and Opera. This support, however, still depends on the OS being fairly recent and
updated, and on the hardware and drivers to be fairly up-to-date. Microsoft Internet Explorer still does not
support WebGL; furthermore, Microsoft has explicitly stated its distrust of WebGL technology due to
possible security concerns. I expect, however, that with the current trend towards HTML5 and away from
Flash and Silverlight, and with the sincere intent of the WebGL community to address security issues,
Microsoft will turn around and eventually align with the rest.
Starting with WebGL
graphics. These tutorials are a port to WebGL by the renowned NeHe OpenGL tutorials. I started by
copying one of the tutorial's code for a basic rendering engine, then adding features on top of it; copying
from other tutorials to load meshes and add lighting; and adding my own code for animation. After a while,
I found myself gradually refactoring out the tutorial code, replacing it with more generic code in some
places and code specialized for my own needs in others. Working with the tutorials allowed me to quickly
get off the ground and have something working and rendering in a short time. Once you have a 3D image
visible, you know you're on the right track. With every step and feature added, you can easily check that
nothing broke down and that you still get a proper 3D rendering.
Work environment setup
Like any programming activity, writing and debugging a web application requires a small amount of setup
to enable you to write code and see it working. An absolute minimal setup consists of the following:
A text editor for writing code. On Windows, even Notepad.exe can be used for this purpose.
A folder with all the files that make up the application—HTML and JavaScript files.
A browser to view the results.
