Developer

Getting started with WebGL

Ryan Boudreaux introduces the WebGL standard for 3D-rendering and provides utilities, libraries, and frameworks as resources. He also provides examples of projects that use WebGL.

Web Graphics Library (WebGL) is the new standard for 3D-rendering on the web, allowing web developers to create game animations, data visualizations, product displays, and more using JavaScript API's, a modern web or mobile browser, and a standard web technology stack.

WebGL is part of the Khronos Group consortium of open standards for graphics, media and parallel computation. The organization's sole purpose is creating open standards to enable the authoring and acceleration of graphics, rich media, and parallel computation on a wide variety of platforms and devices. WebGL is web technology that brings hardware-accelerated 3D graphics to the browser without installing additional software in most cases. WebGL is one of the fifteen working groups within the consortium, and is designed as a JavaScript binding to OpenGL ES within a browser on any platform supporting the OpenGL or OpenGL ES 2.0 graphics standards for the web. WebGL is uncovered through the HTML5 Canvas element as Document Object Model (DOM) interfaces.

Implementations

Current implementations include the following desktop browsers:

  • Mozilla Firefox 8.0 and newer versions
  • Google Chrome 13.0 and newer versions
  • Safari 5.1 and newer versions installed on Mac OS X Lion and Mac OS X Snow Leopard implemented support for WebGL
  • Opera 11 and 12 alpha (pre-release)
  • Internet Explorer - Microsoft has not announced any plans to support WebGL; however, there are plug-ins available to add support for WebGL to Internet Explorer 6.0 and newer versions.

And the following mobile browser implementations include:

  • Nokia N900 - WebGL is available in the PR1.2 firmware update.
  • BlackBerry PlayBook - WebGL is available via WebWorks and browser in PlayBook OS 2.0
  • Firefox for mobile - WebGL is available for Android devices
  • The Sony Ericsson Xperia range of Android smartphones has had WebGL capabilities following a firmware upgrade.
  • Opera Mobile 12 final supports WebGL (on Android only)

Developing and programming for WebGL content

Plenty of resources abound for getting started with WebGL coding; in fact, most online tutorials or books and references start with using the HTML5 Canvas element along with JavaScript to get the basic graphics going on the browser. There are utilities, libraries, and frameworks that give the WebGL developer options for programming graphics and games.

Available WebGL utilities:
  • WebGL Playground: Offers a straightforward way to edit and view the results in a browser. Just type in your code to the editor and view your results in the "Run" screen. There is no need to switch between the editor and the browser, and no need to set up the skeleton code. All necessary things are added behind the scenes.
JavaScript Utilities: WebGL Matrix Libraries:
  • Sylvester - Vector and Matrix Math for JavaScript library
  • webgl-mjs - JavaScript vector and matrix math library, optimized for WebGL usage
  • gl-matrix - JavaScript Matrix and Vector library for High Performance WebGL apps
WebGL Frameworks:
  • Canvas 3d JS Library - The Canvas 3D JS Library (C3DL) is a JavaScript library that makes it easier to write 3D applications using WebGL.
  • GLGE - GLGE is a JavaScript library intended to ease the use of WebGL; which is basically a native browser JavaScript API giving direct access to openGL ES2.
  • Jax - Jax is a complete WebGL development environment with emphasis on productivity, getting you to implementation with little time and effort.
  • X3DOM - Pronounced X-Freedom, this is an experimental open source framework and runtime to support the ongoing discussion in the Web3D and W3C communities how an integration of HTML5 and declarative 3D content could look like.

Examples of WebGL in Action

WebGL Water - An interactive pool of water with a sphere which can be moved around, creating ripples and waves. Moving the cursor also creates a ripple effect. Features include ray traced reflections and refractions, analytic ambient occlusion, height field water simulation, soft shadows, and caustics. A screen shot of the WebGL Water as displayed in Chrome 18.0.1 is seen in Figure A below.

Figure A

Google Books Bookcase - A rotating multi-level carousel of books allows you to browse thousands of titles from Google Books, with search options by subject, and default opens to bestsellers. Click on the current subject heading, and then select from twenty-eight subjects including Biographies and Memoirs, Computers and Internet, Fantasy, Fiction, History, Reference, and others. Click on a book cover and the volume expands to a larger view; then, click on the cover, and it opens up to reveal a synopsis, and a link to order the book. A screen shot of the Google Books Bookcase History section as displayed in Chrome 18.0.1 is seen in Figure B below.

Figure B

ROME "3 Dreams of Black" - An interactive film by Chris Milk and some friends at Google that showcases the creative potential of WebGL; move the mouse around to view varying angles of the film as it progresses. A screen shot of the film section as displayed in Chrome 18.0.1 is seen in Figure C below.

Figure C

Floating Shiny Knot - By Jaume Sanchez, this is a demo of a shader to use equirectangular panoramas straight from Google street view as environment mapping textures. The technology used includes WebGL, HTML5 canvas,  and JavaScript. The WebGL application uses millions of environment map textures with Google Street View panoramas, and has a click and drag panorama viewer. Use the mouse wheel to zoom in and out, use the search box to find addresses, or click on the map to select a new location. You can create your own environment maps after following the tutorial by Paul Lewis. Each location has a unique URL which you can share. For example, the view in Figure D is Taos, NM as displayed in Chrome 18.0.1.

Figure D

WebGL Aquarium - By Greggman and Human Engines, it allows you to select the number of fish. Use the mouse to change various settings, click the * to bring up more settings, press SPACE to change the view, and press L for sharks with lasers. The page also provides the actual frames per second rendering. The sample view as displayed in Chrome 18.0.1 is seen in Figure E below.

Figure E

There are plenty of other WebGL examples and experimental applications available on the web, and you can see many more at the Google WebGL Experiments, which is a showcase for creative web experiments which are built with technologies including HTML5, Canvas, SVG, and WebGL.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks