Since the demise of the Flash Player’s ubiquity, it’s like the Wild West out there for rich media web developers today. There is a whole world of new technologies that allow for animation and rich interactivity on the web. These include jQuery, Canvas, CSS3 transitions, Unity and WebGL. Unfortunately none of these work across all platforms so we are back to the days of creating multiple versions of our content and switching them out based on browser detection.
One of the most exciting new technologies is WebGL. WebGL is a open-standard browser implementation of OpenGL – the graphics API that is used just about everywhere. The strength of WebGL is that it uses hardware acceleration to allow for complex, high frame-rate 3D animations and games. WebGL is scripted with JavaScript.
WebGL is currently supported in Chrome 9+, Firefox 4+ and Safari OSX 10.6+. Since Google turned on WebGL support for the current release version of Chrome, this means anyone can view WebGL content on the web for free. As this is a new technology it’s a little flakey. Some of these demos may hog your machine resources, also you may need to restart your browser now and again.
Three.js
WebGL is low level API that provides a lot of flexibility and power with the trade-off that it can take a lot of code to make a simple scene. Luckily the ubiquitous Mr Doob has built a very nice JavaScript Library that allows you to easily utilize WebGL: Three.js. Three.js provides the option to choose a Canvas Renderer or a WebGL renderer. Download the library including many WebGL examples here.
WebGL Demos
Here are some demos from around the web that show the potential of WebGL. Use the latest Google Chrome to view them. Let me know in the comments if I’ve missed any good ones.
Three.js/WebGL demos from AlteredQualia.
FractalLab – insane 3D fractal visualizer from subblue.
Demoscene style shader effects from Frank Reitberger.
WebGL demos from Evgeny Demidov
Learn More
- Three.js – get source and examples.
- Learning WebGL – great set of tutorials for low-level WebGL dev.
Latest Tweets
Nice collection! WebGL is definitely one of the coolest web technologies around.
You can find more related resources at the jswiki.
It might be cool if you could cover some of those other libs in a later post or so.
Good info. Thx, Felix!
Some cool interactive 3D done with HTML5/CSS/SVG at http://codinginparadise.org/projects/html5-3d-slides/html5.html
[…] Posted WebGL Roundup. […]
[…] out http://www.airtightinteractive.com/2011/03/webgl-roundup/ for a good list of things to check out. about Soviet Hardball covers the new media arms race […]