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

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

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

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

PlayCanvasとは

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

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

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

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

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

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

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

PlayCanvas 3D Feature

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PlayCanvas新機能

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

えっ！なかったの？

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

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

使い方

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

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

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

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

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

お知らせ

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

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

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

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

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