Mozilla Party 2009 Canvas Programming
-
Upload
gyuque -
Category
Technology
-
view
3.659 -
download
0
description
Transcript of Mozilla Party 2009 Canvas Programming
![Page 1: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/1.jpg)
クラウド時代(笑) の Canvas プログラミングSatoshi Ueyama
2009年5月31日日曜日
![Page 2: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/2.jpg)
基礎編
2009年5月31日日曜日
![Page 3: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/3.jpg)
Canvas
Javascriptでグラフィックの描画を行うための要素HTML5 Canvas 要素
• サーバで画像を生成したり• 画像を無理矢理組み合わせたり• DIV要素を並べてで描いたり
しなくていい
従来行われていた不毛なこと
2009年5月31日日曜日
![Page 4: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/4.jpg)
Twitter bot 「ねる」睡眠時間記録サービス
Twitter で「寝る」とか言うと就寝時間を、「おきた」とか言うと起床時間を記録するサービス
2009年5月31日日曜日
![Page 5: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/5.jpg)
Twitter bot 「ねる」睡眠時間記録サービス
ここがCanvas
2009年5月31日日曜日
![Page 6: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/6.jpg)
なぜCanvas?
• 「ねる」は Google App Engine で作ってあります
• サーバの管理しなくていいし
• 無料だし
2009年5月31日日曜日
![Page 7: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/7.jpg)
なぜCanvas?
• Google App Engine の制約
• 重い処理をすると強制タイムアウトになる
• 画像処理 API が使えない(使い物にならない)
画像いじりはクライアントサイドでするのが得策
2009年5月31日日曜日
![Page 8: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/8.jpg)
なぜCanvas?
• Google App Engine の制約
• 重い処理をすると強制タイムアウトになる
• 画像処理 API が使えない(使い物にならない)
画像いじりはクライアントサイドでするのが得策
2009年5月31日日曜日
![Page 9: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/9.jpg)
なぜCanvas?
• サーバ資源はタダではない
• なんでサーバで画像いじる必要があるの?
• ImageMagick とか超面倒だよね?
無駄な資源使ってませんか
無駄な時間使ってませんか (開発者が)
無駄な時間使わせてませんか (利用者に)
2009年5月31日日曜日
![Page 10: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/10.jpg)
なぜCanvas?
• ブラウザさえあれば開発できる 開発環境の整備・デプロイの手間削減
ここはFlashよりもいい
• サーバの処理が軽くなる
• 転送するデータが軽くなる
• 体感速度的な意味で
• 開発速度的な意味で
2009年5月31日日曜日
![Page 11: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/11.jpg)
クラウド時代のCanvasプログラミング!!!
2009年5月31日日曜日
![Page 12: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/12.jpg)
クスクス
ヒソヒソ
2009年5月31日日曜日
![Page 13: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/13.jpg)
デメリット
• 各ブラウザ、今まさに実装中
• でも、そろそろ実用段階
• 一番の問題は……
( excanvas も一応ありますが )
2009年5月31日日曜日
![Page 14: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/14.jpg)
IE にCanvasは載るか?• IE が Acid2 に合格するなんて、考えられなかった• やればできる子• みんなが使えば載るかも
「インターネットを進化させるためにマイクロソフトにできることは、もっとたくさんあるはずです。われわれは、彼らが実装するまで熱烈に待つことにしましょう。Internet Explorerに関するコメントは、今日はこれだけです」
2009年5月31日日曜日
![Page 15: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/15.jpg)
お遊びプログラミング編
2009年5月31日日曜日
![Page 16: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/16.jpg)
3D on 2D Canvas経緯
Canvas の仕様を眺めてみて……
3Dだけならできそう
Adobe MAX 2009
ARやりてー!
2009年5月31日日曜日
![Page 17: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/17.jpg)
3D on 2D Canvas2D Context でテクスチャ付き3D
http://gyu.que.jp/jscloth/
2009年5月31日日曜日
![Page 18: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/18.jpg)
テクスチャマッピング
• save
• transform
• clip path
• restore
Canvas 2D API での実装
canvas
texture
2009年5月31日日曜日
![Page 19: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/19.jpg)
テクスチャマッピング
• save
• transform
• clip path
• restore
Canvas 2D API での実装
canvas2009年5月31日日曜日
![Page 20: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/20.jpg)
テクスチャマッピング
• save
• transform
• clip path
• restore
Canvas 2D API での実装
canvas2009年5月31日日曜日
![Page 21: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/21.jpg)
テクスチャマッピング
• save
• transform
• clip path
• restore
Canvas 2D API での実装
canvas2009年5月31日日曜日
![Page 22: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/22.jpg)
テクスチャマッピング
• save
• transform
• clip path
• restore
Canvas 2D API での実装
canvas2009年5月31日日曜日
![Page 23: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/23.jpg)
js touchスフィア環境マッピングのデモ
2009年5月31日日曜日
![Page 24: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/24.jpg)
js touch
• 鏡面反射の古典的な手法
• 反射した先にある物をテクスチャに予め焼き込んでおく
• モデリング時にテクスチャ座標を決めるのではなく、反射の具合に合わせて生成する(多少計算量が増えるが、微々たるもの)
スフィア環境マッピングのデモ
2009年5月31日日曜日
![Page 25: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/25.jpg)
テクスチャマッピングCanvas 2D API における制限
テクスチャの歪みの問題
??矛盾
アフィン変換で表現可能
• 拡張点の奥行き情報を参照して適切に変形する機能• Flash10, Direct3D, OpenGL などにはもちろんあります
• Canvas ! まあ、2D用APIなので…
破綻
パースペクティブコレクト
2009年5月31日日曜日
![Page 26: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/26.jpg)
結論
無茶は良くない
2009年5月31日日曜日
![Page 27: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/27.jpg)
結論
• Opera 3D Canvas
• Mozilla 3D Canvas
• Google O3D
無茶は良くない
無茶しなくてもいい3D Canvas
2009年5月31日日曜日
![Page 28: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/28.jpg)
Opera 3D Canvas
• たぶん、一番手軽に試せる
• シーングラフモデルの高レベルなAPI(を目指しているらしい)
概要
3D Canvasを有効化したバイナリをダウンロード可能
Opera Labs
2009年5月31日日曜日
![Page 29: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/29.jpg)
js touch をOpera 3D Canvas に移植
2009年5月31日日曜日
![Page 30: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/30.jpg)
Opera 3D Canvasjs touch の移植
2009年5月31日日曜日
![Page 31: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/31.jpg)
Opera 3D Canvasjs touch の移植
歪み無え
2009年5月31日日曜日
![Page 32: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/32.jpg)
感想
よく言えば 簡単悪く言えば オモチャ
Opera 3D Canvas
2009年5月31日日曜日
![Page 33: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/33.jpg)
O3D
• 各ブラウザ(IE, Firefox, Safari Chrome)へのプラグイン
• シーングラフモデル API
• ただし、Canvas ではなく object要素
概要
プラグインのインストーラをダウンロード可能
2009年5月31日日曜日
![Page 34: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/34.jpg)
js touch をO3D に移植
2009年5月31日日曜日
![Page 35: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/35.jpg)
感想
高機能・なんでもあり
O3D
(ドキュメントが追いついていない)
2009年5月31日日曜日
![Page 36: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/36.jpg)
Gecko 3D Canvas
• Firefox 3.5 に アドオンを追加すれば利用可能
• OpenGL ES 2.0 の JSバインド
概要
アドオンとして利用可能
2009年5月31日日曜日
![Page 37: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/37.jpg)
js touch をGecko 3D Canvas に移植
2009年5月31日日曜日
![Page 38: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/38.jpg)
感想
• OpenGL ES そのまま
• 固定パイプライン無しなのはどうかな……
Firefox 3D Canvas
2009年5月31日日曜日
![Page 39: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/39.jpg)
結論
• Opera
• Gecko
• O3D
全部やってみるといいんじゃないでしょうか
結局どれを勉強すればいいの?
簡単なほうから
有望そうなほうから…
2009年5月31日日曜日
![Page 40: Mozilla Party 2009 Canvas Programming](https://reader034.fdocuments.in/reader034/viewer/2022051817/547b2ae15906b590798b45b1/html5/thumbnails/40.jpg)
Thank You.
Canvasプログラミングは、そのブラウザで今すぐ始められます
3D Canvasも、5分で始められます
2009年5月31日日曜日