Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Web-First Game Engine
Collaboratively build stunning HTML5 visualizations and games
PlayCanvas運営事務局
津田良太郎
本セッションの要旨
➢ PlayCanvasのビルトインコンポーネントのひとつ、
【物理エンジン】についてお話します
➢ 使い方や、できること
パフォーマンスや、内部実装の仕組み、小技まで
アジェンダ
 PlayCanvasの説明
 PlayCanvas Physics engine
 使い方/できること
 パフォーマンス
 内部の話
 事例
 まとめ
登壇者の自己紹介
 津田良太郎 @utautattaro
 Webとゲームの間を行ったり来たりなエンジニア
 短期間でいろいろ作るプロトタイパー
 趣味は旅行とバドミントン
 PlayCanvas運営事務局(2016.4 - )
 ...
What is PlayCanvas?
イントロダクション
一言で PlayCanvasとは
ゲームエンジン
です!!
PlayCanvasとは
• ゲームエンジン
– WebGL向けのオープンソースなゲームエンジン
– すべてJavaScriptで記述されていて、scriptタグで呼ぶ
だけで使える
– ライブラリではなくゲームエンジンなので
カテゴリとしては...
PlayCanvas エンジンの特徴
• 軽量
• オールJavaScript
• OSS
PlayCanvasを始めるには – Get Started
<script src=‘./playcanvas-stable.min.js'></script>
var canvas = document.getElementById(‘ap...
これでゲームが作れる!
だけど、ねえ…
昨今のゲーム開発スタイルは…
• ビジュアルエディタを用いたものが主流
– 2Dゲーム開発でもエディタ付きのものを利用したり
• HTML+JSで3D空間を構築していくのはつらい
– 少なくともUnityで育ったゆとり世代の私には無理
_人人人人人人人人人人人_
> PlayCanvas Editor! <
 ̄Y^Y^Y^Y^Y^Y^Y^Y  ̄
そこで!
PlayCanvas Editor
• クラウドサービスとして提供
• 開発環境の構築必要なし!
• メールアドレス一つで登録、開始可能
• ブラウザ上で動くビジュアルエディタ!
• 初めての人でもHTML5ゲームが
簡単に作れる環境が整ってい...
PlayCanvas Physics Engine
使い方/できること
ビルトインコンポーネントのひとつ
• すぐ使えるコンポーネント
• 衝突:Collision
• 剛体:Rigid Body
使い方
• entityにコンポーネントをアタッチするだけ
できること
• 物理シミュレーション
– 剛体/軟体(スクリプトで実装)
– Static/Dynamic/Kinematic
• 衝突判定/接触判定
– Collisionのみでtriggerとして利用可能
– Rigidbodyをつけると衝...
Script.prototype.initialize = function(){
//接触時のコールバックを設定
this.entity.collision.on("triggerenter",
this._onTriggerEnter,th...
衝突判定
Script.prototype.initialize = function(){
//衝突時のコールバックを設定
this.entity.collision.on("collisionstart",
this._colstart,t...
PlayCanvas Physics Engine
パフォーマンス
ベンチマークアプリの開発と検証
• ベンチマークアプリを作成して検証
– 評価:20FPSに下がるまで
何インスタンスレンダリングできるか
• 項目
– スタティックメッシュ
– アニメーションつきスタティックメッシュ
– 物理制御されたプリミ...
各端末での検証結果
端末
項目
iPhone8
[373x553]
iPhone7plus
[375x591]
oppo R15 pro
[360x678]
Galaxy S6
edge[360x560]
MacBook Pro※1
[1280...
グラフで比較
0
100
200
300
400
500
600
700
iPhone8 iPhone7plus oppo R15 pro Galaxy S6
edge[360x560]
MacBook Pro※1 Let’s note※2
物...
使い方/できること/パフォーマンス まとめ
 ビルトインなのでアタッチするだけですぐ使える!
 剛体シミュレーションが可能
 スクリプトからイベントの設定も簡単
 端末によるが、300インスタンスくらいまでなら20FPS
のレンダリング...
PlayCanvas Physics Engine
内部の話
物理エンジンのソースコード
• 容量
コード全文
3.74
MB
ランタイム
1.83
MB
gZip
356
KB
コアエンジン
• ammo.jsを採用
– https://github.com/kripken/ammo.js
– Bullet(C++)をemscriptenでJavaScriptにしたもの
• PlayCanvasランタイムとは別で落ちて...
設計
• 決定性(Deterministic)は持たない
– 同一条件で複数回シミュレートしても同一の結果に
はならない
– Demo
物理エンジンのアップデート
• 2016年末にリファクタリングが完了
– 多くのBullet APIが使えるように
– PlayCanvasには表示されないが、
独自実装でBulletの軟体物理等もシミュレートできる
ラグドール デモ
(ドキュメントには載ってない!)Tips1
• initialize時に多少のオーバーヘッドがある
– コリジョンの数に大きく依存する
– 動作しだすと安定
• 負荷を軽くするためにスリーピングシステムがデ
フォルトで有効に
– 動かなくなった...
(ドキュメントには載ってない!)Tips2
• 薄いコライダー同士だとすり抜けることがある
– 高速で移動するコインと壁のような同一軸にcollision
が少ない場合に起きる
すり抜ける原因
• 原因:実際にはテレポートで移動
– 移動量に対する中間フレームをデルタタイムで割っ
たキーフレームになっているため
壁
N N+1 N+2 N+3
コイン
シミュレート位置で
接触していない!
シミュレート地点
この間は
キ...
原因回避方法①
• コリジョンのサイズを大きくする
– 奥に何もなければこれが一番楽
壁
N N+1 N+2
N+3
コイン
シミュレート位置で
接触した!
シミュレート地点
見えない壁として
大きくcollisionを持つ
原因回避方法②
• 予測分解能を増やす
壁
N N+1 N+2 N+3
コイン
シミュレート位置で
壁に接触!
シミュレート地点
this.app.systems.rigidbody.fixedTimeStep = 1/120; //デフォルト...
物理エンジンを駆使したタイトル
• CMサイト様「OwlsDozer」
– Static/Dynamic/Kinematicすべて利用
– 詳しくはこちら
https://support.playcanvas.jp/hc/ja/articles...
まとめ
➢ PlayCanvasで物理エンジンは簡単に使えます!
➢ シンプルなシミュレーションならコーディング不要
➢ そこそこパフォーマンスは出る
➢ 20FPSなら300プリミティブは出せる
➢ 物理エンジンを駆使したタイトルも開発可能
...
お知らせ!
• ユーザー助け合い所開設しました!!!!!
– ラフな技術相談から作ったもの紹介などなど
• PlayCanvasユーザー寄り合い所
• https://www.facebook.com/groups/playcanvasjp/
お知らせ!
• We are Hiring!
– PlayCanvasを一緒に広めてくれるエンジニア/デザイナー
• Web/ゲーム両方の側面で探してます!
– Webエンジニア
• https://hrmos.co/pages/gmoclou...
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

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

131 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

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

  1. 1. The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games PlayCanvas運営事務局 津田良太郎
  2. 2. 本セッションの要旨 ➢ PlayCanvasのビルトインコンポーネントのひとつ、 【物理エンジン】についてお話します ➢ 使い方や、できること パフォーマンスや、内部実装の仕組み、小技まで
  3. 3. アジェンダ  PlayCanvasの説明  PlayCanvas Physics engine  使い方/できること  パフォーマンス  内部の話  事例  まとめ
  4. 4. 登壇者の自己紹介  津田良太郎 @utautattaro  Webとゲームの間を行ったり来たりなエンジニア  短期間でいろいろ作るプロトタイパー  趣味は旅行とバドミントン  PlayCanvas運営事務局(2016.4 - )  utautattaro.com
  5. 5. What is PlayCanvas? イントロダクション
  6. 6. 一言で PlayCanvasとは ゲームエンジン です!!
  7. 7. PlayCanvasとは • ゲームエンジン – WebGL向けのオープンソースなゲームエンジン – すべてJavaScriptで記述されていて、scriptタグで呼ぶ だけで使える – ライブラリではなくゲームエンジンなので カテゴリとしてはUnityやUnreal Engineと同じ
  8. 8. PlayCanvas エンジンの特徴 • 軽量 • オールJavaScript • OSS
  9. 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. 10. これでゲームが作れる! だけど、ねえ…
  11. 11. 昨今のゲーム開発スタイルは… • ビジュアルエディタを用いたものが主流 – 2Dゲーム開発でもエディタ付きのものを利用したり • HTML+JSで3D空間を構築していくのはつらい – 少なくともUnityで育ったゆとり世代の私には無理
  12. 12. _人人人人人人人人人人人_ > PlayCanvas Editor! <  ̄Y^Y^Y^Y^Y^Y^Y^Y  ̄ そこで!
  13. 13. PlayCanvas Editor • クラウドサービスとして提供 • 開発環境の構築必要なし! • メールアドレス一つで登録、開始可能 • ブラウザ上で動くビジュアルエディタ! • 初めての人でもHTML5ゲームが 簡単に作れる環境が整っています!
  14. 14. PlayCanvas Physics Engine 使い方/できること
  15. 15. ビルトインコンポーネントのひとつ • すぐ使えるコンポーネント • 衝突:Collision • 剛体:Rigid Body
  16. 16. 使い方 • entityにコンポーネントをアタッチするだけ
  17. 17. できること • 物理シミュレーション – 剛体/軟体(スクリプトで実装) – Static/Dynamic/Kinematic • 衝突判定/接触判定 – Collisionのみでtriggerとして利用可能 – Rigidbodyをつけると衝突判定 – RayCastでエンティティを取得 とか
  18. 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. 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. 20. PlayCanvas Physics Engine パフォーマンス
  21. 21. ベンチマークアプリの開発と検証 • ベンチマークアプリを作成して検証 – 評価:20FPSに下がるまで 何インスタンスレンダリングできるか • 項目 – スタティックメッシュ – アニメーションつきスタティックメッシュ – 物理制御されたプリミティブ(box, sphere) – シンプルなパーティクル – リッチなパーティクル(テクスチャ、カラー値) – 2Dスプライトアニメーション ※イニシャライズ時のオーバーヘッドがあるため、初期インスタンス生成時のFPSのショットノイズは計測に考慮しない
  22. 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. 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. 24. 使い方/できること/パフォーマンス まとめ  ビルトインなのでアタッチするだけですぐ使える!  剛体シミュレーションが可能  スクリプトからイベントの設定も簡単  端末によるが、300インスタンスくらいまでなら20FPS のレンダリングをキープできる
  25. 25. PlayCanvas Physics Engine 内部の話
  26. 26. 物理エンジンのソースコード • 容量 コード全文 3.74 MB ランタイム 1.83 MB gZip 356 KB
  27. 27. コアエンジン • ammo.jsを採用 – https://github.com/kripken/ammo.js – Bullet(C++)をemscriptenでJavaScriptにしたもの • PlayCanvasランタイムとは別で落ちてくる – 不要な場合は削除可能
  28. 28. 設計 • 決定性(Deterministic)は持たない – 同一条件で複数回シミュレートしても同一の結果に はならない – Demo
  29. 29. 物理エンジンのアップデート • 2016年末にリファクタリングが完了 – 多くのBullet APIが使えるように – PlayCanvasには表示されないが、 独自実装でBulletの軟体物理等もシミュレートできる
  30. 30. ラグドール デモ
  31. 31. (ドキュメントには載ってない!)Tips1 • initialize時に多少のオーバーヘッドがある – コリジョンの数に大きく依存する – 動作しだすと安定 • 負荷を軽くするためにスリーピングシステムがデ フォルトで有効に – 動かなくなったエンティティや衝突を受けないエンティ ティなど – 下記コードでテスト可能 this.entity.rigidbody.isActive(); //スリープならfalse
  32. 32. (ドキュメントには載ってない!)Tips2 • 薄いコライダー同士だとすり抜けることがある – 高速で移動するコインと壁のような同一軸にcollision が少ない場合に起きる
  33. 33. すり抜ける原因 • 原因:実際にはテレポートで移動 – 移動量に対する中間フレームをデルタタイムで割っ たキーフレームになっているため 壁 N N+1 N+2 N+3 コイン シミュレート位置で 接触していない! シミュレート地点 この間は キーフレーム
  34. 34. 原因回避方法① • コリジョンのサイズを大きくする – 奥に何もなければこれが一番楽 壁 N N+1 N+2 N+3 コイン シミュレート位置で 接触した! シミュレート地点 見えない壁として 大きくcollisionを持つ
  35. 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. 36. 物理エンジンを駆使したタイトル • CMサイト様「OwlsDozer」 – Static/Dynamic/Kinematicすべて利用 – 詳しくはこちら https://support.playcanvas.jp/hc/ja/articles/115005023268
  37. 37. まとめ ➢ PlayCanvasで物理エンジンは簡単に使えます! ➢ シンプルなシミュレーションならコーディング不要 ➢ そこそこパフォーマンスは出る ➢ 20FPSなら300プリミティブは出せる ➢ 物理エンジンを駆使したタイトルも開発可能 ➢ Ammoのドキュメントを読もう! ➢ PlayCanvasのドキュメントに書かれていない小技がたくさんある
  38. 38. お知らせ! • ユーザー助け合い所開設しました!!!!! – ラフな技術相談から作ったもの紹介などなど • PlayCanvasユーザー寄り合い所 • https://www.facebook.com/groups/playcanvasjp/
  39. 39. お知らせ! • We are Hiring! – PlayCanvasを一緒に広めてくれるエンジニア/デザイナー • Web/ゲーム両方の側面で探してます! – Webエンジニア • https://hrmos.co/pages/gmocloud/jobs/0000053 – Webデザイナー • https://hrmos.co/pages/gmocloud/jobs/0000052
  40. 40. ご清聴ありがとうございました

×