• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5勉強会資料 2012821
 

Html5勉強会資料 2012821

on

  • 2,408 views

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

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

Statistics

Views

Total Views
2,408
Views on SlideShare
1,084
Embed Views
1,324

Actions

Likes
1
Downloads
5
Comments
0

5 Embeds 1,324

http://www.socialtoprunners.jp 803
http://coa.hateblo.jp 461
http://www.socialtoprunners.com 50
http://www35.jimdo.com 8
http://webcache.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Html5勉強会資料 2012821 Presentation Transcript

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