| By Charles J. Cliffe,
on 02-05-2010 12:56
|
CubicVR is in the early stages of being ported to the new HTML5 standard known as WebGL. The demos below use only a web browser with Javascript and WebGL (OpenGL ES 2.0) 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 audio based demos first-hand you will require an audio-enabled build of FireFox known as Minefield. Here are some helpful resources to get you started: The Demos:  | Basic Test: A simple procedural box and UV Mapper with application of Diffuse and Parallax textures. Demo URL: http://www.cubicvr.org/CubicVR.js/RenderTest.html |  | Lathe Test: Simple lathe revolution test, torus is created by revolving the points of a circle. Demo URL: http://www.cubicvr.org/CubicVR.js/LatheTest.html |  | Spherical Environment Mapping: Environment map shader test, utilizing diffuse, normal, parallax and spherical environment map textures. Demo URL: http://www.cubicvr.org/CubicVR.js/EnvironmentMapTest.html |  | Object Composition: Basic object composition. Simple transforms are provided to procedural object generators to construct a house model. Demo URL: http://www.cubicvr.org/CubicVR.js/ObjectCompositeTest.html |  | Segmentation: High-performance segmentation test. Each individual face or groups of faces in an object can be tagged in a segment (similar to a 'layer') that can be enabled/disabled any time with minimal impact in rendering performance. Demo URL: http://www.cubicvr.org/CubicVR.js/HighPerfSegmentTest.html |  | Point Lighting Test: Simple point lighting test applied to object composition demo featuring diffuse, normal and parallax maps. Demo URL: http://www.cubicvr.org/CubicVR.js/LightingTest1.html |  | Landscape Orientation Test: Models are automatically oriented and height-mapped to the surface of the landscape. Several models are moving across the surface to demonstrate. Demo URL: http://www.cubicvr.org/CubicVR.js/LandscapeTest1.html Youtube Video: http://www.youtube.com/watch?v=4E_25Pg-Y7A&fmt=22 |  | Landscape Navigation Test: Basic landscape navigation test, use Mouse, W,A,S,D or arrow keys to move. Includes height orientation objects from previous test. Demo URL: http://www.cubicvr.org/CubicVR.js/LandscapeNav1.html |  | XML Mesh Loader test: Test of loading the CubicVR XML object format, simple Car mesh from Vehicle Physics Demo created by myself ~10,000 triangles. Demo URL: http://cubicvr.org/CubicVR.js/MeshLoaderTest.html |  | 34k City XML Mesh Loader Test: An ~34,000 triangle City mesh is loaded from CubicVR XML format as a single object. Demo URL: http://cubicvr.org/CubicVR.js/MeshLoaderTest-34kCity.html |
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: [coming soon!] |
|
|
WebGL Port
