VRoid→Blender→PlayCanvas→Mixamo→PlayCanvasでアニメーションをガンガン追加してみる

##はじめに
PlayCanvasにMixamoから色々なアニメーションをDLし、流し込む手順を解説します。
playCanvasにキャラクターがいないと話にならないので、**VRoid Studio**からセットアップ済みのキャラクターをDLします。
DLした**.vrm**を**PlayCanvas**に持って行きたいのですが、ちょっと現段階では無理があるので、**Blender**で.vrmをインポートします。
そこからさらに.fbxでエクスポートしたデータをPlayCanvasにインポート。これだけだとアルファテクスチャに問題があるので、マテリアルの調整を行い、再度playCanavsから.fbxをDL。そのデータを**Mixamo**にアップロードし、任意のアニメーションをトレースし、モーションデータのみDL、PlayCanvasへインポートします。<br>
…なんのこっちゃって感じだと思いますので、使うモノと手順を追って説明していきます。<br>
##使うソフトウェアやアプリケーション
**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をエクスポートする
![VRoidStudio01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/b85b15c1-9cfb-36b6-deb2-f8264b8a995b.png)
VroidStudioでキャラクターのカスタマイズが完了したら右上の"撮影・エクスポート"→左側の"エクスポート"→右側の"エクスポート"とクリックしていきます。
![VRoidStudio02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/64fbec67-f03b-26b0-b0e6-7e6dccac0f81.png)
アバターの人格設定や表現の許可を設定します。ここで赤枠の☑を入れないとアニメーションをあとから設定できなくなるので、☑を必ずいれてください。
![VRoidStudio03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/fea3470a-c293-dee4-ae25-7676134a523b.png)
保存してVroidStudioの作業は完了です。
##BlenderへVRMをインポートし、FBXでエクスポートする
BlenderにVRMをインポートするにはいくつかのアドオンをBlenderにインストールする必要があります。<br>
**VRM_IMPORTER_for_Blender2_8**　or　**VRM_IMPORTER_for_Blender2_79**VRMのインポートに必要
(blenderのバージョンにより違います)
https://github.com/iCyP/VRM_IMPORTER_for_Blender2_8
https://github.com/iCyP/VRM_IMPORTER_for_Blender2_79<br>
**cats-blender-plugin**VRMデータを最適化するために必要
https://github.com/michaeldegroot/cats-blender-plugin<br>
アドオンのインストール方法から各アドオンの使い方の詳細は[みっちー@nyu___nS]様の記事がとても分かりやすく解説なさっています！
参考記事：https://qiita.com/nyu___nS/items/abfd8c8edcb866b4c2d9<br>
ここではPlayCanvasへインポートするための最低限の最適化のみ解説します
![blender00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/eb626136-b4eb-bbd5-e078-59a76270de8c.png)
ファイル→インポート→VRM(.vrm)からインポートするか、CATのimportから読み込みます。
![blender03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/9f309a01-f379-9587-433d-f79203584c2f.png)
赤枠の"Fix Model"をクリックすると…
![blender04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/06fc5515-8fbc-8186-8606-2aaedaafc389.png)
1発でボーン構造とマテリアルが最適化されます。シーン上から不要なライトやカメラも削除されます。
![blender05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/8587bd2a-cb78-2322-35eb-219254a2e130.png)
"A"キーで全選択し、FBXへエクスポートします。
![blender07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/4b954007-4300-482d-e17d-4a65007e0230.png)
FBXのエクスポート設定は上記の画像のようにしてください。パスモードが"コピー"箱マークがオンになっていないとマテリアルが参照されずに保存されてしまいます。
##PlayCanvasへimportして調整する
![PlayCanvas03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/1aef76c5-f8a1-209f-21cb-b5b01318875b.png)
PlayCanvasのビジュアルエディターを起動し、FBXをドラック＆ドロップするかADD ASSETSからアップロードします。
![PlayCanvas04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/9b3701ae-f097-7020-b06f-f3afa55a9347.png)
この時点では透過情報が抜けている箇所があります。この問題はVroidStudioとBlender、PlayCanvasの標準シェーダーの透過処理の違いで起こる問題です。VroidStudioの標準シェーダーは"MToon"というトゥーンレンダリング用のシェーダーのためです。
![folder03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/1d727454-646d-49e0-eec9-b5a2bd28f9bf.png)
PlayCanvasの"OPACITY(透過)"用にグレースケール(白黒)の画像を作成します。
![PlayCanvas05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/70d78ab5-b5c3-ed23-1240-2ec7f2ccc987.png)
作成したグレースケール画像をASSETS欄に入れます。
![PlayCanvas06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/935ceffb-785d-78db-7b00-99899f5f1964.png)
マテリアルスロットルの"OPACITY"へ各グレースケール画像をアタッチ
![ss1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/665a52aa-0847-3d32-ce83-75e03be9c664.png)
BlendTypeを[**Alpha**]すると正常に透過されます。
![PlayCanvas08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/70fbcccd-e2ce-a8db-85b2-ea77758a137f.png)
マテリアル全体の調整が完了したらFBXをDLします。ASSETS欄内のFBXを選択し、インスペクター内の"Download"をクリックします。
##FBXをMixamoへアップロード/Mixamoからアニメーションをダウンロード
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/695d0d0d-2a31-f071-cf96-41a727b63640.png)
mixamoを開き、"UPLOAD CHARACTER"で先ほどダウンロードしたキャラクターのFBXを読み込みます。mixamo上でもアルファ処理が違っているので透過情報やカラーの一部がおかしい表示になっていますが、スキン情報は必要ないので、ここでは問題ありません。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/5182478d-eff2-1e6d-ac1c-5f0aa12d18fc.png)
任意のアニメーションを選択すると読み込んだキャラクターがそのアニメーションを再生します。
"DOWNLOAD"ボタンをクリックします。
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/3eb355bf-242b-8606-195c-9930798f5d45.png)
ボーンの情報のみ必要なので"Without Skin"を選択してダウンロードしてください。
##PlayCanvasでアニメーションを読み込む
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/23b39b51-f078-2394-8779-3c1fabb46c93.png)
ASSETS欄にアニメーション用のフォルダを新規作成し、ダウンロードしたアニメーションFBXをインポートします。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/7c90b65e-73cf-89d7-30a6-63d1c1b3a74c.png)
inspecterからADD COMPONENTでAnimationを追加し、+Add Assetsをクリックします。ASSETS欄内で選択可能なアニメーション.jsonにフォーカスされますので選択し、inspecter内のDONEをクリックするとアニメーションが追加されます。<p>
Mixamoから以下の手順で簡単にPlayCanvasにアニメーションを追加することができますので、シーンに合わせてどんどんアニメーションを追加していきましょう！