Professional HTML5 Mobile Game Development

Going 3-D with WebGL

One of the biggest drawbacks to canvas-based gaming is that it’s stuck in two-dimensional flatland. Sure, you could build your own 3-D rendering and rasterization engine in JavaScript on top of 2-D canvas, but the performance would not be suitable.

Luckily there is help coming down the pipeline. WebGL, which is a web-based version of OpenGL ES, is a specification that enables hardware-accelerated 3-D in the browser. OpenGL ES, which is short for OpenGL for Embedded System, is the smaller, more power-consumption-friendly cousin of the desktop OpenGL standard that has powered various types of 3-D software (including games) for the past two decades.

OpenGL ES has been available via native APIs on iOS and Android and powers the 3-D games you see in the app stores. Exposing a JavaScript-based API via WebGL means that HTML5 apps can create detailed 3-D scenes and games in the browser without plug-ins. To access a WebGL canvas in a supported browser, you simply need to create a standard canvas element and then request a webgl context instead of the standard 2-D context.

NOTE WebGL is a standard proposed by the Khronos group, and you can find up-to-date details on the Khronos.org website: www.khronos.org/webgl/.

WebGL provides a low-level API for generating 3-D scenes, relying on shader programs written in a specialized shader language called WebGL Shader Language (GLSL) that is based on C. Unless you have experience writing GPU shaders, working with WebGL can ...