Treehouse

9 More Mind-Blowing WebGL Demos

By on  

With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo those with this post.  I've found nine more mental WebGL demos that you shouldn't miss.  Enjoy!

1.  WebGL Water

This incredible demo is as fluid as you could believe.  Raise and drop the ball into the water to see realistic, beautiful splashing of the water.  You can also just click the water to see it ripple away.  I'm completely awestruck at how realistic and smooth the animation is in this excellent WebGL demo.  Unreal.

WebGL Demo

2.  Fizzy Cam

Fizzy Cam uses your machine's webcam to display your likeness but with thousands of moving blocks overlaid, giving a fun and artsy feel to the display.  The boxes move with motion so move about as you use the demo and marvel at how creative this WebGL demo is.

WebGL Demo

3.  Blossom

The Blossom demo animates leaves from a tree.  That sounds simple but there's something very realistic about this WebGL treat; the leaves look so real and flow so naturally that you can't help but keep watching.  Call me soft but I think this animation is incredibly beautiful.

WebGL Demo

4.  Teach Me to Fly

Teach Me to Fly is a fun game where your character flies through the air and it's your job to guide him around buildings.  The controls are simple, the game is simple, and yet it's very fun and challenging to play.  The 3D buildings look outstanding and control is spot on.

WebGL Demo

5.  Visualeyezer

This demo features an enormous eye that follows your cursor around the screen, all the while pulsating and changing colors as music plays.  Unsettling?  A bit.  Impressive?  Absolutely.  The detail within the the lessor obvious parts of the eye is what really caught my attention -- fluid, smooth, and consistent.

WebGL Demo

6.  Nucleal

Nucleal is another particle-based animation but this one transcends others.  Choose the amount of particles to use (i.e. how toasted you want your CPU to get) and drag/hold around the animation to view different perspectives.  The particles also animate at and curves to an amazing smoothness.

WebGL Demo

7.  Interactive Globe

This interactive globe is amazingly reactive and practical.  As you drag/pull around the globe, the information labels fluidly display.  The revolving, animating spheres round the globe also add great visual appeal.

WebGL Demo

8.  Google Maps Cube

Google Maps Cube is a game whereby you rotate your cursor around a cube, tipping the cube in a given direction, so as to get a ball to a destination on the map.  This is an interesting, creative use of Google Maps and very well executed.

WebGL Demo

9.  Ellie Goulding's Lights

This demo may be the most impressive of the lot but I have to feature it last to hide my shame in that I really enjoy this...song.  Oh, but the demo.  This demo is outstanding, with lights...lots of lights.  As the music plays in the background, you navigate a beam of light through hills of lights.  Press down on your mouse and the beam of light accelerates.  As the demo continues, more and more lights and colors come into the animation.  I can't recommend this demo enough.

WebGL Demo

I have to say that I believe these nine demos are shocking and possibly better than the original nine.  The great work being done by animators is awe-inspiring and hugely ambitious.  I hope you strive to greatness after seeing these massive demos!

ydkjs-2.png

Recent Features

  • Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else?...

  • Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube...

  • Animating CSS3 Transforms with MooTools Fx

    I recently posted an awesome (if I may say so myself) CSS3 / MooTools tutorials called Create a Photo Stack Effect with Pure CSS Animations or MooTools.  The post presented two ways, a pure CSS method or MooTools-powered class,...

Incredible Demos

Discussion

  1. These are fantastic. The future.. is now… (lol)

  2. Check out our “Realistic Camera Model Demo” in WebGL. One of the most advanced WebGL pieces out in the wild until today: delight-engine.com

  3. Oluwaseun

    Simply Amazing. From the look of things, the browser would become the platform for all rendering in the nearest future.

    Thanks for sharing. I hope other browsers join the parade soon.

  4. Not a WebGL “experience” perse, but if you want to see artists really pushing the boundaries of what is possible in WebGL, take a look at the public gallery by Verold. This model of Archvile from the Doom games, for example, is absolutely incredible:
    http://studio.verold.com/projects/51f41af3a9107602000003cb

  5. parking

    Hi,

    You forgot the best one, the most famous : ro.me (it’s a video clip)

  6. Very cool!

  7. Don’t be ashamed of liking Lights by Ellie Goulding. It is a nice song!

    Also, cool stuff.

  8. These are fantastic. Cool stuff.
    Thanks for sharing.

  9. Amazing, dedication coupled with expertise and a story board would look great, might take few decades to be reality…

  10. #6 would be awesome as a transition between pages/etc when clicking on links and buttons.

    Your information has been submitted… SWOOOOSH!

  11. Cit152_RC

    There were incredible. It’s amazing how far technology has come, that we can render full 3d in our browsers. I myself have what I consider to be a somewhat older PC, yet I had no issue with any of these applications.

  12. I’m impressed. And this stuff is inspiring…

  13. Really cool stuff! David – are You a canvas cheater?
    :)

  14. Another cool WebGL game/experiment: http://parrothunt.nergal.se

  15. The Farm demo is really mind-blowing!

    A big scene created to demonstrate the capabilities of the engine and WebGL technology. Over 25 hectares of land, a huge amount of buildings, animated animals and foliage including the ability of first-person walking, interacting with objects, driving a vehicle.

    http://www.blend4web.com/en/demo/farm/

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Use Code Editor