Peter Lubbers - Pro HTML 5 Programming

260
CHAPTER 11 ■ THE FUTURE OF HTML5
will be incremental, with specific features and their specifications evolving individually, rather than as a
consolidated effort. Browsers will take up features as they gain consensus, and the upcoming features
might even be widely available in browsers well before HTML5 is set in stone. The community
responsible for driving the Web forward is committed to evolving the platform to meet the needs of users
and developers.
WebGL
WebGL is an API for 3D graphics on the Web. Historically, several browser vendors including Mozilla,
Opera, and Google have worked on separate experimental 3D APIs for JavaScript. Today, WebGL is
progressing along a path toward standardization and wide availability across HTML5 browsers. The
standardization process is taking place with browser vendors and The Khronos Group, the body
responsible for OpenGL, a cross-platform 3D drawing standard created in 1992. OpenGL, currently at
specification version 4.0, is widely used in gaming and computer-aided design applications as a
counterpart and competitor to Microsoft’s Direct3D
As you saw in Chapter 2, you get a 2D drawing context from a canvas element by calling
getContext("2d") on the element. Unsurprisingly, this leaves the door open for additional types of
drawing contexts. WebGL also uses the canvas element, but through a 3D context. Current
implementations use experimental vendor prefixes (moz-webgl, webkit-3d, etc.) as the arguments to the
getContext() call. In a WebGL-enabled build of Firefox, for example, you can get a 3D context by calling
getContext("moz-webgl") on a canvas element. The API of the object returned by such a call to
getContext() is different from the 2D canvas equivalent, as this one provides OpenGL bindings instead
of drawing operations. Rather than making calls to draw lines and fill shapes, the WebGL version of the
canvas context manages textures and vertex buffers.
HTML in Three Dimensions
WebGL, like the rest of HTML5, will be an integral part of the web platform. Because WebGL renders to a
canvas element, it is part of the document. You can position and transform 3D canvas elements, just as
you can place images or 2D canvases on a page. In fact, you can do anything you can do with any other
canvas element, including overlaying text and video and performing animations. Combining other
document elements and a 3D canvas will make heads-up displays (HUDs) and mixed 2D and 3D
interfaces much simpler to develop when compared to pure 3D display technologies. Imagine taking a
3D scene and using HTML markup to overlay a simple web user interface on it. Quite unlike the
nonnative menus and controls found in many OpenGL applications, WebGL software will incorporate
nicely styled HTML5 form elements with ease.
The existing network architecture of the Web will also complement WebGL. WebGL applications
will be able to fetch resources such as textures and models from URLs. Multiplayer games can
communicate with WebSockets. For example, Figure 11-1 shows an example of this in action. Google
recently ported the classic 3D game Quake II to the Web using HTML5 WebSocket, Audio, and WebGL,
complete with multiplayer competition. Game logic and graphics were implemented in JavaScript,
making calls to a WebGL canvas for rendering. Communication to the server to coordinate player
movement was achieved using a persistent WebSocket connection.