はじめに
PlayCanvasにMixamoから色々なアニメーションをDLし、流し込む手順を解説します。
playCanvasにキャラクターがいないと話にならないので、VRoid Studioからセットアップ済みのキャラクターをDLします。
DLした.vrmをPlayCanvasに持って行きたいのですが、ちょっと現段階では無理があるので、Blenderで.vrmをインポートします。
そこからさらに.fbxでエクスポートしたデータをPlayCanvasにインポート。これだけだとアルファテクスチャに問題があるので、マテリアルの調整を行い、再度playCanavsから.fbxをDL。そのデータをMixamoにアップロードし、任意のアニメーションをトレースし、モーションデータのみDL、PlayCanvasへインポートします。
…なんのこっちゃって感じだと思いますので、使うモノと手順を追って説明していきます。
使うソフトウェアやアプリケーション
PlayCanvas:デスクトップとモバイルブラウザ向けに作られたWebGL/HTML5ゲームエンジン
https://playcanvas.jp/
blender:オープンソースの統合型3DCGソフトウェア
https://www.blender.org/
.vrm:VRアプリケーション向けの人型3Dアバター（3Dモデル）データを扱うためのファイルフォーマット
.fbx:Autodeskが所有するプロプライエタリなファイル形式
VRoid Studio:人型アバター（キャラクター）の3Dモデルを作成できるWindows・Mac用アプリケーション
https://vroid.com/
Mixamo:3Dキャラクターアニメーション用のWebベースのサービス
https://www.mixamo.com/
VRoid StudioからVRMをエクスポートする
VroidStudioでキャラクターのカスタマイズが完了したら右上の"撮影・エクスポート"→左側の"エクスポート"→右側の"エクスポート"とクリックしていきます。
アバターの人格設定や表現の許可を設定します。ここで赤枠の☑を入れないとアニメーションをあとから設定できなくなるので、☑を必ずいれてください。
保存してVroidStudioの作業は完了です。
BlenderへVRMをインポートし、FBXでエクスポートする
BlenderにVRMをインポートするにはいくつかのアドオンをBlenderにインストールする必要があります。
VRM_IMPORTER_for_Blender2_8 or VRM_IMPORTER_for_Blender2_79VRMのインポートに必要
(blenderのバージョンにより違います)
https://github.com/iCyP/VRM_IMPORTER_for_Blender2_8
https://github.com/iCyP/VRM_IMPORTER_for_Blender2_79
cats-blender-pluginVRMデータを最適化するために必要
https://github.com/michaeldegroot/cats-blender-plugin
アドオンのインストール方法から各アドオンの使い方の詳細は[みっちー@nyu___nS]様の記事がとても分かりやすく解説なさっています！
参考記事：https://qiita.com/nyu___nS/items/abfd8c8edcb866b4c2d9
ここではPlayCanvasへインポートするための最低限の最適化のみ解説します
ファイル→インポート→VRM(.vrm)からインポートするか、CATのimportから読み込みます。
赤枠の"Fix Model"をクリックすると…
1発でボーン構造とマテリアルが最適化されます。シーン上から不要なライトやカメラも削除されます。
"A"キーで全選択し、FBXへエクスポートします。
FBXのエクスポート設定は上記の画像のようにしてください。パスモードが"コピー"箱マークがオンになっていないとマテリアルが参照されずに保存されてしまいます。
PlayCanvasへimportして調整する
PlayCanvasのビジュアルエディターを起動し、FBXをドラック＆ドロップするかADD ASSETSからアップロードします。
この時点では透過情報が抜けている箇所があります。この問題はVroidStudioとBlender、PlayCanvasの標準シェーダーの透過処理の違いで起こる問題です。VroidStudioの標準シェーダーは"MToon"というトゥーンレンダリング用のシェーダーのためです。
PlayCanvasの"OPACITY(透過)"用にグレースケール(白黒)の画像を作成します。
作成したグレースケール画像をASSETS欄に入れます。
マテリアルスロットルの"OPACITY"へ各グレースケール画像をアタッチ
BlendTypeを[Alpha]すると正常に透過されます。
マテリアル全体の調整が完了したらFBXをDLします。ASSETS欄内のFBXを選択し、インスペクター内の"Download"をクリックします。
FBXをMixamoへアップロード/Mixamoからアニメーションをダウンロード
mixamoを開き、"UPLOAD CHARACTER"で先ほどダウンロードしたキャラクターのFBXを読み込みます。mixamo上でもアルファ処理が違っているので透過情報やカラーの一部がおかしい表示になっていますが、スキン情報は必要ないので、ここでは問題ありません。
任意のアニメーションを選択すると読み込んだキャラクターがそのアニメーションを再生します。
"DOWNLOAD"ボタンをクリックします。
ボーンの情報のみ必要なので"Without Skin"を選択してダウンロードしてください。
PlayCanvasでアニメーションを読み込む
ASSETS欄にアニメーション用のフォルダを新規作成し、ダウンロードしたアニメーションFBXをインポートします。
inspecterからADD COMPONENTでAnimationを追加し、+Add Assetsをクリックします。ASSETS欄内で選択可能なアニメーション.jsonにフォーカスされますので選択し、inspecter内のDONEをクリックするとアニメーションが追加されます。
Mixamoから以下の手順で簡単にPlayCanvasにアニメーションを追加することができますので、シーンに合わせてどんどんアニメーションを追加していきましょう！