Programatori.info

web programming blog

Archive for category 3D

3D Slides Built with HTML5, CSS3, and SVG

Oct 6

Posted by Web Design CLuj in 3D, CSS, Front Page, HTML, Presentation, WEB 2.0 | No Comments

Over on my personal blog I talk about a 3D slide deck I've created that uses HTML5, CSS3, and a bit of SVG (video). The main idea behind this deck is to be able to 'zoom' into topics to as deep a level as necessary. Slides are nested, like an outline.

For example, I gave a talk at Future of Web Apps recently on HTML5, CSS3, and other web technologies and only had 40 minutes, so I just skimmed the surface of the slides. However, in a few days I'll be speaking at Fronteers and will be diving deep into SVG and Canvas, so those slides can be zoomed into. The goal is for me to have a universal slide deck that can 'accordian' open and closed to fill either a 40 minute session or an all day workshop, kind of like stretchtext.

Read more to learn about the 3D slide deck and how I built it.

“Or so they say…” by Mr. Doob

Sep 14

Posted by Web Design CLuj in 3D, Canvas, Front Page, WEB 2.0 | No Comments

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:

PLAIN TEXT
JAVASCRIPT:
container = document.createElement( 'div' );

camera = new THREE.Camera( 60, 800 / 600, 1, 20000 );

renderer = new THREE.CanvasRenderer();
renderer.setSize( 800, 600 );
renderer.autoClear = false;
container.appendChild( renderer.domElement );
 

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

PLAIN TEXT
JAVASCRIPT:
sequencer = new Sequencer();

sequencer.add( new Vector3TravelEffect( camera.position, new THREE.Vector3( 0, 0, 200 ), new THREE.Vector3( 0, 0, 10000 )  ), keys[ 0 ] - 1, keys[ 1 ] - 1 );
sequencer.add( new Vector3TravelEffect( camera.target.position, new THREE.Vector3(), new THREE.Vector3() ), keys[ 0 ] - 1, keys[ 1 ] - 1 );
sequencer.add( new Part1Effect( camera, renderer ), keys[ 0 ], keys[ 1 ] );

sequencer.add( new Vector3TravelEffect( camera.position, new THREE.Vector3( 0, 0, 1000 ), new THREE.Vector3( 0, 0, 400 ) ), keys[ 1 ] - 1, keys[ 2 ] - 1 );
sequencer.add( new Vector3TravelEffect( camera.target.position, new THREE.Vector3(), new THREE.Vector3() ), keys[ 1 ] - 1, keys[ 2 ] - 1 );
sequencer.add( new Part2Effect( camera, renderer ), keys[ 1 ], keys[ 2 ] );
 

The audio is straightforward:

PLAIN TEXT
JAVASCRIPT:
audio = document.getElementById( 'audio' );
audio.currentTime = keys[ key ] / 1000;
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.