O'Reilly

9 Mind-Blowing WebGL Demos

By on  

As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available for intense web animation is WebGL. WebGL brings a whole new dimension to canvas animation and gaming. Here are nine jaw-dropping demos which will restore your faith in client-side vector graphic animation.

1. Chrome World Maze

Chrome World Maze is one of the flagship Chrome experiments.  With Chrome World Maze, you use your desktop device as the display and your mobile phone (with Chrome browser) as the controller.  The maze is any website which you'd like to roll around;  that's right, you roll around a 3D version of a website.  Outstanding!

Chrome World Maze

2.  Optic Flow

The Optic Flow demo uses the device camera to detect movement and splash a series of dots around the movement.  The more movement, the more animated dots.  For ultimate fun, make thrashing movements in front of your camera to get maximum reward.

Optic Flow

3.  Roll It

Roll it is your classic skee ball game demo.  Much like the Chrome World Maze demo, this demo also uses the desktop screen as the display with your mobile device as the controller.  Swing your arm and mobile device (much like a wii controller), and you'll see the ball scream up the board.  Happy rolling!

Skee Ball

4.  Cube Slam

Ever wanted to play a 3D pong game against a lonely bear?  Cube slam gives you that chance.  Cube slam even allows you to play a friend, provided you give them a link to sync up.

Cube Slam

5.  Ironbane MMO

Ironbane is a 3D platform game that switches perspective as you move around a level.  The smoothness in animation is incredible and responsiveness;  Ironbane is exactly what a HTML5 game should be.

Ironbane

6.  Pearl Boy

If you're ever in need of a few moments of solitude and pleasant thought, load up Pearl Boy.  This beautiful demo is simple -- direct a boy on his boat to row around a beautiful sea with a nice sunset in the background. Ahhhhh, code-powered web relaxation.

Pearl Boy

7.  WebCam Mesh

The WebCam Mesh demo is incredible.  This demo utilizes the user's camera to create an animated, pulsating mesh image of the user.  You wont believe how incredibly smooth and fascinating this masterwork is.

WebCam Mesh

8.  Pitts Demo

Pitts demo is an awesome, accelerated 3D flight game.  Like the other game demos I've shown, the physics of this game are incredible.  You can roll, slow down, accelerate, and crash!

Pitts Air Demo

9.  Pixelate

Pixelate is another camera-based demo, tracking the user's movements and displaying green pixels as object outlines.  This demo even mimics sound (try increasing and decreasing the volume, if on a Mac).

Pixelate

WebGL allows for even more powerful graphic creation and animation.  A few of the items above are massively impressive games, lending promise to HTML5 gaming's future on both desktop and mobile (Firefox OS!).  I hope you enjoyed them as much as I did!

Disclaimer:  I'm not responsible for melted processors or lost work due to instant crash.
Track.js Error Reporting

Recent Features

  • Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • 7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • Drag and Drop MooTools File Uploads

    Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations,...

  • MooTools FontChecker Plugin

    There's a very interesting piece of code on Google Code called FontAvailable which does a jQuery-based JavaScript check on a string to check whether or not your system has a specific font based upon its output width. I've ported this functionality to MooTools. The MooTools...

Discussion

  1. Life of Pi! Cool!!

    • John

      These are cool.
      Anyone happen to know of cam software that tracks the users face and or sound to animate onscreen images in real time.(often using an animals face so it looks like a puppy for instance is speaking) I’ve seen people using it and was informed its called webcam live or live webcam software(something like that)that comes with the cam device. I would love a link to the software if anyone knows of it, it may be from 2010 time frame.

  2. You should check out http://www.polycraftgame.com.

    Polycraft is one of 6 HTML5/WebGL games on Turbulenz.com and it is a 3D character action and tower defence strategy on the web.

    Another cool game on turbulenz.com is Save the Day. Check out this trailer: http://www.youtube.com/watch?v=yxa6bKIs-Cw

  3. Mind blowing :D (Y)

  4. Kannan

    Surface Shader (number 7) is explicitly stated to be non-WebGL, even in the screenshot you’ve posted.

  5. Laurent

    Just went through the link to the 9 canvas demos you provided, and the first example killed my chrome tab. Well… Nothing to do here ! Call me back when your technology is stable.

    • Could be that your processor and/or browser are the problem?

  6. These demos are so inspiring!

  7. Yota

    I forgot to mention that Polycraft (www.polycraftgame.com) is also running inside mobile browsers. It is not running perfectly but more sophisticated HTML5 will be coming to mobile phones very soon.

  8. Hey David!

    I just wanted to drop by to say thank you for putting Pearl Boy on this list. We’re really proud of the demo, and it together with the other awesome demos out there (many of them on your list) show off the true potential of using WebGL. I especially liked the webcam mesh demo.

    We’re letting developers into our closed alpha, so if I you’re a dev and you’d like to get your hands on this stuff I’d be happy to let you in. Just put “davidwalsh” into the text box when registering.

    Again, I’m super grateful for the feature. Thanks!

  9. Include this game in your article too. Quite interesting for what it does. It’s real-time multi-player Table Tennis using WebGL.

  10. Cube SLAM!

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

  12. The Pitts Demo is really neat, remembers me so much to the PS1 days

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

Recently on David Walsh Blog

  • Serve a Directory via Python

    Sometimes I'm working with a test HTML file and some JavaScript but need to work off of a served space.  In that case, I sometimes need to swap out folders within MAMP Stack which leads to a maintenance nightmare.  Bleh. I recently found out that you can...

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...