3D JavaScript

2010.07.31
Shibuya.js in LL Tiger
@kawanet
http://www.kawa.net/

2次元 vs 3次元

JavaScriptにおける3D挑戦の歴史

Animation.Cube - 2006/04

Triangles by Border of Div - 2006/10

3D Polygons in 2D Canvas - 2008/03

Textures Mapping - 2008/03

3D with physical computing - 2009/02

Sphere Environment Mapping - 2009/02

そして、2010年の3Dへの挑戦

プレゼンテーションは 3D の時代に!

3D 3D 3D  
3D 3D 3D 3D  
3D 3D 3D 3D 3D 3D  
3D 3D 3D 3D 3D 3D 3D 3D  
3D 3D 3D 3D 3D 3D 3D 3D 3D 3D 3D 3D  

"Rediscover the JavaScript"

10 年。
世界が JavaScript の真の実力を発見するのに要した時間である。
1995 年、Netscape 社の Brendan Eich により開発・設計された JavaScript は、「世界で最も誤解されたプログラミング言語」などと呼ばれもした、ともすれば不遇とすらいい得る歳月を経て、あたりのそこここに満ち充ちていた「Web の旧来的なインタラクションの窮屈さを革命したい」という思いによって、ふたたび表舞台に招来された。
JavaScript は、Web の「あちら側」「こちら側」とを取り結ぶ、もっとも古くてもっとも新しい、そして、もっとも重要な技術だ。次の 10 年を自らの手で創り出すために、我々は Shibuya.js を結成した。

世界中の Web が、3D の時代に突入!

3D ブックマークレット

3D プレゼンを発表した後、台湾の gugod とブックマークレットを共作。

Google で《 kawanet 3d 》で検索してね。

ブックマークレットで、世界中のウェブサイトが 3D に対応!

WebGL も、3D ブラビアも不要!

みんな、赤青メガ ネは1家に1本持ってるよね?

3D 表示の仕組み (CSS3)

// 文字を赤くして、半透明にする
color: rgba(255, 0, 0, 0.5);

// 10ピクセルずらして、ブラーをかけずに、
// 半透明の緑の文字の影を付ける(ドロップシャドウ)
//(文字の大きさ = シャドウの距離 = 3D遠近感)
text-shadow: 10px 0pt 0pt rgba(0, 255, 192, 0.5);

// 今日のポイント:
// rgba(R,G,B,A); でアルファチャンネル付きの色指定

iPad × HTML5 で「ユビキタス 3D」を実現

OSDC.TWで発表 → 今、台湾は空前の3Dブーム

ところで・・・
Shibuya.jsは昨日、予選会を開催
各発表内容はUstで配信・公開済

しかし・・・        

『LT の虎』発表レベル高くね?

2回戦を突破するためには、

パワーアップが必要じゃね?

1回戦終了後、スピーカー控え室で

追加の新デモの開発を始めました。

その15分後・・・

さすがに、
15分間じゃできなかった。。。

さらに15分後・・・

@gyuque が30分間で
新しい 3D デモを完成!

gyu.que.jp/jscloth/glass/

Thank you!

Yusuke Kawasaki
川﨑 有亮 (@kawanet)
http://www.kawa.net/