初めに
お手軽に(お金をかけずに)3Dモデルやゲーム開発エンジンを使いたい人向けに、最近流行りのVRoid Studioで3Dキャラクター生成し、WebGLベースのゲーム開発エンジン PlayCanvas で動かせるようにしてみます。
流れとしては…
1. VRoid Studioでアバターを形成してエクスポート
2. Blender 2.8でVRoidの拡張子.vrm を .fbx に変換
3. PlayCanvasにインポート - PUBLISH公開
基本、これだけです。
アニメーションを付けたり、アバターをカスタマイズするのはBlenderで行いますが、今回の記事では割愛します。
必要な環境
VRoid Studioでアバターを生成するために
VRoid Studioをダウンロード↓
Blenderで.vrmを.fbxにExportするために
Blenderをダウンロード↓
※バージョンは2019/10時点の安定版2.8を基準に解説します。
何かと話題の "統合型3DCG作成ソフト" オープンソースなんだぜ！
PlayCanvasにインポートするために
PlayCanvasのアカウントを作成！
PlayCanvasは、JavaScriptsで作られたHTML5/WebGLで動作するゲームエンジンです。
インストールの必要もなく、開発から公開までWebブラウザ一つで動くクラウドにホストされるため、URLにWebブラウザからアクセスすることで複数人で開発、公開したコンテンツを一緒に遊ぶことが可能です。
これもオープンソースなんだぜ！※有償プランもある
最後にPlayCanvasでPUBLISHしてweb上に公開してみよう！
1. VRoid Studioでアバターを形成してエクスポート
顔や体形、髪型の形成を行い、撮影・エクスポートタブからエクスポートします。
髪の毛メッシュをBlender上で編集しない場合は、統合にチェックを入れてください。でないと、髪束1つ1つの独立したメッシュとマテリアルがとんでもない数生成されます。
上記画像の右側のエクスポートボタンを押すと、下記画像のVRM設定というモーダルが出ます。
アバターの人格に関する許諾の設定 内の このアバターを用いて暴力表現を演じることの許可 もしくは このアバターを用いて性的表現を演じることの許可 にチェックを入れてください。
ここのチェックが無い状態でエクスポートするとウェイト設定が入っていない状態で出力されてしまいます。
OKすると.vrmのファイルが生成されます。
2. Blender 2.8でVRoidの拡張子.vrm を .fbx に変換
Blenderをインストールしただけだと、.vrm を読み込むことができません。
github上にある VRM_IMPORTER というアドオンをBlenderに入れます。
これで、Blender上で.vrmのインポート/エクスポートが可能になります。
※Blenderのバージョンに合わせて、VRM_IMPORTER_for_Blender2_8かVRM_IMPORTER_for_Blender2_79をインストールしてください。
---Blender Add-onの入れ方---
githubからzipダウンロードし、適当な場所に置いといてください
→blender/編集/プリファレンスを開く
プリファレンスのウィンドウ内のアドオンを選択し、上部のインストールボタンをクリック
先ほどダウンロードしたzipを指定して、ファイルからアドオンをインストールをクリック
これで、Blenderに.vrmを読み込むことが可能になりました。
VRoid Studioでエクスポートした.vrmのファイルを読み込むと、ウェイト設定が入った状態のキャラクターが出てきます。
この時、.vrmが置いてある場所を確認すると、各種テクスチャーとUnity内で使用するサムネイル画像等々が生成されています。
---マテリアルの調整---
この状態でPlayCanvas上にfbxをインポートしてもマテリアルは真白です。テクスチャーもロードされません。
原因はVRoidの.vrmに設定されている MToon_unversioned というサーフェイスがPlayCanvasでは対応していない為です。
MToon_unversionedは、UnityとVRoid Hub上で良い感じのセルルック調を出してくれるシェーダーですが、PlayCanvasのデフォルトマテリアルではセルルックを処理できないので(GLSLでカスタムシェーダーを作らない限り)、PlayCanvasが対応できる Blender 2.8 のデフォルトマテリアル プリンシプルBSDF に変更します。
オブジェクトを選択 → コンテキストマテリアルを選択 → 設定されているマテリアル一覧から、
変更したいマテリアルを選択 → サーフェイス欄に設定されているMToon_unversionedの右側の 〇 をクリック
シェーダーの一覧が出るので、 プリンシプルBSDF を選択
マテリアルを変更したことにより、オブジェクトのカラーは一旦消えます。次に、ベースカラーの右端 〇 をクリックし、画像テクスチャを選択します。
白に設定されていたカラーが画像カラーに変更され、画像が未指定なのでオブジェクトカラーは真っ黒になります。
画像 マークをクリックし、オブジェクトに対応している画像を選択します。
全てのマテリアルをこの手順で調整していきます。今回はとりあえず、肌と服だけ変更しました。
これでマテリアルの設定は完了です。
---FBXの保存設定---
そのままfbxのデフォルト設定でエクスポートすると、PlayCanvas上でマテリアルが関連付けられてない＆アニメーションが反映されないといった問題がでてきますので、調整します。
まず、キャラクターをオブジェクトモードで選択状態にし、ショートカットキー A でキャラオブジェクト直下の全ての要素を選択状態にします。
Blender上で ファイル/エクスポート/fbx で保存ウィンドウが開きます。
左下の FBXをエクスポート の▼をクリックすると詳細設定が出てきます。
■メインタブ
選択したオブジェクト のチェックを入れる。※これをしないとライトやカメラも含まれます。
一番下に、 パスモード という項目があります。
これを 自動 から コピー に変更し、文字横の非アクティブになっているマークをアクティブにします。
ジオメトリ、アーマチェア は調整する部分はありません。
■アニメーション
NLAアクション、全アクション、強制的に開始/終了キーを挿入のチェックを外してください。
アニメーションのフレーム飛びや、モディファイアで何か設定している場合PlayCanvas側で正確に反映されなくなる原因になります。
これで、設定完了です。右上の FBXをエクスポートで保存してください。
3. PlayCanvasにインポート - PUBLISH公開
PlayCanvasはクラウド型のゲーム開発エンジンなので、ダウンロードやインストールが一切不要です。全ての機能がここから利用できます。
まず、PLAYCANVAS日本公式サイトの無料アカウント作成からアカウントを作ってください。
次に、マイページからNEWボタンで新規のプロジェクトを作成します。
どの形式のプロジェクトで作成するかを選ぶモーダルが出ます。
最終的にマウスやタッチ操作でグリグリキャラクターを動かしたいので、 Model Viewer Starter Kit を選択。
DETAILSにプロジェクトの名前を任意に設定すると、右下のCREATEボタンがアクティブになりますので、これをクリック。
作成したプロジェクトページに切り替わります。
- Blank Project ： 基本的なProject
- Model Viewer Starter Kit ： カメラの制御に関するコンポーネントが既に- 設定されているProject
- VR Starter Kit ： VR対応の二画面構造で出力されるProject
作成したプロジェクト名が入ったページの EDITOR ボタンをクリックするとPlayCanvasエディターが開きます。
エディターの説明はここでは割愛しますが、以下を参照ください
- EXPLORE: 多数の参考プロジェクト。構成要素やスクリプトを見ることができる
- FORUM: お知らせ/講演資料(国内)/ご契約(有償プラン)/テクニカル(国内のハンズオン資料)/チュートリアル
- DOCS: APIリファレンス/ユーザーマニュアル等々
PlayCanvasへFBXをインポート
とても簡単です。
PlayCanvasエディターのASSETS欄にローカルフォルダ内の.fbxをドラッグ＆ドロップすると、javascriptが解析できる .json形式に自動変換 されます。
また、使用するのは変換された .json の方だけなので、 .fbx は破棄してしまっても問題ないですが、残しておいてもプロジェクトの容量を消費するだけなので消しましょう。
マテリアルの調整で肌と服のマテリアルだけ プリンシプルBSDF に変更した部分だけ、テクスチャーが引き継がれているのが確認できます。
また、アニメーションを含んだ.fbxをアップすると、 アニメーションの.json と オブジェクトの.json に自動的に分けられて変換されます。
プロジェクトをPUBLISHして公開
PlayCanvasは公開用のURLを素早く簡単に生成できます。
ビューポート上部の"Manege Scenes"をクリック
最初にエディターを起動した時に出たモーダルが表示されます。
PUBLISH をクリックし、PUBLISH TO PLAYCANVAS をクリック
PUBLISH NEW BUILD ページに移動します。
一番下までスクロールするとPUBLISH NOW をクリックするとビルドが開始されます。
BUILDS ページへ自動で移動します。上部URLが公開用のURLです。
以上になります!
blenderでの調整がちょっとめんどいですが、PlayCanvasでの工程は非常にシンプルです。
作成した3Dモデルを、簡単にWEB上に公開することができるのは、PlayCanvasの最大の特徴かと思います。
また、HTML5との親和性が非常に高くiframeで埋め込むことが可能なです。
自身のサイトやTwitter(Twitter Cardにもできる)、LINEなどに埋め込んで、リッチな3Dコンテンツをどんどん作りましょー！
更新(2023/04/07):
PlayCanvasのアニメーションは、今は AnimStateGraph で設定するようにアップデートが行われています。
AnimStateGraphを学ぶならこちらのチュートリアルをご覧ください