Mozilla Party 2009 Canvas Programming

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

2009年5月31日日曜日

基礎編


Canvas

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

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

しなくていい

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


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

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


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

ここがCanvas


なぜCanvas?

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

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

• 無料だし


なぜCanvas?

• Google App Engine の制約

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

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

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


なぜCanvas?

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

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

• ImageMagick とか超面倒だよね？

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

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

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


なぜCanvas?

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

ここはFlashよりもいい

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

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

• 体感速度的な意味で

• 開発速度的な意味で


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


クスクス

ヒソヒソ


デメリット

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

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

• 一番の問題は……

（ excanvas も一応ありますが）


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

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


お遊びプログラミング編


3D on 2D Canvas経緯

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

3Dだけならできそう

Adobe MAX 2009

ARやりてー!


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

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




テクスチャマッピング

• save

• transform

• clip path

• restore

Canvas 2D API での実装

canvas

texture


テクスチャマッピング

• save

• transform

• clip path

• restore

Canvas 2D API での実装

canvas2009年5月31日日曜日

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


js touch

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

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

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

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


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

テクスチャの歪みの問題

？？矛盾

アフィン変換で表現可能

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

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

破綻

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


結論

無茶は良くない


結論

• Opera 3D Canvas

• Mozilla 3D Canvas

• Google O3D

無茶は良くない

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


Opera 3D Canvas

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

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

概要

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

Opera Labs


js touch をOpera 3D Canvas に移植


Opera 3D Canvasjs touch の移植


Opera 3D Canvasjs touch の移植

歪み無え


感想

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

Opera 3D Canvas


O3D

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

• シーングラフモデル API

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

概要

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


js touch をO3D に移植


感想

高機能・なんでもあり

O3D

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


Gecko 3D Canvas

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

• OpenGL ES 2.0 の JSバインド

概要

アドオンとして利用可能


js touch をGecko 3D Canvas に移植


感想

• OpenGL ES そのまま

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

Firefox 3D Canvas


結論

• Opera

• Gecko

• O3D

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

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

簡単なほうから

有望そうなほうから…


Thank You.

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

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


Mozilla Party 2009 Canvas Programming

Technology

Transcript of Mozilla Party 2009 Canvas Programming