デバイスの高性能化、次世代通信網５Gの普及を見据え、アプリではないブラウザベースのコンテンツが徐々に増え始めてきました！ WebGLベースのクラウド型ゲームエンジン「PlayCanvas」はカジュアルコンテンツ、リッチコンテンツ問わず高品質なコンテンツをビジュアルエディターから作成することができます。今回は、PlayCanvas内で3Dオブジェクトやマテリアルがどの様に扱われているかについてと、新しくリリースされたバージョン管理機能，ローディングスクリーンの実装等、すこし深い内容をお届けします！

1. The Web-First Game Engine
Collaboratively build stunning HTML5 visualizations and games
Webで3Dモデルはどう扱う？
PLAYCANVAS：3Dモデルディープダイブ
+新機能紹介！
PlayCanvas運営事務局
宗形 修司
津田 良太郎

2. はじめに
• 本プレゼンを聞いていただきたい主なターゲット
– UnityやUE4等を使ったゲーム開発経験がある
– HTML5ゲームがなんだか今アツそうだと思っている
– アプリストアにはもううんざりだ
– いまWebがむしろいいと思っている
– ゲーム資産をアプリ以外(Webとか)で使いたい
– 使われずにお蔵入りした3Dモデルがある！！
• Yesが1つでもある人にオススメ！

3. 登壇者の自己紹介
• 宗形 修司
– 2018年よりPlayCanvas運営事務局
デザイナー目線でPlayCanvasを広める
ために活動中
• 津田 良太郎
– 2016年よりPlayCanvas運営事務局
デベロッパー目線でPlayCanvasを広める
ために活動中 utautattaro.com

4. 本日のアジェンダ
• Webと3D
• PlayCanvasとは
• PlayCanvas 3D Feature
• PlayCanvas 3D オブジェクト＆マテリアル ディープダイブ
• PlayCanvas新機能
• まとめ

5. PlayCanvasとは

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

7. PlayCanvasとは
• WebGLゲーム開発エンジン
3D要素に強く、カジュアルゲームから、
リッチコンテンツまで幅広く開発が可能
• クラウド型の開発エンジン
エンジンのインストールや
プラグインのダウンロードが不要
• 中身はオールJSの軽量なエンジン
コンパイルをはさむ必要がなく、
即時性が高いのが特徴
• メールアドレス一つで登録、開始可能
サインアップしたら即PlayCanvasの
ビジュアルエディタが機能制限無しで使用可能

8. 一貫した開発ワークフロー
PLAYCANVAS 開発グループ
検
証
会
社
配
信
先
作成作業
開発キット
検証版
最新データ
配信版

9. PC/スマホでのクオリティ比較
PC Firefox 63.0.1 iPhone6

10. HTML内のcanvasに
• 基本的には1枚のcanvas
HTML
CSS

11. 主要ブラウザでの対応状況
• ブラウザ上で動作/HTML5ゲームプラットフォームも対応
– モバイル/PC/Oculusなどでも動作
– WebGL(v1/v2)に対応したブラウザなら大体動く
– エンジン自体の多くはES5ベースで記述
※2019/07時点

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

13. PlayCanvas 3D Feature

14. PlayCanvas 3D Feature
⚫ 特徴的な3D機能
– 3Dモデルアニメーションの
自動ブレンディング
– コリジョン/リジットボディを
ワンクリックで設定
物理シミュレーション可能
– フィジカルベースドレンダリング
(PBR）
– フィジカルシェーダーベースの
高品質マテリアル。各設定項目も豊
富
– イメージベースドライティング
(IBL)
– シェーダーもGLSLで書ける

15. 3Dモデルインポート
FBX/OBJはドラック＆ドロップで自動的にJSONに変換
テクスチャも用途に応じた圧縮が設定可能

16. 取り込み可能な画像データ
• 画像データの話
• JPG/PNG/GIF/TGA/BMP/TIF/HDR/EXRが読み込み可能
– インポートされたJPGとPNGファイルは元の形式のまま保たれる
透過情報を含む画像はPNGに自動変換される
• BMP/TGA/TIFはJPGに自動変換される

17. テクスチャデータの圧縮
• テクスチャ圧縮の話
– PlayCanvasでは3つのテクスチャ圧縮形式に対応
• DXT: 全てのデスクトップデバイス及び一部のAndroidデバイス
• PVR: 全てのiOSデバイス及び一部のAndroidデバイス
• ETC: 大部分のAndroidデバイス
• 1024×1024/VRAM4.19MBのテクスチャを
圧縮した場合
• DXT
• PVR
• ETC
チェックボックス入れてCompressをクリックでOK!
VRAM699KB

18. PlayCanvas 3Dオブジェクト＆マテリアル ディープダイブ

19. 3Dオブジェクト ディープダイブ

20. Poly△16433
Bone 135
Blendshap(morphing) 20
Material
カラー
スペキュラ
エミッシブ
ノーマルマップ
アニメーション
60fps
※
PlayCanvasはデフォルトで
アニメフレームレートが
60fps
3Dモデルの作成(MAYAの場合)

21. 注意点
ベースの3Dモデルと同じメッシュ
情報を持つモデルをコピーして各
アニメーションを作成。
同一メッシュから作成しないとア
ニメーションがエディター上で反
映されない。
PlayCanvasのVisual Editorへドラック＆ドロップ

22. デモします。
https://playcanv.as/b/iJwOeAD8/
シーンを見てみよう

23. Chromのコンソールで中
身を見てみると…
meshInstances
morphInstances
skinInstances
Material等々、maya上で
設定したボーン構造やブレ
ンドシェイプ(morph)が格
納されている。
※
補助ロケーターは
meshInstance内に入るが、
コンストレイン系は無視さ
れ、オブジェクトは原点で
固定される。
コンソールの中は…
HTMLで描画

24. ボーン/モーフの格納
ボーン構造 モーフターゲット

25. アニメーション ディープダイブ

26. MAYA上でのアニメ―ション
• MAYAで作成したパス/オブジェクト/ボーンアニメーション

27. • PlayCanvas上でのパス/オブジェクト/ボーンアニメーションの違い
オブジェクトアニメ―ションのポイント

28. シンプルな直線移動や回転はオブジェクトの
キーアニメーションでも問題ないが、急激な
カーブや複雑な動きになるとアニメーションが
意図しない動きをする。
回避策としてはジョイントを対象オブジェクトに
バインドし、ジョイントをアニメーションさせる
と正しくアニメーションが再生される。
• パス/オブジェクト/ボーンアニメーションの違い
車体/前輪/後輪
全て同じキーフレームを打っ
てある
オブジェクトアニメ―ションのポイント

29. マテリアル ディープダイブ

30. PlayCanvasのマテリアルの特徴
• オブジェクト1つに対して
1つのマテリアルを生成
主要な3DCG制作ソフトの
Rambert /Phongシェーダーで
テクスチャを設定。
FBXへ書き出し、PlayCanvas上へ
ドラック＆ドロップ。
設定した内容が反映された状態で
マテリアルが生成される。

31. マテリアルの格納場所
model._material.parameters.material_xxx

32. MAYA → PlayCanvas 実際の工程を見てみよう！
MAYAのphongシェーダーを使用
カラー(deffuse)
バンプマッピング(nomalmap)
スペキュラ
のテクスチャを設定。
FBX書き出しで組み込みメディア
にチェックを入れてエクスポート

33. 用意したテクスチャ
Diffuse Anbient Normal Parallax Specular Grossness
Alpha

34. MAYA→PlayCanvas実際の工程を見てみよう！

35. • FBXの大部分の内容が”json”として変換される！
• 複雑なアニメーションを作成する時はスキンアニメーションで！
• 標準マテリアルで思いのままに質感をコントロール可能！
3Dディープダイブまとめ

36. PlayCanvas新機能

37. ついに出ました！
バージョン管理機能！！

38. えっ！なかったの？

39. えっ！なかったの？
• そうなんです。。。
• GitHubと連携
– このころは共同開発力が低かった
↓
• Script2.0になってから利用不可に
– 声の掛け合いが重要な開発スタイルへ
↓
• REST APIで独自でCIが組めるように
– 全部落として全部上げる
↓
• 内部バージョン管理機能リリース ← いまここ
– ようやく人間らしい開発スタイルへ

40. バージョンコントロールシステム 基本機能
• チェックポイント
• ブランチ
• マージ

41. 使い方

42. バージョンコントロールEditor

43. DIFF/レストア/マージ
• DIFFをみたり
レストアしたり
マージしたり

44. バージョンコントロールまとめ
• 基本的にGUIからいろいろ実行することができる
• 無料プランでも利用可能
• REST API開発中

45. バージョンコントロール注意点
• 容量をとても食う
– ブランチ・チェックポイントetc…
– ブランチを削除してもブランチ分で利用した容量は減らない仕
様(2019年7月現在)
– 容量でお困りの際はお問い合わせください
– https://playcanvas.jp
• Exportはブランチ指定不可
– Project Exportは強制的にmasterブランチのみダウンロード

46. まとめ
• ブラウザ向け3Dライブラリの中では非常に効率的なワークフロー
– FBXの大部分の内容が”json”として反映される！
– 複雑なアニメーションを作成する時はスキンアニメーションで！
– 標準マテリアルで思いのままに質感をコントロール可能！
• バージョンコントロールシステムリリース🎉
– ようやく人間らしい開発スタイルへ！
– チェックポイント，ブランチ，マージ等々、PlayCanvasの即時開
発を殺さない独特なバージョンコントロールシステム！
– 用法容量を守って正しくお使いください。

47. お知らせ

48. ハンズオンやってます！
• 3D/2D/LP作成/CIなどなど！
• ゲーム開発に限らず、Web制作や開発フローについて教えます！
• 詳しくは
https://playcanvas.jp へ！

49. 事例紹介ページ作りました！
• PlayCanvasでいったいどんな事例があるんだろう。。
– そんな声にお答えすべく、事例紹介ページを公開しました！
https://playcanvas.jp/casestudy/
紹介事例大募集中です！取り上げてほしいユーザー様は、ぜひご連絡下さい！

50. ベンチマーク公開しました！
• PlayCanvasって結局、パフォーマンスどのくらい出るの。。。？
– という声にお応えして、ベンチマークアプリケーションを
公開しました！！！
– https://playcanvas.jp/benchmark/
– どの端末からも実行可能です
是非お試しください！！

51. コミュニティあります！
• PlayCanvas日本デベロッパー向けコミュニティ運営中！
– https://support.playcanvas.jp/hc/ja/community/topics
– 「PlayCanvas コミュニティ」で検索
• 技術フォーラムから雑談まで
– PlayCanvas運営事務局メンバーも滞在しています
– 技術相談やつくったもの紹介などなんでもどうぞ！
• 最新情報はTwitterから！
– https://twitter.com/playcanvasJP

52. Thank you !
The Web-First Game Engine
Collaboratively build stunning HTML5 visualizations and games