CSS3 Powered 3D Presentation - OSDC.TW 2010

You're still running the classical 2D-era presentation tools, e.g. PowerPoint or Keynote? The 3D-era has just come since OSDC.TW 2010.
 
I gave Something Xiaolongbao talk at the most major open source developers conference in Taiwan.


This year's main theme in my talk is the 3D presentation using CSS3 techs. I wrote an HTML5/JavaScript-based presentation tool for the talk.


Usage:
Next Slide - Mouse Click, Space Key or Right Arrow Key
Prev Slide - Left Arrow key
First Slide - [0] Key
3D Mode Toggle - [3] Key

For 3D newbie, try [3] key to turn off 3D and fall back to 2D. :)

The slides are based on HTML5 / JavaScript / CSS3 and the cutting-edge 3D tech of "anaglyph." I've brought some red-blue 3D glasses for the conference from Japan.

At the OSDC.TW day 1 early morning, I wrote pptx2html53d.pl, a Perl script to convert from PowerPoint .pptx file to 3D HTML5 .html. I'll make it open later. Basically .pptx file is a ZIP file. It's pretty easy to parse .pptx using Archive::Zip and XML::TreePP Perl modules. pptx2html53d.pl generates a HTML5 source code.

At first, I also used SVG's feColorMatrix feature for 3D. It's however cancelled at this moment as not working well. And also Chrome 5 for Mac seems it could not run SVG's filter element. The slides above are updated as Gugod gave me nice advices around CSS3 usage of text-shadow.

Buy 3D glasses in town and enjoy 3D presentation now.

* Original post written in Japanese(日本語はコチラ)