CubicVR.js / WebGL

CubicVR 3D Engine on WebGL

  • Print
Details
Category: CubicVR.js / WebGL
Published on Sunday, 02 May 2010 17:56
Written by Charles J. Cliffe

 

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).

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/

CubicVR.js Point Mode Rendering

  • Print
Details
Category: CubicVR.js / WebGL
Published on Monday, 24 September 2012 03:15
Written by Charles J. Cliffe

pointModeRender preview1

CubicVR.js now supports (experimental) a few different point rendering modes for meshes.  Some examples have been added to the repository to demonstrate:

Various point mode and point material test objects:

http://cjcliffe.github.com/CubicVR.js/cubicvr/samples/pointMode/pointMode.html

Several rendering modes including point applied to a high poly subdivision surface:

http://cjcliffe.github.com/CubicVR.js/cubicvr/samples/pointMode/pointModeSubdivide.html

CubicVR.js Vehicle Physics Demo

  • Print
Details
Category: CubicVR.js / WebGL
Published on Thursday, 30 August 2012 23:43
Written by Charles J. Cliffe

I posted a demo of CubicVR.js vehicle physics which is mostly a test of of the RigidVehicle class but could easily be developed into a game, I'll probably make it available as a GitHub project soon and include the easily editable Blender file for the track.

Image from WebGL.com article

There's also a great writeup on WebGL.com about it as well: http://www.webgl.com/2012/04/webgl-demo-cubicvr-stunt-track/

The live demo can be found here and is also available in the CubicVR.js GitHub repository samples:

http://cjcliffe.github.com/CubicVR.js/cubicvr/samples/vehicle_physics_demo/stunt_track1.html

CubicVR.js Landscape Editor Demo

  • Print
Details
Category: CubicVR.js / WebGL
Published on Thursday, 30 August 2012 23:10
Written by Charles J. Cliffe

I've created a demo to highlight some of the new features of the CubicVR.js Landscape including dynamic deformation, optimized normal updates and image spatting.  So far it's all handled in JavaScript with no additional WebGL extensions needed, however a displacement mapping update with reduced memory usage and higher performance will be added utilizing extensions where available.

Image from WebGL.com article


The demo can be found here, there is a 500m x 500m version which should work well on most systems as well as a 1km x 1km version that is recommended only for faster graphics cards with more memory:

Editor 500m x 500m: http://cjcliffe.github.com/CubicVR.js/experiment/landscape_editor/landscape_edit_500m.html

Editor 1km x 1km: http://cjcliffe.github.com/CubicVR.js/experiment/landscape_editor/landscape_edit_1km.html

You can save your landscapes and load them again by dragging the save file back into the browser; note that you can't currently drag save files from the 1km to 500m version and vice versa (well you can, but it makes a mess).

WebGL.com also had a nice write-up about the Landscape demo: http://www.webgl.com/2012/07/webgl-demo-landscape-editor-cubicvr-js/

CubicVR.js Oculus Rift and stereo experiments

  • Print
Details
Category: CubicVR.js / WebGL
Published on Thursday, 30 August 2012 23:02
Written by Charles J. Cliffe

I'm excited to have backed the Oculus Rift on Kickstarter and eagerly await my dev kit, in the meantime I've done some stereo rendering experiments in CubicVR.js and have added a simple StereoCameraRig class with 5 different modes available by default. The demo can be found here:

http://cjcliffe.github.com/CubicVR.js/experiment/oculus_rift/stereo_modes_test.html

There's Oculus Rift experimental mode, which is just a quick PostProcessShader I created to bend the split stereo image to look like it did in the Kickstarter video along with matching the field of view specifications; so it's probably all kinds of wrong but at least it's ready to plug in the right values when I can get access to the SDK.

The other modes are standard red/blue, red/green for simple old-school 3D glasses, split stereo and interlace.  Plain split stereo divides the display in half; this can be used with some 3D displays and also the eye swap option lets you cross your eyes to see the effect; though I don't recommend crossing them for very long :)  There's also an interlace mode which may work with some 3D TV and computer displays with appropriate glasses.  Minimal testing done so far so it all probably needs some tweaking..

 

More Articles...

  1. BeatDetektor 3 Remix (WebGL) now on GitHub
  2. Two CubicVR.js WebGL demos live on Mozilla's Web 'o Wonder
  3. CubicVR 3D Engine ported to WebGL

Charles J.'s tweets (@ccliffe)

Forum Activity

Github Activity


Realtime website traffic tracker, online visitor stats and hit counter
Scroll to top