Kawanet Blog II

アクセスカウンタ

zoom RSS HTML5/CSS3 による 3D プレゼンテーション発表 - OSDC.TW 2010

<<   作成日時 : 2010/04/28 17:59   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 4 / トラックバック 0 / コメント 1

いまだに、2次元平面上で PowerPoint や Keynote をお使いですか?
プレゼンも 3D の時代がやってきました
 
先週末は、台北で開催されたオープンソース系カンファレンス OSDC.TW 2010 に参加しました。
川崎は、Shibuya.pm in Taipei 枠の中で Something Xiaolongbao と題して発表させて頂きました。
小龍包は僕の好物で、今年の発表内容とは全く関係ありません。


今年の発表テーマは、HTMl5/CSS3 による 3D プレゼンテーションです。
HTML5/JavaScript ベースのプレゼンツールは、今回の新作・オリジナルです。


スライドの操作方法は、
マウスクリックか、スペースか、カーソル右キーで、次のページに進みます。
カーソル左キーで、前のページに戻ります。
数字 [0] キーで、最初のスライドに戻ります。
数字 [3] キーで、3D モードを ON/OFF 切り替えます。
スライドごとのブックマークや、ブラウザの戻るボタンに対応しています。

まだ 3D に慣れていなくて読みにくい方は、[3] キーで 3D モードを OFF にしてください。

成田空港に行く電車で Power Point の発表資料を書き始めて、
講演当日の朝になって .pptx ファイルを 3D 対応 HTML5 ソースに変換する
スクリプト pptx2html53d.pl を開発。ぎりぎりで発表までに間に合いました。
だもんで、発表資料では 3D 表示の仕組みについては詳しく解説できていません。
急ぎで書いた pptx2html53d.pl 自体はまだ公開できるクオリティではないので、
次回また使うときにでも整理して、公開を考えます。
 
.pptx は、ZIP 圧縮されたアーカイブ内に XML ファイルが入っています。
Archive::Zip と XML::TreePP を使うだけで、簡単に Power Point の内容を
解析することができます。それで HTML5 のソースを出力する仕組み。
 
地デジで Full HDTV とか言っていたのも、もう昔話。 時代は 3D ですよ!
日本でも IMAX 3D の映画が見られるようになってきましたが、今回の 3D は、
ドイツから直輸入した最新式の「アナグリフ」方式に対応しています。(1853年発明!!)
 
発表当日は、画像部分に SVG の feColorMatrix を使った表示も用意しましたが、
まだ思ったようには、うまく合成できてないので、この公開版では外しています。
SVG の filter は Chrome 5 for Mac ではまだ動かないみたいなので、少し使いづらい。
WebGL とかも使ってません。
他にも、OSDC.TW 終了翌日のハッカソンで、Gugod からいろいろアイディアをもらったので、
この公開版はアップデートしてあります。

なお、アナグリフ用の赤青メガネは、STEREOeYe SHOP さん などで買えます。
今回の発表に合わせてムリな発注に対応してくださって、感謝しています。_o_
最初、伊東屋で買ってきたセロファンでオリジナルのメガネを作って試してたけど、
ちゃんと買った方が綺麗に見えます。

TODO: メガネの特製に合わせたキャリブレーションツールを書く。

* English version of this post is here

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 4
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(1件)

内 容 ニックネーム/日時
発表時はこんな感じ。
http://www.flickr.com/photos/leezhenyu/4547778556/
kawanet
2010/04/28 19:56

コメントする help

ニックネーム
本 文
HTML5/CSS3 による 3D プレゼンテーション発表 - OSDC.TW 2010 Kawanet Blog II/BIGLOBEウェブリブログ
文字サイズ:       閉じる