WebGL, released earlier this year, is the new standard for
high-quality 3D graphics in web pages. Giles Thomas of LearningWebGL.com
rounds up 20 of the best sites so far.
Almost all modern computers and most smartphones have powerful
GPUs, graphics processors that often have more number-crunching power
than the CPU. But until recently web pages couldn't use them — meaning
slow, low-quality graphics, almost always in 2D.That all changed when WebGL was released in the latest versions of Firefox and Chrome. WebGL, based on the well-known OpenGL 3D graphics standard, gives JavaScript plugin-free access to the graphics hardware, via the HTML5 canvas element — making realtime 3D graphics in web pages possible.
Apple are supporting the standard too, so we can (hopefully!) expect to see it cropping up in Safari on Macs, iPhones and iPads sometime (though probably not soon) — and Opera are testing their own version, so the only holdout is Microsoft.
So sit back, crank up your latest browser, and check out these demos — if you think you can do better, go for it: there are some hints and tips on how at the end.
01. ROME: "3 Dreams of Black"
"3 Dreams of Black" is a semi-interactive film by Chris Milk, using technology developed by Google and others, featuring the song "Black" from the album ROME by Danger Mouse and Daniel Luppi, with Norah Jones and Jack White. It takes you through three separate dreams, mixing 2D and 3D computer graphics with video. It works best on Chrome. Read our report here: www.netmagazine.com/news/rome-project-showcases-webgl.
02. Flight of the Navigator
Created by the Mozilla Audio API team, the Flight of the Navigator is a non-interactive music video rendered in real-time in JavaScript and WebGL, with Twitter and Flickr integration. You can read all about how it was created on David Humphrey's blog.
03. No Comply
No Comply is another WebGL demo from the Mozilla Audio API team, mixing video and graphics with a very 1980s-computer-game-meets-the-Matrix vibe. Because it uses certain new non-standard Firefox features for the audio, unfortunately it currently only works in Firefox. You can read more about how it was created in this article by Paul Rouget at hacks.mozilla.org.
04. 3Dtin
Most tools for building 3D content are hard to use — expert-friendly but beginner-hostile. 3Dtin is easy to get started with, letting you create shapes with a natural voxel-orientated (think 3D pixel) approach. And once you've created your design, you can export it to reality using 3D printing services from i.materialise.
05. Chemdoodle
As you'd expect with a new technology, there are a lot of people using WebGL to do cool demos, and fewer real tools. Chemdoodle is an exception to this. iChemLabs, a scientific visualisation company, has put together tools for viewing molecules in web pages; this demo page lets you pick one of a number of medicines and see a 3D representation of its chemical structure in the browser.
06. The Biodigital Human
Keeping with the medical theme, while Google's Body Browser got a lot of press when it came out, I prefer the Biodigital Human from Biodigital Systems and Lindsay Kay. Want to see the skeleton and the blood system? Just click the buttons. Also worth a look is ibrainovative's Heart Browser — gloopy.
07. Shader Toy
On to something more fun! Since the 80s, wild-eyed creators on the boundary between hackerdom and digital art have shared their creations in the demoscene. Some really cool ones have been written for or converted to WebGL (low.fi/~visy/webgl/mkultra/, low.fi/~visy/webgl/iloinen_paiva/, possan.se/junk/webglass/index.html and www.backtothepixel.com/demos/js/webgl/704_webgl.html), but here's the most enjoyable: Inigo "iq" Quilez's Shader Toy, which packages together a whole bunch of the best OMG-how-did-they-do-that-in-so-little-code examples.
08. FractalLab
While we're looking at lovely graphics... Tom Beddard, aka subblue, is well known for his amazing 3D fractals and FractalLab is his WebGL creation, computing everything it shows you in real time on your computer. Warning: if you don't have a very fast graphics card, you might have to wait a while when starting it up, and it might look like your browser has hung for a few moments. It's worth it, though.
09. The Musical Solar System
WebGL's only been around, even in the very earliest pre-beta versions, for 18 months or so, so Jacob Seidelin's Musical Solar System from late 2009 is the closest there is to an old classic: astronomy, techno music and at least one terrible joke, in a demoscene style.
10. Chrysaora
Another beautiful scene, but slightly more peaceful, is Aleksandar Rodic's Chrysaora — a sea of floating jellyfish, all simulated on your computer. Also, don't miss the video he did showing a (sadly not public) version that is controllable by a Kinect!
11. Angry Birds
When Rovio decided to create a web version of Angry Birds, it made a smart decision: a low-resolution (SD) version based on the non-hardware-accelerated 2D Canvas, and then WebGL for the HD version. But I don't know why I'm writing this anyway: you've already clicked through and started playing, haven't you? See you in an hour or five...
12. PacMaze
On the subject of games, Jerome Etienne's PacMaze might seem familiar from somewhere...
13. CycleBlob
Another new twist on a familiar-looking game is Shy Shalom's CycleBlob, based on the lightcycles scene from TRON but set on a series of increasingly complex surfaces.
14. Quake 3 ... almost
The last game we have is less playable, but more graphically impressive — developer Brandon Jones converted a level from Quake 3 to a WebGL demo, complete with music. It’s fun to run around in, even if you can't play it properly.
15. Remixing Reality
Moving away from games, Ilmari Heikkinen and Patric King's Remixing Reality is a brilliant example of video-processing in the browser. The movie just has someone pushing a few bits of paper around on a table. But the JavaScript code in the page scans the movie for the very particular patterns printed on the paper, and lets you overlay them with a choice of 3D shapes. First steps towards augmented reality on the web.
16. The WebGL aquarium
Everyone over a certain age will remember when a simulated aquarium was the coolest possible screensaver for your computer. But those never had sharks with frickin' laser beams! The WebGL aquarium was created by Human Engines and Google's Gregg Tavares.
17. 3DF33D
3DF33D, by General 3D, is like YouTube, but for 3D video. Perhaps a bit confusingly, by default it displays stuff in 2D; click on the "Current 3D mode" at the top of the page to switch it into one of various display modes, including the traditional red-blue "anaglyph" style. Once you've done that, put on your 3D glasses and enjoy the show!
18. three.js
Our last three sites are all about how to create your own WebGL pages. WebGL has a very stripped-down programming interface, which makes it much easier for the browser makers to get right and to properly standardise, but harder for programmers to create things, especially when you're first getting started. A number of great developers have spent a lot of time on making frameworks that make things easier for other developers, and one of the most prominent is three.js, originally created by Mr.doob.It was used in "3 Dreams of Black" (for which Mr.doob was technical director), and is a popular choice for people learning 3D for the first time. There are tons of great demos for it out there (it even has its own sub-Reddit, where people can show off their creations!) but here are four of my favourites: the wobble dance by Thierry Tranchina, HelloRacer from design studio HelloEnjoy, Lee Perry-Smith's head by Mr.doob himself, and a Fresnel shader from AlteredQualia.
19. GLGE
The other big-name framework for making WebGL easy to program for is Paul Brunt's GLGE. It's targeted less at shiny demos, and more at games, museums and other kinds of applications where you want to move around a 3D scene. A great example is Wloom, a game in development from someone known only as Pl4n3.
20. OurBricks
Finally, if you're building a 3D world, you'll want something to put in it! OurBricks, from Katalabs, is a great source of licensed 3D content.