1. Technology

Welcome to the 3D Web - 8 Mind-blowing WebGL Demos


The web is 3D—it's interactive, it's real-time, and getting prettier and prettier every day.

It's been this way for a few years now, and yet, many people continue to think of their browser-window as a 2D canvas. I'm often guilty of it myself, to the point where the latest-greatest 3D browser demonstrations still sneak up on me and leave me in disbelief. It's incredible how far web-technology has come in the past three or four years, and it's hard to imagine where we'll be in a few more.

WebGL, is a JavaScript framework that allows real-time 3D graphics to be rendered directly within your web-browser. The technology has been widely available since early 2011, but it's just now beginning to penetrate the mainstream consciousness.

A few really nice WebGL demonstrations have come to my attention in the past couple days that I hadn't seen before, so it seemed like this would be a good time do do a little WebGL showcase so that the folks who haven't yet been exposed to the 3D web can get on-board.

Note: To run WebGL applications you'll need a relatively recent version of Google Chrome or Firefox. Although I'm a Firefox user on a day to day basis, it's a bit more finicky about running WebGL presentations. I recommend Chrome in this case.

1. Chrysaora (Jellyfish)

We recently covered this project in our Siggraph Tech Papers article, but it's also relevant here. Aleksandar Rodic's 3D jellyfish simulation is stunning. It's definitely one of the best looking WebGL demos we've come across, with beautiful animation and a level of visual polish that makes it look like it could've come right out of a stand-alone game engine.

Interactivity is relatively limited, not much more than a rotating camera, but graphically this is just fantastic. Aleksandar provides a really nice debug console, where you can play with parameters and view all the different compositing layers separately.

2. Ellie Goulding - "Lights"

Of all the interactive music videos we've seen released in the past year or two, this one is my favorite. Interaction is simple enough that it doesn't disrupt the listening experience, but sophisticated enough that it adds to the overall experience. The 3D visuals are polished to a consistent level and the aesthetics continually evolve throughout the course of the video.

Of course, it doesn't hurt that I happen to enjoy Ellie Goulding's music.

3. Google Maps Cube

Leave it to Google to put a new spin on cube-mapping!

"Cube” is essentially a game of labyrinth built on the Google Maps API. Although 3D content is relatively commonplace in Google Earth these days, we haven't seen anything quite like this. It serves less as a demonstration of the platform's graphical prowess, and more as a testament to how robust WebGL interactivity can be. Although game play is relatively thin, the user experience runs flawlessly.

It's a demo worth checking out, and raises the question—what else can be done with Google Maps? I honestly didn't have the patience to work through all 18 levels, but I hear there's a nice surprise on the final stage.

4. Rome

This is probably the most ambitious WebGL project we've seen, which plays as both an advantage and a disadvantage.

You can't criticize the scope of what the developers were trying to accomplish, but overall the experience was just a little too inconsistent for my taste. Compared to HelloEnjoy's "Lights" music video where everything is streamlined and cohesive, there are moments in Rome where it feels like might be a few too many ideas fighting for your attention.

But it's a magnificent demonstration of WebGL's technical capabilities, and anyone remotely interested in the technology absolutely needs to see it.

5. WebGL Terrain

Out of everything we've seen so far this one is probably the most graphically satisfying to me. The textures and procedural animations are beautiful, and depth of field effects are incredibly well implemented. Like Aleksandar Rodic's jellyfish, interactivity here is fairly one-note, but the visuals are drop dead gorgeous.

6. CNN Ecosphere

When I launched this it actually took a second for me to realize what I was looking at. I knew it was a twitter visualization, but I didn't immediately recognize that every single point in the cloud was an individual tweet. We've seen a lot of Twitter visualizations in the past, but this is definitely among my favorites. They visual style meshes incredibly with the ecological theme, which in my opinion, is the mark of a really good visualization.

7. 80,000 Particles

I clicked through to this from concept artist Noah Bradley's twitter feed sometime last week, and I'm not kidding when I say I must've sat for ten minutes just absolutely mesmerized by what I was seeing.

I took a beginner level programming course a few years ago, and for my final project I actually attempted to code something relatively similar to this using the Processing language. But my attempt was completely amateurish, and I didn't get anywhere near what was accomplished here.

8. Fractal Lab

Unfortunately, I haven't had a chance to play with this yet, but the preview video on Vimeo is just... wonderful. As you'd expect from the title, the app is designed to be a fractal viewer—except the fractals are 3D. And interactive. And raytraced.

At some point there was public beta testing for this, so if anyone has had a chance to mess around in Fractal Lab, I'd love to hear your experiences. Feel free to leave a comment on the blog, or drop me a message on Twitter. I'm not sure I've seen another WebGL demo that has me more excited than this one.

  1. About.com
  2. Technology
  3. 3D
  4. 3D Software
  5. Welcome to the 3D Web - 8 Mind-blowing WebGL Demos

©2014 About.com. All rights reserved.