3DFeature

30 amazing examples of WebGL in action

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.

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.

Tech support

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. 3 Dreams of Black

 3 Dreams of Black
This piece of WebGL features the song Black by Danger Mouse and Daniel Luppi

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.

02. Flight of the Navigator

 Flight of the Navigator
Flight of the Navigator is rendered in real-time in JavaScript and WebGL

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
No Comply from the Mozilla Audio API team has an '80s video game vibe

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

 3Dtin
3Dtin is great for beginners as it is easy to get started with

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

 Chemdoodle
Chemdoodle lets you see chemical structures in 3D

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

 Biodigital Human
See the skeleton and the blood system with 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

 Shader Toy
Shader Toy packages together a selection of WebGL demos

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

 FractalLab
Fractals make everything more awesomer - fact

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

 Musical Solar System
Musical Solar System dates way back to 2009. Can you remember that far back?

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.

10. Chrysaora

 Chrysaora
A sea of floating jellyfish, all on your monitor

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

 Angry Birds
Angry Birds is a... you KNOW what Angry Birds is! And here it is in WebGL

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

 PacMaze
WebGL-based 3D Pac-Man-style game goodness

On the subject of games, Jerome Etienne's PacMaze might seem familiar from somewhere...

13. CycleBlob

 CycleBlob
Tron-type game CycleBob gets increasingly complex

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.

Advertisement

14. Quake 3 (almost)

 Quake 3
It's Quake 3 but not quite...

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

 Remixing Reality
Remixing Reality is a brilliant example of video-processing in the browser

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

 Aquarium
WebGL aquarium features sharks and other cool stuff

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
Like YouTube for 3D animations - that's 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

 three.js
thrree.js WebGL framework is a great way to get started

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.

19. GLGE

 GLGE
GLGE is another great framework but designed for less shiny demos

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

 OurBricks
OurBricks is a great source of licensed 3D content

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
Live young - have a look at Evan's Water experiment

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.

22. Lights

 Lights
Interactive music video features Ellie Goulding's song 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 net magazine's behind-the-scenes feature.

23. WebGL Terrain Editor

 Terrain Editor
WebGL Terrain Editor is an incredibly impressive technical piece

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.

24. Google Maps Cube Game

 Google Maps Cube Game
Help a small blue ball navigate the streets of a city near(ish) you

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.

25. Animated Volume Particles

 Animated Volume Particles
Weird but amazing - that's 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!

Texture lookups

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

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!

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

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.

Conclusion

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!

Contributors: Giles Thomas and Paul Lewis

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.

Words: Dan Oliver

Dan Oliver is editor-in-chief at Creative Bloq.

Magazine promotion

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection