| By Charles J. Cliffe,
on 02-05-2010 12:56
|
CubicVR.js uses only your web browser, Javascript and WebGL (OpenGL ES 2.0 based) to produce high quality 3D graphics in real-time. To use the demos below you will need a WebGL enabled browser. WebGL is available in beta for many major browsers -- however if you wish to view the some of the audio based demos first-hand you will require FireFox4 or newer: CubicVR.js Sample Projects and Demonstrations: Please visit: For all the latest and greatest updated demos and example projects. Audio Demos:
Recently I've had the chance to work with the folks developing the Audio Data API extension for Mozilla FireFox and have created a few demos that combine it with the current port of CubicVR.js, you will require a nightly build of FireFox 4 beta to view them first-hand. Some additional posts and articles related to these and other cool audio demos presented at WWW2010 can be found here: |  | BeatDetektor 1: BPM Sync'd Cogs A procedural gear with parallax, normal and environment maps applied. The gear is transformed in a loop using the CubicVR.js transform stack controller. BeatDetektor.js and the Audio API is used to read the audio stream from an html5 <audio> tag and detect and control the timing to visualize the BPM in real-time via rotation of the cogs and camera movement. Video URL: http://vimeo.com/11345685 Demo URL: http://cubicvr.org/CubicVR.js/bd3/BeatDetektor1HD.html |  | BeatDetektor 2: Normalized FFT Simple scaled-height boxes with BPM sync'd lighting representing the time-normalized FFT output bands used internally and interpolated for display by beat detektor VU module. These bands can be used to trigger various effects in repetition to the beat and limit it to various ranges of sounds. Video URL: http://vimeo.com/11345262 Demo URL: http://cubicvr.org/CubicVR.js/bd3/BeatDetektor2HD.html |  | BeatDetektor 3: BeatScape 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 Processing.js real-time canvas textures and the CubicVR.js procedurally generated WebGL scene using them. The camera is set to free roam a simple chase pattern with a probability to follow a nearby cube (fully automated). Video URL: http://www.youtube.com/watch?v=OxoFcyKYwr0&fmt=22 Demo URL: http://cubicvr.org/CubicVR.js/bd3/BeatDetektor3HD.html |  | BeatDetektor 4: Tunnel 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. Video URL: http://www.youtube.com/watch?v=dym4DqpJuDk Demo URL: http://cubicvr.org/CubicVR.js/bd3/BeatDetektor4HD.html |  | Flight Of The Navigator: HTML5 #moz10 MegaDemo - Featuring CubicVR.js and BeatDetektor.js Flight of The Navigator HTML5 demonstration featured at the Mozilla 2010 Summit, all is done in WebGL, HTML5, Javascript and uses the Mozilla Audio API -- no plug-ins required.
Processing.js ( www.processingjs.org ) is used for animated textures, WebM video for videos and BeatDetektor.js ( www.beatdetektor.com ) for audio analysis and visualization.
Featuring work by (twitter): @ccliffe @humphd @corban @F1LT3R @asalga @Maciek416 Video URL (SD): http://www.youtube.com/watch?v=VUOIS3jtD8Y Video URL (HD): [pending..] Demo URL: http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/ |
|
|
CubicVR.js Demos
