CubicVR 3D Engine on WebGL

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:

https://github.com/cjcliffe/CubicVR.js/wiki/Examples-and-Demos

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:

Videos: http://vocamus.net/dave/?p=1074
Article, Videos: http://weblog.bocoup.com/web-audio-all-aboard
Audio API information and more audio demos: https://wiki.mozilla.org/Audio_Data_API

	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). Beatdetektor3 Demo has been updated to the contest placing remix version including Chrome/Webkit/Web Audio API support. It also has a permanent home on GitHub: https://github.com/cjcliffe/BeatDetektor3-Demo Updated Demo URL: http://cjcliffe.github.com/BeatDetektor3-Demo/ Video URL: http://www.youtube.com/watch?v=OxoFcyKYwr0&fmt=22
	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/