Cannon.jsで3D物理演算

1. Cannon.jsで3D物理演算
HTML5minutes！ ∼triton-js∼ #9

2. 近藤 直人
• 株式会社まぼろし
• フロントエンドエンジニア
• @konweb

3. 書籍

4. ブラウザで
3Dといえば

5. http://maratropa.com/
WebGL

6. 物理演算とは？
物理演算エンジン（ぶつりえんざんエンジン、Physics
engine）とは、質量・速度・摩擦・風といった、古典力
学的な法則をシミュレーションするコンピュータのソフ
トウェアである。多くの場合、ミドルウェアライブラリ
を指す。 略して物理演算、物理エンジン、Physicsとも
言う。
wikipedia参照

7. 簡単に言うと

8. 重力で落下
物体の回転
物体同士の衝突

9. 現実世界では
当たり前な現象

10. どうやって
計算するの？

11. 剛体の力学・並進運動・回転運動・
加速度・角加速度・慣性の法則・
運動の法則・ベクトル・ブロード
フェーズ・ナローフェーズ・
AABB・貫通深度・分離軸の理
論・四元数・GJKアルゴリズム・
ミンコフスキー和・ミンコフスキー
差・などなど・・・

12. 物理エンジンライブラリ
• Physi.js
• Oimo.js
• ammo.js
• Cannon.js

13. Cannon.js
http://www.cannonjs.org/

14. 全体的な流れ
• 初期化
• オブジェクトの登録
• 物体と物体を関連付ける
• Cannon.jsとThree.jsで同じオブジェクトを作る
• 描画（ループ）
• 物体の位置や向きなどを計算

15. 2つの世界を作るイメージ
Three.js Cannon.js

16. Demo
http://konweb.github.io/event-150612/demo.html

17. ありがとうございました。