Tuesday, September 14th, 2010

“Or so they say…” by Mr. Doob

Category: 3D, Canvas

Via Mr. Doob comes a cool canvas demo called “Or so they say…” he created. What’s interesting about this demo is it uses HTML5 Audio and Canvas, including Mr. Doob’s Three.js library and sequencer that he also used on The Wilderness Downtown project.

Three.js is similar to Papervision3D in the Flash world, allowing you to build up 3D scenes. Three.js then draws the 3D scene graphs using either Canvas, SVG, or WebGL. It’s a very interesting library, but needs more docs (hint hint Mr. Doob!).

In the “Or so they say…” demo (source), Mr. Doob starts by setting up Three.js, the camera, and the backing renderer:

javascript

  1. container = document.createElement( 'div' );
  2.  
  3. camera = new THREE.Camera( 60, 800 / 600, 1, 20000 );
  4.  
  5. renderer = new THREE.CanvasRenderer();
  6. renderer.setSize( 800, 600 );
  7. renderer.autoClear = false;
  8. container.appendChild( renderer.domElement );

The sequencer is then initialized and various 3D and time effects are added; a small snippet:

javascript

  1. sequencer = new Sequencer();
  2.  
  3. sequencer.add( new Vector3TravelEffect( camera.position, new THREE.Vector3( 0, 0, 200 ), new THREE.Vector3( 0, 0, 10000 )  ), keys[ 0 ] - 1, keys[ 1 ] - 1 );
  4. sequencer.add( new Vector3TravelEffect( camera.target.position, new THREE.Vector3(), new THREE.Vector3() ), keys[ 0 ] - 1, keys[ 1 ] - 1 );
  5. sequencer.add( new Part1Effect( camera, renderer ), keys[ 0 ], keys[ 1 ] );
  6.  
  7. sequencer.add( new Vector3TravelEffect( camera.position, new THREE.Vector3( 0, 0, 1000 ), new THREE.Vector3( 0, 0, 400 ) ), keys[ 1 ] - 1, keys[ 2 ] - 1 );
  8. sequencer.add( new Vector3TravelEffect( camera.target.position, new THREE.Vector3(), new THREE.Vector3() ), keys[ 1 ] - 1, keys[ 2 ] - 1 );
  9. sequencer.add( new Part2Effect( camera, renderer ), keys[ 1 ], keys[ 2 ] );

The audio is straightforward:

javascript

  1. audio = document.getElementById( 'audio' );
  2. audio.currentTime = keys[ key ] / 1000;
  3. audio.play();

Mr. Doob has some notes about performance:

It’s all software rendering (no WebGL), so don’t expect much performance. It’s running at 20-30fps on my Mac Mini Core 2 Duo @ 2.53Ghz with Ubuntu/Linux. If you are running MacOS. I’m sorry to say that it won’t run faster than 1fps… For some reason Chrome team decided to use CoreGraphics instead of Skia.

Posted by Brad Neuberg at 6:00 am
Comment here

+++--
3.5 rating from 19 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.