【HTML5ゲーム開発環境勉強会 】PlayCanvasビルトインコンポーネント ディープダイブ第一弾【物理エンジン】（2018/12/11講演）@GMO yours

1. The Web-First Game Engine
Collaboratively build stunning HTML5 visualizations and games
PlayCanvas運営事務局
津田良太郎

2. 本セッションの要旨
➢ PlayCanvasのビルトインコンポーネントのひとつ、
【物理エンジン】についてお話します
➢ 使い方や、できること
パフォーマンスや、内部実装の仕組み、小技まで

3. アジェンダ
 PlayCanvasの説明
 PlayCanvas Physics engine
 使い方/できること
 パフォーマンス
 内部の話
 事例
 まとめ

4. 登壇者の自己紹介
 津田良太郎 @utautattaro
 Webとゲームの間を行ったり来たりなエンジニア
 短期間でいろいろ作るプロトタイパー
 趣味は旅行とバドミントン
 PlayCanvas運営事務局(2016.4 - )
 utautattaro.com

5. What is PlayCanvas？
イントロダクション

6. 一言で PlayCanvasとは
ゲームエンジン
です！！

7. PlayCanvasとは
• ゲームエンジン
– WebGL向けのオープンソースなゲームエンジン
– すべてJavaScriptで記述されていて、scriptタグで呼ぶ
だけで使える
– ライブラリではなくゲームエンジンなので
カテゴリとしてはUnityやUnreal Engineと同じ

8. PlayCanvas エンジンの特徴
• 軽量
• オールJavaScript
• OSS

9. PlayCanvasを始めるには – Get Started
<script src=‘./playcanvas-stable.min.js'></script>
var canvas = document.getElementById(‘application’);
var app = new pc.Application(canvas, { });
app.start();
var camera = new pc.Entity(‘camera’);
camera.addComponent(‘camera’,{clearColor:new pc.Color(0.1,0.1,0.1)});
var right = new pc.Entity(‘light’);
light.addComponent(‘light’);
app.root.addChild(camera);
app.root.addChild(light);
app.on('update', function (deltaTime) {
Timer += deltaTime
});
<canvas id=‘application’></canvas>
canvas作成
エンジン読み込み
初期化
カメラとライトの配置
メインループ

10. これでゲームが作れる！
だけど、ねえ…

11. 昨今のゲーム開発スタイルは…
• ビジュアルエディタを用いたものが主流
– 2Dゲーム開発でもエディタ付きのものを利用したり
• HTML+JSで3D空間を構築していくのはつらい
– 少なくともUnityで育ったゆとり世代の私には無理

12. ＿人人人人人人人人人人人＿
＞ PlayCanvas Editor! ＜
￣Y^Y^Y^Y^Y^Y^Y^Y ￣
そこで！

13. PlayCanvas Editor
• クラウドサービスとして提供
• 開発環境の構築必要なし！
• メールアドレス一つで登録、開始可能
• ブラウザ上で動くビジュアルエディタ！
• 初めての人でもHTML5ゲームが
簡単に作れる環境が整っています！

14. PlayCanvas Physics Engine
使い方/できること

15. ビルトインコンポーネントのひとつ
• すぐ使えるコンポーネント
• 衝突：Collision
• 剛体：Rigid Body

16. 使い方
• entityにコンポーネントをアタッチするだけ

17. できること
• 物理シミュレーション
– 剛体/軟体(スクリプトで実装)
– Static/Dynamic/Kinematic
• 衝突判定/接触判定
– Collisionのみでtriggerとして利用可能
– Rigidbodyをつけると衝突判定
– RayCastでエンティティを取得 とか

18. Script.prototype.initialize = function(){
//接触時のコールバックを設定
this.entity.collision.on("triggerenter",
this._onTriggerEnter,this);
//接触終了時のコールバックを設定
this.entity.collision.on("triggerleave",
this._onTriggerLeave,this);
};
//*接触した瞬間に実行*//
Script.prototype._onTriggerEnter = function(result){
console.log(result.other);//衝突したentity
};
//*接触して離れた瞬間に実行*//
Script.prototype._onTriggerLeave = function(result){
console.log(result.other);//衝突したentity
};
接触判定

19. 衝突判定
Script.prototype.initialize = function(){
//衝突時のコールバックを設定
this.entity.collision.on("collisionstart",
this._colstart,this);
//衝突終了時のコールバックを設定
this.entity.collision.on("collisionend",
this._colend,this);
};
//*衝突した瞬間に実行*//
Script.prototype._colstart = function(result){
console.log(result.other);//衝突したentity
};
//*衝突して離れた瞬間に実行*//
Script.prototype._colend = function(result){
console.log(result.other);//衝突したentity
};

20. PlayCanvas Physics Engine
パフォーマンス

21. ベンチマークアプリの開発と検証
• ベンチマークアプリを作成して検証
– 評価：20FPSに下がるまで
何インスタンスレンダリングできるか
• 項目
– スタティックメッシュ
– アニメーションつきスタティックメッシュ
– 物理制御されたプリミティブ(box, sphere)
– シンプルなパーティクル
– リッチなパーティクル(テクスチャ、カラー値)
– 2Dスプライトアニメーション
※イニシャライズ時のオーバーヘッドがあるため、初期インスタンス生成時のFPSのショットノイズは計測に考慮しない

22. 各端末での検証結果
端末
項目
iPhone8
[373x553]
iPhone7plus
[375x591]
oppo R15 pro
[360x678]
Galaxy S6
edge[360x560]
MacBook Pro※1
[1280x703]
Let’s note※2
[1536x734]
スタティックメッシュ 1441 1343 533 303 815 992
アニメーション付き
メッシュ 875 796 250 150 438 588
物理プリミティブ(box) 325 336 245 104 315 460
物理プリミティブ
(Sphere) 568 458 303 271 417 575
シンプルなパーティクル 253 213 27 218 606 878
リッチなパーティクル 170 188 51 51 408 804
2Dスプライトアニメー
ション 4714 3631 2237 548 2860 3735
合計 9092 6965 3640 1650 5795 8009
※表示している結果は数回実行した結果の平均値として算出しています。ブラウザはすべてGoogle Chromeを利用して測定しています。
※1[Macbook Pro Retina 13-inch Early 2015 2.7GHz Intel Core i5, メモリ8GB, Intel Iris Graphics] ※2[2.4GHz Intel Core i5-6300U メモリ8GB, Intel HD Graphics 520]

23. グラフで比較
0
100
200
300
400
500
600
700
iPhone8 iPhone7plus oppo R15 pro Galaxy S6
edge[360x560]
MacBook Pro※1 Let’s note※2
物理プリミティブ(box) 物理プリミティブ(Sphere)
スコア
項目

24. 使い方/できること/パフォーマンス まとめ
 ビルトインなのでアタッチするだけですぐ使える！
 剛体シミュレーションが可能
 スクリプトからイベントの設定も簡単
 端末によるが、300インスタンスくらいまでなら20FPS
のレンダリングをキープできる

25. PlayCanvas Physics Engine
内部の話

26. 物理エンジンのソースコード
• 容量
コード全文
3.74
MB
ランタイム
1.83
MB
gZip
356
KB

27. コアエンジン
• ammo.jsを採用
– https://github.com/kripken/ammo.js
– Bullet(C++)をemscriptenでJavaScriptにしたもの
• PlayCanvasランタイムとは別で落ちてくる
– 不要な場合は削除可能

28. 設計
• 決定性(Deterministic)は持たない
– 同一条件で複数回シミュレートしても同一の結果に
はならない
– Demo

29. 物理エンジンのアップデート
• 2016年末にリファクタリングが完了
– 多くのBullet APIが使えるように
– PlayCanvasには表示されないが、
独自実装でBulletの軟体物理等もシミュレートできる

30. ラグドール デモ

31. (ドキュメントには載ってない！)Tips1
• initialize時に多少のオーバーヘッドがある
– コリジョンの数に大きく依存する
– 動作しだすと安定
• 負荷を軽くするためにスリーピングシステムがデ
フォルトで有効に
– 動かなくなったエンティティや衝突を受けないエンティ
ティなど
– 下記コードでテスト可能
this.entity.rigidbody.isActive(); //スリープならfalse

32. (ドキュメントには載ってない！)Tips2
• 薄いコライダー同士だとすり抜けることがある
– 高速で移動するコインと壁のような同一軸にcollision
が少ない場合に起きる

33. すり抜ける原因
• 原因：実際にはテレポートで移動
– 移動量に対する中間フレームをデルタタイムで割っ
たキーフレームになっているため
壁
N N+1 N+2 N+3
コイン
シミュレート位置で
接触していない！
シミュレート地点
この間は
キーフレーム

34. 原因回避方法①
• コリジョンのサイズを大きくする
– 奥に何もなければこれが一番楽
壁
N N+1 N+2
N+3
コイン
シミュレート位置で
接触した！
シミュレート地点
見えない壁として
大きくcollisionを持つ

35. 原因回避方法②
• 予測分解能を増やす
壁
N N+1 N+2 N+3
コイン
シミュレート位置で
壁に接触！
シミュレート地点
this.app.systems.rigidbody.fixedTimeStep = 1/120; //デフォルトは1/60
https://support.playcanvas.jp/hc/ja/articles/233088508
※パフォーマンスに大きく影響
するので注意！

36. 物理エンジンを駆使したタイトル
• CMサイト様「OwlsDozer」
– Static/Dynamic/Kinematicすべて利用
– 詳しくはこちら
https://support.playcanvas.jp/hc/ja/articles/115005023268

37. まとめ
➢ PlayCanvasで物理エンジンは簡単に使えます！
➢ シンプルなシミュレーションならコーディング不要
➢ そこそこパフォーマンスは出る
➢ 20FPSなら300プリミティブは出せる
➢ 物理エンジンを駆使したタイトルも開発可能
➢ Ammoのドキュメントを読もう！
➢ PlayCanvasのドキュメントに書かれていない小技がたくさんある

38. お知らせ！
• ユーザー助け合い所開設しました！！！！！
– ラフな技術相談から作ったもの紹介などなど
• PlayCanvasユーザー寄り合い所
• https://www.facebook.com/groups/playcanvasjp/

39. お知らせ！
• We are Hiring!
– PlayCanvasを一緒に広めてくれるエンジニア/デザイナー
• Web/ゲーム両方の側面で探してます！
– Webエンジニア
• https://hrmos.co/pages/gmocloud/jobs/0000053
– Webデザイナー
• https://hrmos.co/pages/gmocloud/jobs/0000052

40. ご清聴ありがとうございました