Check out my
new book!
HTML5 Games book
WebGL Music Visualizer
I'm not going to comment on the number of months since my last post here. I know I'm a slacker.

For most of December and some of January, I was travelling in East Africa. It's been about 5 years since I last visited there and it was fantastic to be back. Yay for sunburns and lions. Anyway, just before I left, I finished a neat little WebGL project that I never got around to posting here.

Google asked me to do a demo for when WebGL moved from Chrome dev channel to beta. The project I did was a music visualizer - yes, I'm that predictable. It's more like a visualizer building tool, actually, with a few pre-made visualizers. Well, WebGL landed in the beta channel on December 16th, the day after I left. Fortunately, I didn't have to do any remote debugging.

Have a look-see: WebGL Music Visualizer

To get started, click "Load preset", pick a visualizer and start the music. Elements in the scene can be modified by double clicking in the object list. Most parameters can take both constant values and expressions using math functions and/or pre-defined variables (time, beat, bass, mid, etc..).

What's also cool is that the visualizer was used at a Google-hosted party at the Game Developers Conference. I just had to modify it a bit to allow music input from the DJ's setup. Sadly, I wasn't there myself but I believe everything worked out great. I like to close my eyes and imagine that the Android was my representative there, so I was almost (almost!) at GDC.

Here are a few pics from the event:

⇓ 4 comments about

Simply incredible! I was just messing around with WebGL and I find it extremely particular, and much more involved than the standard 2D canvas context.

Excellent blog by the way. Awesome stuff on here!

April 7, 2011 at 8:45 PM

Toutes les marque Tee Shirt Diesel sont originales et directement de l usine. Toutes les Pas cher tee shirts sont 30-70% de remise et livraison gratuite. wish you have a nice day!:)

May 13, 2011 at 11:50 PM
Felix Turner

Awesome! How did you get live audio input into google chrome?

December 16, 2011 at 6:45 PM
Jacob Seidelin

I used a bit of Flash to allow my JavaScript to access to the mic input.

December 17, 2011 at 2:08 AM
Post a Comment