WebGL Roundup

Since the demise of the Flash Player’s ubiquity, it’s like the Wild West out there for rich media web developers today. There is a whole world of new technologies that allow for animation and rich interactivity on the web. These include jQuery, Canvas, CSS3 transitions, Unity and WebGL. Unfortunately none of these work across all platforms so we are back to the days of creating multiple versions of our content and switching them out based on browser detection.

One of the most exciting new technologies is WebGL. WebGL is a open-standard browser implementation of OpenGL – the graphics API that is used just about everywhere. The strength of WebGL is that it uses hardware acceleration to allow for complex, high frame-rate 3D animations and games. WebGL is scripted with JavaScript.

WebGL is currently supported in Chrome 9+, Firefox 4+ and Safari OSX 10.6+. Since Google turned on WebGL support for the current release version of Chrome, this means anyone can view WebGL content on the web for free. As this is a new technology it’s a little flakey. Some of these demos may hog your machine resources, also you may need to restart your browser now and again.

Three.js

WebGL is low level API that provides a lot of flexibility and power with the trade-off that it can take a lot of code to make a simple scene. Luckily the ubiquitous Mr Doob has built a very nice JavaScript Library that allows you to easily utilize WebGL: Three.js. Three.js provides the option to choose a Canvas Renderer or a WebGL renderer. Download the library including many WebGL examples here.

WebGL Demos

Here are some demos from around the web that show the potential of WebGL. Use the latest Google Chrome to view them. Let me know in the comments if I’ve missed any good ones.

Three.js/WebGL demos from AlteredQualia.

Three.js/WebGL Demos

FractalLab – insane 3D fractal visualizer from subblue.

Demoscene style shader effects from Frank Reitberger.

WebGL demos from Evgeny Demidov

Learn More

 

Glitch Your Images with ImageGlitcher

ImageGlitcher allows you to glitch any image and save the result. Glitched images look like they are being displayed on a broken analog TV. Check it out here.

This demo was built using Peter Nitsch’s BitmapData.js – a very useful JS port of ActionScript’s BitmapData class which makes it easy to manipulate canvas image data. After playing around with it for a while I got some pleasing glitched image results, so I figured it would be useful to wrap it up as a little app. The glitch effect is achieved by:

  • Slicing the image horizontally and randomly offsetting the slices
  • Randomly selecting a color channel and offsetting again
  • Brightening the image
  • Adding a ‘scan lines’ overlay.

All the source code is viewable via ‘View Source’. Surprisingly, cross browser development wasn’t too much of a pain once I ignored IE. One of the cool features of HTML5 is native drag and drop support. On Chrome and Firefox you can drag in an image from the desktop.

One issue that came up was that the canvas tag does not allow you to getImageData() on images that are from a different web domain. This is supposedly a security feature to prevent hackers copying images, although I fail to understand why. If a hacker has the URL of an image on your website he already has a local copy of the image – right? Anyway $.getImageData gets around this feature by routing image data through Google App Engine using JSONP.

If I get time there are a few features I want to add in the next version:

  • Add ‘Instagram’ style filters
  • Add more granular filter options
  • Use web workers to avoid hang time

Let me know if you find any issues or if you create any nice images, post a link in the comments.

UPDATED – 9 May 2013

  • Removed loading remote images via $.getImageData. Their service appears to be down.
  • Added additional controls
  • Removed image size limit
  • Improved  messaging

New Airtight Branding

After hearing great things about MOO, I finally tried them out and I’m very happy with the result. You get 50 great quality, heavy stock business cards for $20. If you need business cards give these guys a try. Moo make it easy to upload your own design but I was lazy and used their online design tool. The red is the same as this website’s hyperlink color (#F30 if you were wondering).

It was also an opportunity to use my new vanity URL: airtight.cc – which just redirects to www.airtightinteractive.com. I got tired of spelling out ‘airtightinteractive’ on the phone, so figured I should get a snappier URL.

Inception Plot Holes

Ok I realize I’m late to the party here, but I just saw ‘Inception’ and while I really enjoyed it, there were a few things that did not make any sense. For me it’s important for speculative fiction to be internally consistent. Let me know in the comments if you agree/disagree or if you have more plot holes to add.

SPOILER ALERT. Obviously this post is full of spoilers, so don’t read it if you have not yet seen the movie.

  1. When Cobb’s crew first get to the level 1 dream we are told that if they die in the dream their brain will turn to mush since the chemist used some new ‘stronger’ prescription. Presumably this is to make the action sequences become meaningful. But – later on at the bottom level Saito is convinced to shoot himself in order to wake up. Why does his brain not turn to mush? Same applies to Ariadne killing herself by swan-diving off the building.
  2. When they first find out that Fischer’s mind has been weaponized and that dying in the dream will turn them to vegetables, why don’t they abort the mission and all fall over backwards to ‘kick’ themselves back to reality?
  3. Why does the chemist create the stronger, potentially mind-mushing chemical in the first place? Why does Cobb agree to use it?
  4. At one point Eames says ‘you have to dream bigger’ and pulls out a rocket launcher. If you can dream up new weapons, why don’t they whip out loony-tunes style machine guns a-la ‘The Mask’? For that matter, none of the action scenes make sense since it’s all a dream right? There are no laws of physics determining if the bullet hits you or not.
  5. If Saito has enough spare cash to buy an airline, why is he so threatened by Fischer’s corporation? Surely he could come up with a less risky plan than trying to incept the idea of ‘breaking up the company’. How does he know that part of the broken up company would not go on to beat him anyway? Also, why does Saito choose to go into the dream in the first place? You don’t get to be a billionaire by taking unnecessary risks.
  6. They never explain the technology behind the dream sharing device. Dreams within dreams – fine I buy it. But a suitcase with wires that telepathically links people’s minds? If such a thing existed, society would be radically different. And billionaires would presumably be aware of the threat of mind-melding and have some kind of defense system (a bodyguard or crash helmet perhaps?)

Processing.js Experiment – Noise Field

I built this demo by porting one of my old Processing sketches to the fantastic Processing.js. The demo draws particle trails using Perlin noise to direct the particle motion. Move the mouse to change the noise function and click to randomize the particle drawing parameters.

Processing.js is a JavaScript port of Processing that renders to the HTML5 Canvas tag. It was originally built by the same guy who built jQuery. It’s nice to have a framework for handling common drawing and math functions. As a bonus, if you are familiar with Processing you will be able to jump right in.

Three.js Experiment – Cube Explosion

Had a chance to play with Mr.Doob‘s excellent JavaScript 3D library three.js today and came up with this. Resize your browser down and Refresh to increase performance. Grab the code via ‘View Source…’.

I’m getting ~54 FPS on Chrome, ~43 FPS on Safari and ~30 FPS on FireFox. The iPad gives a sad 7 FPS. To run on IE you will need the Google Chrome Frame Plugin.

There’s definitely a lot of potential in this library.