Declarative 3D and Deck.js

• by Sandy Ressler

...but first a word about this presentation

1. This is a deck.js presentation.
2. A brilliant jQuery based toolset which gives you "powerpoint" type slides in native HTML
3. It was authored by Caleb Troughton of http://imakewebthings.github.com/deck.js/
4. Navigate by using the right and left arrow buttons on the keyboard or left and right arrows on the pages
5. Type m to get an overview of all the slides
6. Type g to go to a specific slide

X3DOM

1. Another brilliant project by the folks at Fraunhoffer and the Web3D Consortium
2. Let's you embed X3D into HTML pages (yes this is declarative 3D)
3. Geometry appears in the DOM as first class citizens

Declarative 3D using X3DOM

1. Demos

   show me the cool stuff!!.

2. Geometry is first class DOM citizen

3. jQuery selectors

   select a bunch of geometry with

   $('sphere')

   .

X3DOM and deck.js combined!

1. X3DOM example, Data from Trimensional iphone/ipad App.

2. Recipe:

   1) export ply file from Trimensional.

   2) use meshlab to export X3D

   3) use Faunhoffer's x3dom converter to place X3D into html page

   4) place HTML inside deck.js slideset as a part of one slide

   5) place cursor on nose and stir ;-)

Declarative 3D using X3DOM

• Code for the CONE geometry

  <Transform DEF="coneTrafo" translation="-4.5 0 0">
  	<Shape DEF="coneShape">
  	   <Appearance DEF="coneApp">
  	   <Material diffuseColor="0 1 0" specularColor=".5 .5 .5" >
          </Material>
  		</Appearance>
  		<Cone DEF="cone" ></Cone>
  	</Shape>
  </Transform>
        

• Four little primitives...all in a row

Why yes...I am in fact a Use Case

Slides with built in 3D graphics, crazy man!

Finally after 15 years...millions of dollars...you too can have...spinning CUBES right smack in the middle of your slides!!!

The End