クラウド時代(笑) の Canvas プログラミングSatoshi Ueyama

2009年5月31日日曜日

基礎編

2009年5月31日日曜日

Canvas

Javascriptでグラフィックの描画を行うための要素HTML5 Canvas 要素

• サーバで画像を生成したり• 画像を無理矢理組み合わせたり• DIV要素を並べてで描いたり

しなくていい

従来行われていた不毛なこと

2009年5月31日日曜日

Twitter bot 「ねる」睡眠時間記録サービス

Twitter で「寝る」とか言うと就寝時間を、「おきた」とか言うと起床時間を記録するサービス

2009年5月31日日曜日

Twitter bot 「ねる」睡眠時間記録サービス

ここがCanvas

2009年5月31日日曜日

なぜCanvas?

• 「ねる」は Google App Engine で作ってあります

• サーバの管理しなくていいし

• 無料だし

2009年5月31日日曜日

なぜCanvas?

• Google App Engine の制約

• 重い処理をすると強制タイムアウトになる

• 画像処理 API が使えない（使い物にならない）

画像いじりはクライアントサイドでするのが得策

2009年5月31日日曜日

なぜCanvas?

• Google App Engine の制約

• 重い処理をすると強制タイムアウトになる

• 画像処理 API が使えない（使い物にならない）

画像いじりはクライアントサイドでするのが得策

2009年5月31日日曜日

なぜCanvas?

• サーバ資源はタダではない

• なんでサーバで画像いじる必要があるの？

• ImageMagick とか超面倒だよね？

無駄な資源使ってませんか

無駄な時間使ってませんか （開発者が）

無駄な時間使わせてませんか （利用者に）

2009年5月31日日曜日

なぜCanvas?

• ブラウザさえあれば開発できる　　開発環境の整備・デプロイの手間削減

ここはFlashよりもいい

• サーバの処理が軽くなる

• 転送するデータが軽くなる

• 体感速度的な意味で

• 開発速度的な意味で

2009年5月31日日曜日

クラウド時代のCanvasプログラミング!!!

2009年5月31日日曜日

クスクス

ヒソヒソ

2009年5月31日日曜日

デメリット

• 各ブラウザ、今まさに実装中

• でも、そろそろ実用段階

• 一番の問題は……

（ excanvas も一応ありますが ）

2009年5月31日日曜日

IE にCanvasは載るか？• IE が Acid2 に合格するなんて、考えられなかった• やればできる子• みんなが使えば載るかも

「インターネットを進化させるためにマイクロソフトにできることは、もっとたくさんあるはずです。われわれは、彼らが実装するまで熱烈に待つことにしましょう。Internet Explorerに関するコメントは、今日はこれだけです」

2009年5月31日日曜日

お遊びプログラミング編

2009年5月31日日曜日

3D on 2D Canvas経緯

Canvas の仕様を眺めてみて……

3Dだけならできそう

Adobe MAX 2009

ARやりてー!

2009年5月31日日曜日

3D on 2D Canvas2D Context でテクスチャ付き3D

http://gyu.que.jp/jscloth/

2009年5月31日日曜日

テクスチャマッピング

• save

• transform

• clip path

• restore

Canvas 2D API での実装

canvas

texture

2009年5月31日日曜日

テクスチャマッピング

• save

• transform

• clip path

• restore

Canvas 2D API での実装

canvas2009年5月31日日曜日

テクスチャマッピング

• save

• transform

• clip path

• restore

Canvas 2D API での実装

canvas2009年5月31日日曜日

テクスチャマッピング

• save

• transform

• clip path

• restore

Canvas 2D API での実装

canvas2009年5月31日日曜日

テクスチャマッピング

• save

• transform

• clip path

• restore

Canvas 2D API での実装

canvas2009年5月31日日曜日

js touchスフィア環境マッピングのデモ

2009年5月31日日曜日

js touch

• 鏡面反射の古典的な手法

• 反射した先にある物をテクスチャに予め焼き込んでおく

• モデリング時にテクスチャ座標を決めるのではなく、反射の具合に合わせて生成する（多少計算量が増えるが、微々たるもの）

スフィア環境マッピングのデモ

2009年5月31日日曜日

テクスチャマッピングCanvas 2D API における制限

テクスチャの歪みの問題

？？矛盾

アフィン変換で表現可能

• 拡張点の奥行き情報を参照して適切に変形する機能• Flash10, Direct3D, OpenGL などにはもちろんあります

• Canvas ! まあ、2D用APIなので…

破綻

パースペクティブコレクト

2009年5月31日日曜日

結論

無茶は良くない

2009年5月31日日曜日

結論

• Opera 3D Canvas

• Mozilla 3D Canvas

• Google O3D

無茶は良くない

無茶しなくてもいい3D Canvas

2009年5月31日日曜日

Opera 3D Canvas

• たぶん、一番手軽に試せる

• シーングラフモデルの高レベルなAPI（を目指しているらしい）

概要

3D Canvasを有効化したバイナリをダウンロード可能

Opera Labs

2009年5月31日日曜日

js touch をOpera 3D Canvas に移植

2009年5月31日日曜日

Opera 3D Canvasjs touch の移植

2009年5月31日日曜日

Opera 3D Canvasjs touch の移植

歪み無え

2009年5月31日日曜日

感想

よく言えば　簡単悪く言えば　オモチャ

Opera 3D Canvas

2009年5月31日日曜日

O3D

• 各ブラウザ(IE, Firefox, Safari Chrome)へのプラグイン

• シーングラフモデル API

• ただし、Canvas ではなく object要素

概要

プラグインのインストーラをダウンロード可能

2009年5月31日日曜日

js touch をO3D に移植

2009年5月31日日曜日

感想

高機能・なんでもあり

O3D

（ドキュメントが追いついていない）

2009年5月31日日曜日

Gecko 3D Canvas

• Firefox 3.5 に アドオンを追加すれば利用可能

• OpenGL ES 2.0 の JSバインド

概要

アドオンとして利用可能

2009年5月31日日曜日

js touch をGecko 3D Canvas に移植

2009年5月31日日曜日

感想

• OpenGL ES そのまま

• 固定パイプライン無しなのはどうかな……

Firefox 3D Canvas

2009年5月31日日曜日

結論

• Opera

• Gecko

• O3D

全部やってみるといいんじゃないでしょうか

結局どれを勉強すればいいの？

簡単なほうから

有望そうなほうから…

2009年5月31日日曜日

Thank You.

Canvasプログラミングは、そのブラウザで今すぐ始められます

3D Canvasも、５分で始められます

2009年5月31日日曜日