ポチポチだけでVRoidのモデルをPlayCanvasにいれてみたい

この記事は、[PlayCanvas Advent Calendar 2022](https://qiita.com/advent-calendar/2022/playcanvas)の3日目の投稿になります。

PlayCanvasAcademyの課題で、下のようなモデル着せ替えツールを試作しました。
そのときに、VRoidのモデルをPlayCanvasにインポートするのが手間だったので、思いついた方法を紹介します。
難しい操作はありませんが、Unity、Blender、PlayCanvasの基本的な使い方がわかる人を対象にしています。


https://twitter.com/kazuyaplus/status/1570689004869394435?s=20&t=iGm_Yf2kwDUDEAjsY3QWWA

※この記事は、Blenderでマテリアル設定とか面倒！とにかくモデルをインポートして手っ取り早く試したい人向け記事になります。下記リンクでPlayCanvas公式の方法が紹介されているので、丁寧に調整したい場合は下記の記事をご覧ください。
https://qiita.com/shujimuna1102/items/15c5fde90e76f30e76dc

【使用したツールのバージョン】
Unityのバージョン：2021.3.0f1
Blenderのバージョン：2.93LTS (2.93.11)
VRoid Studioのバージョン：1.13.0

## VRoidStudioからVRMを出力

まずは、ベースとなるモデルを「VRoid Studio」でつくりましょう。
下記URLからダウンロードできます。

VRoid Studio
https://vroid.com/studio

今回はサンプルモデルをそのまま使用します。
サンプルモデルを選択したら、下のような画面が開くと思います。
なにも考えずそのまま、右上の「VRMエクスポート」を押します。

![playcanvas01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/3cadb2cf-67da-0949-8a65-e80d416cc0fb.png)

「VRMエクスポート」ボタンを押すと下のような画面になると思います。ポリゴンの削減やボーンの調整ができたりますが、そのまま「エクスポート」ボタンを押します。


![playcanvas02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/eead205b-321e-8834-a427-60c56f37eca9.png)

「エクスポート」ボタンを押したら、VRM設定が出てくるので、必要な情報を入力し、適当な場所に出力します。

![playcanvas03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/fcccd10f-111a-a76c-f2b3-80f6dc7a11b8.png)



## VRMをUnityでGLBに変換
VRMをUnityでGLBに変換します、下記のgithubからUniVRMのunitypackageをダウンロードしましょう。

UniVRM Ver：v0.107.0
https://github.com/vrm-c/UniVRM/releases

![playcanvas04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/481374d5-2a63-03f8-0c4f-3a2a57dc17da.png)

次に、ダウンロードしたunitypackageをUnityにインポートしましょう。

![playcanvas05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/58dda247-0b05-4e8e-517f-d7b3554daab4.png)


インポートに成功したら、上記メニューに「UniGLTF」「VRM0」というメニューが追加されているかと思います。

![playcanvas06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/7c95496e-e8b1-692d-f0ad-c86b46e97e30.png)

上記2つのメニューが確認できたら、先ほど保存したVRMをプロジェクトにドラッグ＆ドロップしましょう。インポートが成功したら下の画像のようになっていると思います。

![playcanvas07b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/8c396a24-450c-5f8c-468a-7eff7d8adfc7.png)

プレハブがすでに出来ていると思うので、シーンに置いてテクスチャが剝がれていないか確認します。

![playcanvas08b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/944d949a-17e9-cf3a-e0e5-459b751b19d0.png)

確認ができたら、次はこれをGLBに変換します。
シーン上のプレハブを選択したあと、上記メニュの「UniGLTF」から「Export to GLB」を選択しエクスポートします。

![playcanvas09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/2a036a50-39a2-b628-2cd1-992332921a54.png)

Windowsであれば、3Dビューアーで確認できると思います。アルファが抜けていませんが、このまま進みます。

![playcanvas10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/db10ae1d-d0d3-e6f8-9368-cda0e1ae4a7e.png)



## BlenderでFBXに変換

PlayCanvasはGLBをインポートできますが、Rigつきモデルを動かすには現状、FBXにする必要があるので、BlenderでGLBをインポートし、FBXでエクスポートします。

![playcanvas11b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/91ad72e0-870d-313f-8e5a-e903c3319d91.png)

インポートしたら下の画面のようになっていると思います。
キャラクターが灰色なんだけど？という人は、右上の赤枠で囲ったところを確認してください、表示形式がマテリアルになっていないと思います。
![playcanvas13b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/09568c6a-80dd-6602-3255-d02c82fa61c2.png)


インポートができたら、これをFBXでエクスポートします。適当な場所に保存してください。
![playcanvas12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/b5997421-1655-482e-41a5-44a626c1430a.png)

## PlayCanvasにインポート

先ほど、保存したFBXをPlayCanvasにインポートします。今回はBlankのプロジェクトを作り、そこにFBXをドラッグ＆ドロップしています。上手くいけば下の画面のようになっていると思います。
まだ、テクスチャをプロジェクトにインポートしていないのでキャラクターが灰色ですが、マテリアルとTemplateが読み込まれているのがわかると思います。

![playcanvas14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/4916558f-bdfb-4514-51df-0be041ff3127.png)

次に、Unityの [Assets>Model>test.Textures] 内のテクスチャをPlayCanvasで適当な空のフォルダを用意しそこにコピーします。Unityで全選択して、PlayCanvasにドラッグ＆ドロップしましょう。

![playcanvas15b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/4e24c798-5a64-2669-8765-ae2ae9bb0a9b.png)

ここから、面倒ですがUnityとPlayCanvasの画面を見比べながら、マテリアルにテクスチャを当てはめていきたいと思います。
下の画像のUnity側の赤枠で囲ってる箇所の「N00_000_00_Body_00_SKIN」というところを見てもらうと、PlayCanvasにも同じものがあるのがわかると思います。
このマテリアルを選択し、「DIFFUSE」を開き、先ほどPlayCanvasにインポートしたテクスチャの中から、同じテクスチャを探しここに入れます。

![playcanvas16b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/8a5bba8f-3139-4e54-4fee-3910a9acf148.png)

全マテリアルで、この作業をすると下のようにテクスチャがついたと思います。

最後に、眉毛等のアルファがあるものは、下図の赤枠の箇所、Diffuseに入れたものと同じテクスチャを「OPACITY」に追加し、「AlphaTest」を調整してみてください。

![playcanvas17b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192685/59722d4b-3b32-420b-8f9c-44d63c5bb26f.png)


## おわりに

これで、ざっくりVRoidの見た目を再現できたと思います。丁寧にやるのであればもう少し調整が必要ですが、手っ取り早く確認したい場合は、UnityもBlenderも1回設定すれば使いまわせるので便利かと思います。
需要があればPlayCanvasでのアニメーションのインポート方法についても紹介します。