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.
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
- 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.
- J3DI.js - Basic WebGL J3DI helpers utility
- J3DIMath.js - J3DI Math Classes utility
- 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 ActionWebGL 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 AGoogle 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 BROME "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 DWebGL 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.
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.