2019.11.20 PWA Night vol.10 ～PWA × 技術～ LT資料

1. 2019年11月20日
Monaca x PWA x ３D
バルテス・モバイルテクノロジー株式会社

2. バルテス・モバイルテクノロジーの紹介
2
バルテス・モバイルテクノロジー株式会社（略称：ＶＭＴ）
VALTES MOBILE TECHNOLOGY CO.,LTD.
設立 2012年10月17日
代表取締役 田中 真史
株主 バルテス株式会社（100％）
資本金 5,000万円
拠点 大阪本社、東京本社
業務内容 ソフトウェア開発、セキュリティ診断
コンセプト 高品質でセキュアなアプリケーションの開発・提供
テスト専門会社である親会社と連携し、開発へテスト力を付加し、
「高品質」で「セキュア」をキーワードに、サービス提供を行う。

3. 自己紹介
3
名前 山下大輔（やました だいすけ）
所属 開発部 マネージャー
出身 横浜市青葉区（たまプラーザ）
住まい 宝塚市（兵庫県）
趣味 競馬、陸上
得意分野 ３D全般（OpenGL、DirectX、Unity）
SNS
Facebook：@longjumper.daisuke
Instagram：@deepimpact_daisuke
Twitter：@jumper_daisuke
資格 Android技術者Basic、JSTQB FL

4. 4
自己紹介

5. 5
自己紹介-終わり
実は「マンガでわかるMonacaUG」に出てます。

6. 6
• Monaca x PWA x PlayCanvasで３Dモデルをぐりぐり動かす
• Monaca x PWA x PlayCanvasでVRを楽しむ
• Monaca x PWA x Unityで３Dモデルをぐりぐり動かす
• Monaca x PWAあるある
アジェンダ

7. 7
Monaca x PWA x
PlayCanvasで３Dモデル
をぐりぐり動かす
PWANight

8. 8
開発環境：Monaca Cloud IDE
PWANight
3Dエンジン：PlayCanvas
Hotingサービス：Firebase

9. 9
Monacaはハイブリッドアプリの開発環境
PWANight
PlayCanvasはWebGL/HTML5ゲー
ムエンジン
PlayCanvasはオープンソースでフリーで
使えます。（MITライセンス）

10. 10
やったこと。
PWANight
MonacaでPWAのテンプレート作成
PlayCanvasのソースを組み込み
そのままではモデルがぐりぐり動かなかった
ので、PlayCanvasのエディターでマウス
イベントモデルをぐりぐり動かすスクリプトが
あったのでそれをパクッて組み込み

11. 11
PWANight
出来上がりがこちらです。

12. 12
PWANight
ちなみにキャッシュはしてません。

13. 13
PWANight
時代はキャッシュレスなので

14. 14
Monaca x PWA x
PlayCanvasでVRを楽しむ
PWANight

15. 15
PWANight
次はVRをやります。
今回はMonacaデバッガー上
で動かします。

16. 16
PWANight
やり方は基本的にさっきと同じ
MonacaでPWAのテンプレート作成
PlayCanvasのソースを組み込み
VR機能を追加
なんとなくコードをみて、背景や形状を変
更してみた。

17. 17
PWANight
出来上がりがこちらです。

18. 18
PWANight
スマホでも動きます。
VRゴーグル持ってきたのであと
て見たい人は見せてあげます。

19. 19
Monaca x PWA x Unity
で３Dモデルをぐりぐり動かす
PWANight

20. 20
これだけちょっと違います。
PWANight
UnityEditerで３Dビューアを実装
モデルデータはCollada（*.dae）
フォーマットを表示
UnityでWebGLでビルド。
WebAssemblyに自動的に出力してく
れる。

21. 21
MonacaでPWAのテンプレート作成
PWANight
Unityで出力したWebAssemblyを組
み込み

22. 22
システムイメージ
PWANight
Unity
３Dビューア
WebGLでビルド
WebAssembly
Monaca PWA
HTML5+CSS+JavaScript
WebAssembly ぶっこんだらいいだけ！！

23. 23
PWANight
出来上がりがこちらです。

24. 24
PWANight
つまり３D部分は分断できる
Unityでビューアを開発
フロント部分はJavasctiptで組む
WebGLにビルドするとWebAssembly
になるので、JavaScriptで呼び出せる
データのやり取りさえ決めればあとは
ビューア側でよしなにやってくれる

25. 25
PWANight
つまり３D部分外注できる。
無理にやらなくていい。
得意な部分をJavaScriptでやって
出来上がったWebAssemblyと連携で
きたらいい。

26. 26
Monaca x PWAあるある
PWANight

27. 27
PWANight
MonacaでPWAはデバッグできないので、結構面倒くさい
プレビューがリアルタイムで反映されないので、その都度ターミナルを再起動
ローカルサーバーとかWebの環境構築が不要のため、すごく楽。
いきなり３Dは無理なので、できる人に任せる。
３Dで困ったら私に相談
してください。

28. 28
PWANight
PlayCanvasエンジン
https://github.com/playcanvas/engine
MonacaでPWAをFirebaseにデプロイする方法
https://www.slideshare.net/DaisukeYamashita4/pwa-
night-osaka-vol1-2019913
それでも３Dに挑戦したい人
AR/VRを始める前の３Dの基本的な事～3つの壁に挑もう！！
https://www.slideshare.net/DaisukeYamashita4/arvrd

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