Html5勉強会資料 2012821
Download as KEY, PDF1 like749 views
http://atnd.org/events/30569で発表したスライド（一部補足）
![描画処理の回数を少なくする！
描画処理は一括で行うほうが負荷がかからない。
for (var i = 0; i < 100; i++) context.beginPath();
{ for (var i = 0; i < 100; i++) {
var p1 = p[i]; var p1 = p[i]; var p2 = p[i+1];
var p2 = p[i+1]; context.moveTo(p1.x, p1.y);
context.beginPath(); context.lineTo(p2.x, p2.y);
context.moveTo(p1.x, p1.y); }
context.lineTo(p2.x, p2.y); context.stroke();
context.stroke();
}](https://image.slidesharecdn.com/html52012821-120821104717-phpapp01/85/Html5-2012821-26-320.jpg)
Html5勉強会資料 2012821
- 1. HTML5 Animation Cohei Aoki @coa00
- 2. About Me • 音楽や映像を生成するAlgorithmのCodeを 書くのが好き。 • インタラクティブなアート好き。 • ROKUROの主催 http://www.rokuro.net
- 6. My GARAKUTA Works Faderの動きで音を演奏 波形を8bitっぽい映像
- 7. My GARAKUTA Works Faderの動きで音を演奏 波形を8bitっぽい映像
- 8. My GARAKUTA Works Faderの動きで音を演奏 波形を8bitっぽい映像 Ledの光を音に変換
- 9. My GARAKUTA Works Faderの動きで音を演奏 波形を8bitっぽい映像 Ledの光を音に変換
- 10. My GARAKUTA Works Faderの動きで音を演奏 波形を8bitっぽい映像 Ledの光を音に変換 時間で映像を歪める
- 11. My GARAKUTA Works Faderの動きで音を演奏 波形を8bitっぽい映像 Ledの光を音に変換 時間で映像を歪める
- 14. HTML4のメディアファルのコントロール • 独自にAPIを作成しない限りメディアファ イルの制御はできない。 DOM/CSS Flash Image Sound 制御可能 制御できない 画像の加工が 音を鳴らすことが できない できない HTML(JS)
- 15. HTML5を使わないアニメーション 1.JavaScriptはシングルタスクであるため タスクの状態によってスムーズに動かない 場合がある。→CSS3によるアニメーショ ンやレンダリングの調整が必要。 2.プログラムによる複雑な描画ができない。 3.CPUのみで描画演算される。
- 16. HTML5対応による変化
- 17. HTML5対応による変化 • JavaScriptから直接メディアをコン トロールができる。 • マルチデバイスを考慮した処理の最適化 が考慮された設計。 • GPUによる処理速度向上。 • 3D表現が可能
- 18. HTML5とメディアファイル • これまでDOMやCSSの制御だけだったアニメー ションが図形描画やメディアを使ったアニメー ションを実現 DOM/CSS Canvas SVG audio アニメーション 制御可能 の制御 画像の加工 音の制御 HTML(JS)
- 19. HTML5から追加されたアニメーション 要素
- 20. HTML5から追加されたアニメーション 要素 1.Canvas(2D) 2.SVG 3.WebGL 4.CSS3
- 21. Canvasの特徴 1. 外部データをもとに自由にRectangles, Lines, Curves, Arcs, Complex Shapes,Textの描画 2. 外部のJPEGs, GIFs, PNGs, and SVGsの 表示、加工 3. 複数のレイヤーによる重ね合わせによる表現が 可能
- 22. Canvasのアニメーションプロセス 1. Canvasの初期化 1. 初期画面の生成 2. レンダリング 1. 画面のクリア 2. 状態のアップデート 3. ビットマップの描画
- 23. Canvasの描画プロセス GPUがサポートされている場合、GPUが使われるため高速 Canvas Memory GPU render Process BitMap Shared Memory サポートされてない場合はブラウザのプロセスで処理される。 BitMap Shared Memory Browser render Canvas Process Memory
- 25. レンダリング範囲を限定する 描画範囲を限定するために動くタイミングが異なるもの は別レイヤーにし、クリア範囲を小さくする。 <canvas id=“background” style="z-index: 0”></ canvas> <canvas id=“foreground” style=“z-index: 1”></ canvas> background クリアする範囲をこの範囲に限定 foreground
- 26. 描画処理の回数を少なくする！ 描画処理は一括で行うほうが負荷がかからない。 for (var i = 0; i < 100; i++) context.beginPath(); { for (var i = 0; i < 100; i++) { var p1 = p[i]; var p1 = p[i]; var p2 = p[i+1]; var p2 = p[i+1]; context.moveTo(p1.x, p1.y); context.beginPath(); context.lineTo(p2.x, p2.y); context.moveTo(p1.x, p1.y); } context.lineTo(p2.x, p2.y); context.stroke(); context.stroke(); }
- 27. アニメーションの更新(これまで) setInterVal,setTimeoutをつかって一定の速 度でレンダリング 1. バックグランドでも動いてしまう。 2. 止まっていたりゆっくり動くものに対しても FPSが一定。 3. 処理がもたつつくと待ちタスクがたまってしま う。
- 29. SVG(Scalable Vector Graphics) 1. ベクター形式で描画(Canvasはピクセル形式) 2. AIやFlashなどから書き出しが可能(Canvas も可能になってきている。) 3. ベクターをXMLで出力 4. 画像が複雑になるとサイズがかなり大きくなっ てしまう。
- 30. 例
- 31. WebGL 1. シェーダーHTML、DOM内に定義することが 可能。 2. できるだけシェーダで処理をさせるようにする ことでGPUを最大活用することができる。 3. 同時に2万個以上のオブジェクトの描画可能 （環境依存） 4. iOS,Androidのブラウザは未サポート
- 32. 情報源 • http://www.html5rocks.com • http://developer.apple.com/ library/safari/navigation/ • https://developer.mozilla.org/ ja/