CubicVR 3D Engine WebGL BeatDetektor Visualizer Demo #4

All runs in real-time with Javascript, WebGL and HTML5 only (uses Minefield Audio build) -- no browser plugins are used.

(*Note the actual demo runs a fair bit smoother than this as the screen recording app tends to cause hiccups in the animation.)

This demo combines the CubicVR 3D engine on WebGL (www.cubicvr.org) with the Mozilla HTML5 Audio API (hacks.mozilla.org), Processing.js (www.processingjs.org) and BeatDetektor.js (www.beatdetektor.com)

Mozilla Audio API is used to sample the HTML5 audio tag on the page, this information is processed by BeatDetektor.js which produces timing information for the rotation of the various pieces rendered by CubicVR.js. Processing.js is used to render a real-time canvas texture for the intermittent cube models.

The tunnel is on an endless cycle of selecting random pieces from the pool of loaded xml meshes.

Available online at:

http://cubicvr.org/CubicVR.js/bd3/BeatDetektor4HD.html

you can find more info about audio api-enabled Minefield builds at:

https://wiki.mozilla.org/Audio_Data_API

You can also feel free to chat with us about the Audio API via the #audio channel on irc.mozilla.org

Category:

Science & Technology

Tags:

• webgl
• cubicvr
• beatdetektor
• visualizer
• 3d
• opengl
• html5
• audio
• fft
• viz
• canvas

[coolbloke1324]

Fantasic work! Very impressive. That's firefox I take it? Have you tested it on Chrome?

[cjcliffe]

@coolbloke1324 Unfortunately Chrome and Webkit's Audio API efforts have not been made available in their beta releases yet. As soon as either makes a version of the Audio API available I will definitely port them over to work there as well.

[jhtrico1850]

@coolbloke1324 I meant to say my GMA 3100 can't run this demo, but it can run better looking graphics.

[coolbloke1324]

@jhtrico1850 Not sure what you mean there... the GMA 3100 is a graphics card which has nothing to do with this except as a medium for presenting 3D objects to the user as fast as it can... to say a graphics card "has better graphics" than a piece of software is like saying your car has better tires than your friend's car's steering wheel..

[jhtrico1850]

My GMA 3100, which can't run this I think because it doesn't support OpenGL 2, has better graphics...

[IanBMorris]

This is really cool, hope it catches on.