Html5勉強会資料 2012821

2,189
-1

Published on

http://atnd.org/events/30569で発表したスライド(一部補足)

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,189
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Html5勉強会資料 2012821

    1. 1. HTML5Animation Cohei Aoki @coa00
    2. 2. About Me• 音楽や映像を生成するAlgorithmのCodeを 書くのが好き。• インタラクティブなアート好き。• ROKUROの主催 http://www.rokuro.net
    3. 3. My GARAKUTA Works
    4. 4. My GARAKUTA WorksFaderの動きで音を演奏
    5. 5. My GARAKUTA WorksFaderの動きで音を演奏
    6. 6. My GARAKUTA WorksFaderの動きで音を演奏 波形を8bitっぽい映像
    7. 7. My GARAKUTA WorksFaderの動きで音を演奏 波形を8bitっぽい映像
    8. 8. My GARAKUTA WorksFaderの動きで音を演奏 波形を8bitっぽい映像Ledの光を音に変換
    9. 9. My GARAKUTA WorksFaderの動きで音を演奏 波形を8bitっぽい映像Ledの光を音に変換
    10. 10. My GARAKUTA WorksFaderの動きで音を演奏 波形を8bitっぽい映像Ledの光を音に変換 時間で映像を歪める
    11. 11. My GARAKUTA WorksFaderの動きで音を演奏 波形を8bitっぽい映像Ledの光を音に変換 時間で映像を歪める
    12. 12. 本日のお話HTML5で強化された描画やアニメーションまわりのお話します!
    13. 13. HTML4までのアニメーション• Flashやgifによるアニメーション• JavaScriptによるCSSなどを制御 したアニメーション
    14. 14. HTML4のメディアファルのコントロール • 独自にAPIを作成しない限りメディアファ イルの制御はできない。DOM/CSS Flash Image Sound制御可能 制御できない 画像の加工が 音を鳴らすことが できない できない HTML(JS)
    15. 15. HTML5を使わないアニメーション1.JavaScriptはシングルタスクであるため タスクの状態によってスムーズに動かない 場合がある。→CSS3によるアニメーショ ンやレンダリングの調整が必要。2.プログラムによる複雑な描画ができない。3.CPUのみで描画演算される。
    16. 16. HTML5対応による変化
    17. 17. HTML5対応による変化• JavaScriptから直接メディアをコン トロールができる。• マルチデバイスを考慮した処理の最適化 が考慮された設計。• GPUによる処理速度向上。• 3D表現が可能
    18. 18. HTML5とメディアファイル • これまでDOMやCSSの制御だけだったアニメー ションが図形描画やメディアを使ったアニメー ションを実現DOM/CSS Canvas SVG audio アニメーション制御可能 の制御 画像の加工 音の制御 HTML(JS)
    19. 19. HTML5から追加されたアニメーション 要素
    20. 20. HTML5から追加されたアニメーション 要素1.Canvas(2D)2.SVG3.WebGL4.CSS3
    21. 21. Canvasの特徴1. 外部データをもとに自由にRectangles, Lines, Curves, Arcs, Complex Shapes,Textの描画2. 外部のJPEGs, GIFs, PNGs, and SVGsの 表示、加工3. 複数のレイヤーによる重ね合わせによる表現が 可能
    22. 22. Canvasのアニメーションプロセス1. Canvasの初期化 1. 初期画面の生成2. レンダリング 1. 画面のクリア 2. 状態のアップデート 3. ビットマップの描画
    23. 23. Canvasの描画プロセスGPUがサポートされている場合、GPUが使われるため高速 Canvas Memory GPU render Process BitMap Shared Memoryサポートされてない場合はブラウザのプロセスで処理される。 BitMap Shared Memory Browser render Canvas Process Memory
    24. 24. Canvasの描画を軽くするには?1.描画生成をできるだけ一回で行う2.レンダリング範囲を限定する
    25. 25. レンダリング範囲を限定する描画範囲を限定するために動くタイミングが異なるものは別レイヤーにし、クリア範囲を小さくする。<canvas id=“background” style="z-index: 0”></canvas><canvas id=“foreground” style=“z-index: 1”></canvas> background クリアする範囲をこの範囲に限定 foreground
    26. 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. 27. アニメーションの更新(これまで)setInterVal,setTimeoutをつかって一定の速度でレンダリング1. バックグランドでも動いてしまう。2. 止まっていたりゆっくり動くものに対しても FPSが一定。3. 処理がもたつつくと待ちタスクがたまってしま う。
    28. 28. アニメーションの更新(今後)requestAnimationFrameの導入•レンダリング速度の最適化がされる•処理待ちタスクがたまらない
    29. 29. SVG(Scalable Vector Graphics)1. ベクター形式で描画(Canvasはピクセル形式)2. AIやFlashなどから書き出しが可能(Canvas も可能になってきている。)3. ベクターをXMLで出力4. 画像が複雑になるとサイズがかなり大きくなっ てしまう。
    30. 30.
    31. 31. WebGL1. シェーダーHTML、DOM内に定義することが 可能。2. できるだけシェーダで処理をさせるようにする ことでGPUを最大活用することができる。3. 同時に2万個以上のオブジェクトの描画可能 (環境依存)4. iOS,Androidのブラウザは未サポート
    32. 32. 情報源• http://www.html5rocks.com• http://developer.apple.com/ library/safari/navigation/• https://developer.mozilla.org/ ja/

    ×