Another 10 WebGL sites that will blow you away

WebGL, then. It's been around a while, and it looks like it's here to stay. As you've hopefully seen it's incredibly powerful, capable of pushing around thousands of polygons and particles all the while giving us tons of visual goodies. It's fair to say I'm a big fan and, if Twitter reactions are anything to go by, so are a lot of other people!

Right now virtually all the major browser manufacturers support WebGL in their browser, although sometimes it needs to be enabled manually. So that's Chrome, Firefox, Safari and Opera that will all let you see the wonder of WebGL. Still no word on Internet Explorer yet, although hope springs eternal!

About a year ago we ran a feature on 20 WebGL sites that will blow your mind. In internet terms a year is a phenomenally long time, so what we thought we'd do is take a look at what's new. So once again sit back, crank up your latest browser and feast your eyes on these beauties!

Advertisement

1. WebGL Water

Shall we start things off with a big splash? Yes, let's! (Pun intended, groan away) 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 I have written a two-part primer on them: Intro to Shaders – part 1 and part 2.

2. Lights

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.

You can read more about Lights in our "behind the scenes" feature.

3. WebGL Terrain Editor

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.

4. Google Maps Cube Game

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.

No discussion on WebGL is complete without mentioning Mr. doob's Three.js library at some point, and this is no exception: the Maps Cube game makes use of Three.js for its gorgeous rendering. 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.

5. Animated Volume Particles

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.

6. 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.

7. 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.

8. Particle Morph

WebGL has the ability to push around a lot of 3D points, as you'll see in OutsideOfSociety's Particle Morph demo. In the demo you'll see 85,000 particles morphing between shapes, all of which should run silky smooth for anyone using a relatively new computer. The key to this kind of performance is actually to move as many of the calculations from the JavaScript and into the WebGL shaders.

Despite JavaScript's phenomenal speed in today's browsers, shaders are optimised for calculations common to 3D work, so we should use them in preference to the JavaScript where we can. If we do our calculations inside WebGL's shaders, as OutsideOfSociety is doing in this demo, we're also increasing the GPU's utilisation and freeing up the CPU (and therefore our JavaScript) to focus on other tasks. Hello performance increases!

9. Chaos to Perfection

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!

10. 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.

Conclusion

I hope you agree that in the last year some amazing WebGL sites and demos have 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!