Game Development Reference
In-Depth Information
WebGL
Perhaps no other HTML5 feature is as exciting for game developers as WebGL. This
new JavaScript API allows us to render high performance, hardware accelerated 2D
and 3D graphics. The API is a flavor of OpenGL ES 2.0 and makes use of the HTML5
canvas element in order to bridge the gap between the browser and the graphics pro-
cessing unit in the user's computer.
While 3D programming is a topic worthy of its own topic, the following overview is
sufficient to get us started on the most important concepts, and will allow us to get
started with 3D game development for the browser platform. For those looking for a
good learning resource for OpenGL ES 2, take a look at
OpenGL ES 2.0 Program-
ming Guide by Munshi, Ginsburg, and Shreiner
.
Note
Since WebGL is heavily based on OpenGL ES 2.0, you may be tempted to look
for reference and supplemental material about it from OpenGL topics and other
sources. Keep in mind that OpenGL Version 1.5 and earlier is significantly differ-
ent than OpenGL 2.0 (as well as OpenGL ES 2.0, from which came WebGL) and
may not be a complete source of learning, although it may be a decent starting
point.
The major difference between the two versions is the rendering pipeline. In earlier
versions, the API used a fixed pipeline, where the heavy lifting was done for us be-
hind the scenes. The newer versions expose a fully programmable pipeline, where
we need to provide our own
shader
programs in order to render our models to the
screen.
Hello, World!
Before going any further into the theoretical side of WebGL and 3D programming,
let's take a quick look at the simplest possible WebGL application, where we'll simply
render a yellow triangle against a green background. You will notice that this takes
quite a few lines of code. Keep in mind that the problem that WebGL solves is not a
trivial one. The purpose of WebGL is to render the most complex of three dimension-
