Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善

1. 1 Matter.jsでつくる「ぷにゃっ」と動く物理演算 Webエフェクトとパフォーマンス改善 てつを。（@tetsuwo0717）
2. 物理演算（ Physics Simulation） Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 物体の運動を物理法則に基づき数値計算すること。
3. Matter.js Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 ・JavaScript製の2D剛体物理エンジン https://brm.io/matter-js/
4. Matter.js Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 ・"lightweight, optional utility which provides a simple canvas based renderer" （軽量でオプショナルなユーティリティとして、シンプルなCanvasベースのレンダラー） ・ “An original JavaScript physics implementation (not a port)” ・Box2DなどのC/C++エンジンの移植/ラッパーではない（依存が無い） ・ブラウザ上で動作する2Dの物理エンジンとして比較的手軽に導入 できるライブラリ https://brm.io/matter-js/docs/classes/Render.html https://github.com/liabru/matter-js/blob/master/README.md
5. Matter.js（基本的な書き方） Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 使用するモジュールを取得 他にも・・・ ・Constraint, // 2つのオブジェクトを接続 ・MouseConstraint // ドラッグ機能
6. Matter.js（基本的な書き方） Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 エンジン作成
7. Matter.js（基本的な書き方） Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 レンダラー作成 ・エンジンやレンダリングしたい範囲を引数にとる
8. Matter.js（基本的な書き方） Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 定義した形のオブジェクトをエンジンに追加 （個人的にengine.worldという命名が好き...） ・polygon（多角形） ・circle（円） ・trapezoid（台形） ・fromVertices（カスタム形状）
9. Matter.js（画像） Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 物体に対して画像を貼り付けられる ※Bodyのサイズ（当たり判定）と画像サイズは別 　　　　　　　　↓ うまく調整して違和感のないサイズに
10. ある日・・・ Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善
11. Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 あのぬいぐるみのやついい感じだね…！！ 次作るやつさ、なんか、こう、ちょっと 「ぷにゃっ」 とさせることできない？？
12. Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善
13. Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 剛体
14. Matter.js Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 ・剛体とはいいつつ、軟体を表現するデモはあった ・複数の剛体を組み合わせるやり方 → オブジェクトそのものは軟体に見えるが、結局オブ ジェクト本体をそのまま表示する訳ではない → 別のアプローチへ https://brm.io/matter-js/demo/#softBody
15. Events Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 → 物理エンジンで起きる出来事（衝突、更新など）を「イ ベント」として受け取れる。 https://brm.io/matter-js/docs/classes/Engine.html#events 受け取れるイベントの形式 Events.on(Engine, "afterUpdate", callback) Events.on(Engine, "beforeSolve", callback) Events.on(Engine, "beforeUpdate", callback) Events.on(Engine, "collisionActive", callback) Events.on(Engine, "collisionEnd", callback) Events.on(Engine, "collisionStart", callback)
16. Eventsを用いて軟体を表現できないか Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善
17. Eventsを用いた衝突方向の推定 Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 ・normal = 法線ベクトル・・・衝突面に対して垂直な方向を示すベクトル（衝突面から押し出す方向 を示す） bodyA bodyB bodyA bodyB
18. Eventsを用いた衝突方向の推定 Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 ・normal = 法線ベクトル・・・衝突面に対して垂直な方向を示すベクトル（衝突面から押し出す方向 を示す） bodyA bodyB bodyA bodyB { x: 0, y: 1 } { x: 1, y: 0 }
19. Eventsを用いた衝突方向の推定 Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 どの面に対して衝撃があったかを推定することができる 例
20. Eventsを用いた衝突速度の推定 Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 ・各オブジェクトはvelocityというパラメータを持っている 　velocity・・・オブジェクトが1フレーム（一回の計算）で移動する量を示す t=0: body（x=0, y=0） y軸 x軸
21. Eventsを用いた衝突速度の推定 Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 ・各オブジェクトはvelocityというパラメータを持っている 　velocity・・・ボディが1フレーム（一回の計算）で移動する量を示す t=0: body（x=0, y=0） t=1: body（x=6, y=-8） velocity = { x: 6, y: -8 } y軸 x軸 ※移動方向が決まれば衝突方向もわかりそうだが結局どこがぶつかったかがわからない →ピタゴラスの定理により速度が推定できる
22. Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 描画への反映 Matter.js → 物理計算（位置、速度、衝突） JavaScript → 計算結果からCSSへの適用（イベント駆動） CSS → 描画とアニメーション 衝突方向（event.normal） どれくらいの速度でぶつかったか (body.velocity) 例 定数（ぷにゃっとさせ具合）
23. Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 描画への反映 https://gmodecorp.com/ 素材：ぷにゃん 株式会社ジー・モード 衝突した方向/速度に応じた縮みを表現
24. Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 1.最大オブジェクト数 /FPSの制限 パフォーマンス面 物理演算で使用するオブジェクト数を一定に保つ 　　→配列の先頭削除（shift）で古いエフェクトから削除（ FIFO） FPS（1秒間に何回計算するか）の指定もできる →用途に応じた適切な FPSを指定 https://brm.io/matter-js/docs/classes/Runner.html
25. Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 2.エンジン/静的ボディの共有 パフォーマンス面 エンジン の共有 ・全コンポーネントで 1つのEngineインスタンスを共有 ・例:シングルトン 静的ボディ の再利用 ・壁/地面 ・初回のみ作成して使い回す
26. Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善 3.クリーンアップ パフォーマンス面 イベントリスナー の管理 ・多くのイベントを扱う ・addEventListener → removeEventListener ・ライフサイクルに応じたクリーンアップ 　 物理オブジェクト の削除 ・world.push() → world.splice() ・削除しないと非表示のボディが物理演算の対象に残る →気づきにくい
27. まとめ ・Matter.jsはJavaScript製の2D剛体物理エンジン。比較的手軽に物理演算がブラ ウザ上でできる。 ・物理演算とイベントを組み合わせた表現も可能（音/アニメーションなど） ・ エンジンの使い回し・オブジェクト数制限・メモリリークの防止といった基本的な最 適化を行うことで、物理演算の計算コストを抑え、安定動作とメモリ使用量の一定化 ができる。 Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善
28. 28 Thank you!