5 Incredible WebGL Demos

Making The Web Faster With SPDY

WebGL or Web Graphics Library is a means through which the browser can interface directly with the GPU. This gives web designers and developers access to all the graphical horsepower that users have become accustomed to in desktop applications. Browser support is still a work in progress; you have to enable it in desktop Safari, it’s still on its way in IE with version 11, and it’s not available at all on mobile devices. That said, it’s still remarkable tech that the web community should be monitoring.

In my two previous blog posts I’ve been talking about WebGL and how to use it, so I thought it would be worth writing a post that helps articulate what all the fuss is about. In my research, I’ve come across quite a lot of examples and demos, but these 5 are amongst my favorites.

Just a Reflektor

Screenshot from the Reflektor homepage of a woman writing the word Reflektor in chalk.

See the Demo

Google teamed up with the band Arcade Fire for their latest music video. Just a Reflektor is an experience unlike any other. When you first start the experience, you’ll be asked to link your smartphone via a special code (although your mouse can be used in place). You may also need to allow access to your webcam.

Once the video begins, you’ll immediately notice that this is not a normal music video. By moving your mouse around, you can adjust various real-time filters and effects. I don’t want to spoil any surprises, but the way they integrate your webcam imagery is simply remarkable. I’ve seen a lot of webcam demos in WebGL, but it’s just slightly more artistic in this case. Best of all, the entire project is completely open source, so you can see how they built everything.

Epic Citadel

Screenshot of a medieval castle with banners flying on the sides.

See the Demo

Mozilla collaborated with Epic Games and managed to port the Unreal Engine 3 to JavaScript. Of course, these efforts demand an awesome demo, so they put together Epic Citadel for your jaw-dropping amusement. This demo was originally created with Firefox in mind, but it works great in the latest version of Google Chrome as well. A decent graphics card helps, too.

Cube

Screenshot of a cube with a 3D map on all sides.

See the Demo

This WebGL game is a case where technology (Google Maps) inspired art (this video) which then inspired more technology (the Google Maps cube game). There are many WebGL games out there, but I think this is one of the most innovative. It takes the familiar elements of Google Maps and analog labyrinth games and combines them in a wonderfully polished experience. I think the thing that I like the most about this demo is the feel of the controls. After looking at lots of WebGL demos, I’ve noticed that the controls can really make or break an experience, even if the graphics are amazing. Cube gets it right.

From Dust

Screenshot from the game From Dust. A tribe chants around a floating black orb.

See the Demo

The game From Dust might sound slightly familiar. That’s because it was originally released just a couple years ago on some of the more traditional gaming platforms. Ubisoft has ported the game to WebGL and created an incredibly polished browser-based game; the best I’ve ever seen. The gameplay is fairly amusing and original, but the fact that so many amazing effects and controls are implemented in a web browser is nothing short of amazing.

Acko.net

Screenshot from Acko.net of a graffiti style logo that spells Acko.net

See the Demo

This demo may not seem as impressive as some of the others here, but it’s actually my favorite WebGL example on the web right now. Acko.net has employed a 3D logo for some time, but in the latest redesign, the header was given a WebGL makeover. This is my favorite example of WebGL because it shows how 3D can be used in the practical setting of a website or software application. It’s a fancy logo, but it doesn’t get in the way of the experience and functionality of the rest of the site. WebGL is great for creating games and cool WebGL demos, but I’d love to see more examples like this where 3D is used sparingly and tastefully in the traditionally 2D web platform.

If you have any other cool demos that you’ve come across, please share them in the comments!

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

6 comments on “5 Incredible WebGL Demos