Join the 3D revolution. Giles Thomas and Paul Lewis round up some of the best WebGL sites and provide a few handy tips along the way.
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 and mobile websites couldn't use them - meaning slow, low-quality graphics, almost always in 2D.
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.
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 net magazine's report on the project here.
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.
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.
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.
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.
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.
WebGL has not been around, even in the very earliest pre-beta versions, for very long, 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.
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...
On the subject of games, Jerome Etienne's PacMaze might seem familiar from somewhere...
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
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.
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!
Our next 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.
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.
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.
21. WebGL Water
WebGL Water is an experiment by Evan Wallace and it features an interactive scene of a ball in a pool complete with reflections, refractions, caustics and ambient occlusion.
The key to Evan's demo is that he is doing the heavy lifting for the various effects inside the WebGL shaders. Shaders are compiled programs - written in GLSL - that run on the GPU whenever you draw a scene in WebGL and they're heavily optimised for the kinds of calculations that underpin these effects. If you're interested in learning about shaders, find out more here: Intro to Shaders part 1 and part 2.
Lights is an interactive music video created by the lovely folks over at HelloEnjoy featuring the song of the same name by Ellie Goulding. The site flies you over a pulsating and colourful landscape and shows the Twitter usernames of people who have tweeted about the site.
Created by Rob Chadwick, the WebGL Terrain Editor is an incredibly impressive technical piece. The demo allows you to craft your own landscapes in real-time and it features some gorgeous effects like volumetric shadows, ray-traced soft shadows and ambient occlusion. In short, WebGL experiments rarely come prettier than this one!
This demo uses some newer features in WebGL so to see it you'll need a modern GPU to get it to run, and a hefty one to get it running well.
The Google Maps team joined with B-Reel to make the Google Maps Cube Game, where you help a small blue ball navigate the streets of New York, Tokyo, Paris and San Francisco (among others). As you move your mouse the cube rotates and the ball rolls down the streets, bouncing off buildings and making its way towards the goal.
The Maps Cube game makes use of three.js for its gorgeous rendering. As we've mentioned above, if you're considering doing some WebGL work in a commercial setting three.js is a really good place to start; it's a very nice library that will save you a lot of headaches.
Mikael Emtinger was part of the team behind last year's Rome music video. Off the back of that he went on to create a WebGL wrapper focussing on the creation of shaders, called GLOW. Animated Volume Particles is one of the samples that shows off the power of both WebGL and GLOW by simulating a host of 3D particles passing though an animated animal. It sounds weird, it is weird, but it looks amazing.
As the simulated particles pass through the animal its shape shows through. All the work for this, like the WebGL Terrain Editor and WebGL Water demos, is done in the shaders. Not surprising given that's GLOW's emphasis!
In particular this demo uses texture lookups inside the vertex shader, which is a newer feature to WebGL and allows for the shader doing the vertex manipulation to read and write textures with floating point values. If that all sounds a little crazy you can read through the tutorial for this and the other examples for GLOW.
26. WebGL Cars
WebGL Cars is a demo created by Three.js co-author AlteredQualia. As is typical for his demos it is visually impressive and pushes the boundaries of what can be achieved in WebGL. In WebGL Cars you can drive around two high-polygon cars around a scene. The demo itself boasts real-time reflections, shadow maps and an impressive post-processing motion blur effect.
To create post-processing effects in WebGL requires drawing the scene a few times, each time drawing into a distinct image texture. When that is done they are composited together for the final result. There is a lot of skill required to ensure that each of these render passes is done in the correct order and that the number of individual renders is kept to a minimum. Perhaps unsurprisingly, given he is one of the co-authors of Three.js, AlteredQualia is extremely good at creating and combining these effects.
27. Nouvelle Vague
The premise of Nouvelle Vague by ultranoir is relatively simple: take some tweets and put them into a 3D landscape. That, however, doesn't do justice to this particular site. Nouvelle Vague has all manner of flying vehicles, such as a biplane, an airship and some balloons. All of these brilliantly realised models – built and animated in Blender by artists and then imported into the WebGL scene – carry the tweets and circle around a giant central statue. It's very surreal site and it's very well made.
28. Particle Morph
Chaos to Perfection, made by Les 84 in conjunction with the Google Cultural Institute and the palace itself, is described as an "interactive stroll around the Palace of Versailles" and that, to be fair, is exactly what it is.
As you launch the site you are greeted with a soundtrack and given a tour of some of the features of the palace, but it's in the execution this project really shines. As you float around the palace's various settings looking at its high fidelity architecture and pieces the scenes effortless blend together resulting in a very cinematic feel.
It's also worth noting that under the hood the site makes use of Three.js. That library gets everywhere, I tell you!
30. CNN Ecosphere
Visualisations are great, and that's exactly what CNN's Ecosphere is. The site aggregates tweets tagged with #RIO20 and groups them into appropriate topics and discussions such as 'climate' or 'sustainability', then it presents them as trees projecting out from a planet's surface.
The trees themselves are coloured differently and WebGL's additive blending is enabled resulting in a lovely glowy feel. Despite the large number of particles and lines on screen at any one time the framerate remains high which is testament to both the power of WebGL and the coding behind this site.
I hope you agree that some amazing WebGL sites and demos have now been released. As support continues to increase on desktop and - soon - mobile, expect to see even more immersive and impressive WebGL-based sites.
If you've never played with WebGL, there's never been a better time to get started. If you want to play with WebGL directly you should check out the lessons on the Learning WebGL blog, or if you want to play with three.js there's a tutorial for that, too!
Giles Thomas is a London-based developer working on Python cloud applications (pythonanywhere.com) and WebGL. His site Learning WebGL (learningwebgl.com) has tutorials and regular links to what's new in the WebGL world, and he can also be found on Twitter as @gpjt.
Paul Lewis works for Google as a Chrome Developer advocate. He's heavily focused on helping devs fix rendering performance issues. Follow him on Google+
This is an updated and extended version of an article that previously appeared on Creative Bloq.