Vroid→blender→Mixamo→PlayCanvasでオリジナル3Ｄキャラを操作できるようにする！

オリジナルの3DキャラクターをPlayCanvas上で動かしたい！と思っても中々ハードルが高いかと思います。
そこで、VroidとMixamo、Blenderを使い、無料且つ専門知識や技術を使わずオリジナルキャラを走り回らせてみようと思います。

使用するコンテンツは以下のモノです。
- **Vroid**: キャラクターを作成します。
- **Blender**: キャラクターの調整をします。
- **Mixamo**: キャラクターにアニメーションを付けます。
- **PlayCanvas**: キャラクターのアニメーション制御、ビルドを行います。

**※ PlayCanvadで3Dモデルを制御するメリットとは**
PlayCanvasはブラウザベースのゲームエンジンであるため、ソフトウェアなどのインストールなどが不必要で誰でも簡単にブラウザからアクセスすることができます。また、クロスプラットフォームにも対応しており、PCはもちろんスマホのブラウザからもアクセスができ、容易により多くの方に遊んでもらうことが可能です。

# Vroidでキャラクターメイキング

キャラクターを作成していくには、通常、BlenderやMAYA、3dsMAXなどの3D作成ソフトからポリゴンモデリング、テクスチャ作成、リギング等の作成を行う必要があり、かなりハードルが高いです。
そこで、キャラクターをカスタマイズし、VRMでエクスポート出来る**Vroid**を使用します。

## Vroidをインストール
下記URLからDLし、それぞれの環境に合ったものをインストールしてください。
https://vroid.com/studio
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/8e60dae7-8453-40d6-d812-0a6623a7a06d.png)

起動するとキャラクターの選択画面がでます。今回はサンプルのキャラクターを任意に選んでください。
![vroid01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/e1f9ebe9-d6c2-71ac-58e4-055a3d2719aa.png)
キャラクターを選択し、右上部の**撮影・エクスポート**ボタンをクリック

## キャラクターをエクスポート
キャラクターのマテリアル数を最小にし、テクスチャーサイズも2048×2048へ変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/854959ac-28a1-f1b8-ed15-e86b4727bf4e.png)
VRMデータとしてエクスポートします。
左側の**エクスポート**を選択後、右側の**エクスポート**をクリック
![vroid03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/a99c7ef9-97a2-9cc2-c024-50de5156138e.png)
VRM設定のモーダルがでますので、タイトルと作者を記入したください。OKをクリックし、任意の場所に保存してください。
![vroid04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/729639c4-c2be-303a-a6d5-76df95a879bc.png)

# Blenderをインストール
下記URLからBlender LTS版をDLし、インストールしてください。
最新のBlenderでは対応していないアドオンが複数ありますので、今回は**Blender 2.83 LTS**で作業していきます。
https://www.blender.org/download/lts/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/4a531324-58ce-8481-0b39-e51fdde7999c.png)

## BlenderへVRMを読み込むアドオンを入れる
VRMデータを直接インポートすることはできないので、**cats-blender-plugin**というアドオンを入れます。
https://github.com/GiveMeAllYourCats/cats-blender-plugin
![blender01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/a662c44a-8013-0ff3-ba81-fa0d3adfa457.png)
ダウンロードした"cats-blender-plugin-master.zip"をBlenderのプリファレンスで設定します。

![blender02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/5cc5c560-6a82-18a0-5a06-e60f86bf2108.png)

## Catを使用しVRMデータを調整する
まずはVRMモデルをインポートします。
![blender03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/f393ae2a-c472-8451-94cf-e1f23de3454e.png)

### 3Dモデルの修正
モデ修正ボタンをクリックし、最適化しておきます。
この際、アイトラッキングやビムス(口の動き)などの指定もできますが、今回は特におこないません。
![blender06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/42dc6286-e468-bff5-7a9b-8a1349b62a41.png)

続いて、シェイプキーを削除します。シェイプキーが存在していると、モデルとボーンのリンクを切ることができないので、ここで切れる状態にしておきます。
![blender07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/cb1fe9b6-90c3-bb85-53c0-9c42512c90c9.png)

モディファイヤーリストからArmachereを**適用**しスタックから削除ます。
![blender09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/a9e676d1-566c-a8a6-61e8-1ffaee9c8bdc.png)

足のボーンを選択し、回転で角度を調整。もしくはボーンリストから数値で調整します。
だいたいZ：0.03　-0.03で丁度良い開きになります。この処理をしておかないと、Mixamoで見たときに足のポリゴンウェイトが正確に反映されずに、くっついた状態で処理されてしまいます。
![blender08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/bee52b22-a2fc-e90b-b1ea-b20b2b8b8e7c.png)

### VRMデータをfbxでエクスポート
オブジェクト**body**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/f79b0b02-d771-8094-c5de-117017eb8902.png)

ファイル→エクスポート→FBXをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/0d150c82-5ee1-4eec-3a53-11974e2a83cf.png)

パスモードをコピーに変更し、その隣のマークをアクティブにします。
Limit toの"選択したオブジェクト"にチェック。ファイル名は任意に決めてください。今回は**test**という名前にしています。

**FBXをエクスポート**ボタンをクリック。任意の場所に保存してください。
![blender05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/75b65849-1edd-6d79-2c9c-45470c51abcc.png)

# MixamoでアニメーションをDLしよう
Mixamoにログイン、もしくはサインアップしてください。
https://www.mixamo.com/#/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/9e9e350a-d96b-f52c-2692-f618a3632093.png)

##キャラクター.fbxをインポート＆設定
**UPLOAD CHARACTER**をクリックします。
![mixamo01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/14e8cc9e-ad1e-fc8c-fcb4-f452480867ee.png)

fbxデータをドラッグ&ドロップもしくは**Select character file**からフォルダ指定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/8e0bfd63-3cf5-dc38-d50c-9684e5c10ae0.png)

キャラクターのセットアップ画面になります。モデルに問題が無ければ**NEXT**をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/292bb2fb-cf72-d76d-0732-1c423320d957.png)

顎、手足の間接をマークして設定していきます。
右側のガイド画像を参考に大まかに位置をあわせるだけでOKです。セットできたら**NEXT**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/93ff75b2-2642-09f1-6156-7ad579d3b159.png)

オートリギングが完了するとマネキンがインポートしたキャラクターへ変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/58ee4b12-f8a9-7c2c-5ccb-41cbfaa6b544.png)

検索窓に**Locomotion**を入力し、**Male Locomotion Pack**を選択し、右側のDLボタンをクリックします。
ローカルフォルダの任意の場所に保存します。オリジナルのFBXがある場所がベストです。
![mixamo02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/72044d01-8c5a-34ed-230d-5c0afd073374.png)

今回使用するアニメーションは**Male Locomotion Pack**内にある以下の4つです。
- test.fbx(Tポーズのオリジナルデータ)
    - idle.fbx
    - jump.fbx
    - walking.fbx
    - standard run.fbx

# Blenderでアニメーションを調整
歩く、走るのアニメーションはその場で歩く、走るアニメーションにする必要があります。MixamoでDLしたアニメーションはZ軸方向に移動のアニメーションが入っているので、これを削除します。
インポート時にアーマチェアの**ボーン方向の自動整列**にチェックをいれてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/ca52e1b4-94fc-2dae-35f6-4146ecfb365e.png)

1. Animationタブをクリック
2. ポーズモードに変更
3. 腰のボーンを選択
4. Z軸のキーフレームを全選択し、削除します。

![blender10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/90eed2a0-dd1c-3b3f-6e40-bbd5a6fcc080.png)
ポーズモードをオブジェクトモードに変更し、ボーンオブジェクトを選択し、FBXでエクスポートします。
エクスポート時に**NLAストリップ**と**全アクション**のチェックを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/8a4213f1-7227-9926-57f4-1a9619026cad.png)

# PlayCanvasでアニメーションを制御しよう
PlayCanvas上でDLしたアニメーションデータを展開し、マウスをクリックした場所にキャラクターが走りながら移動するようにしていきます。
PlayCanvasのアカウントをお持ちでない方は下記URLからアカウントを作成してください。
https://playcanvas.jp/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/b443ca04-3781-7c77-8b8b-bfbcd18067fb.png)

## プロジェクトの作成
ログインするとマイページへ移動します。**NEW**ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/bc138870-5948-1ac2-ab35-a72c2d7569e6.png)

プロジェクトの種類、プロジェクト名(任意の名前)を入力し、**CREATE**ボタンをクリック
![playcanvas01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/29ab6db4-328e-3045-9a78-025b8b034aac.png)

作成された新規プロジェクトのENTERをクリックし、エディターを起動します。
![playcanvas02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/8a553c97-14ad-e18a-607e-bb9735d38949.png)

中央のボックスは非表示にするか、削除してしまって問題ありません。
非表示にする場合、ビューポート上の非表示にしたいオブジェクトを選択し、右側インスペクター内の**ENTITY**の**Enabled**のチェックを外します。
![playcanvas03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/e2e7d40c-9f13-058e-076b-92d7e4463539.png)

## .fbxのインポート
下部ASSETS欄に3Dモデル用の新規フォルダを作成し、その中にインポートします。
root(一番上の階層)を選択し、ASSETS横の"+"ボタンから"Folder"を選択します。
![playcanvas04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/00f7f69c-2733-3e3c-204a-7cc61af57617.png)

新しくフォルダが作成されました。フォルダ名を任意につけてください。フォルダを選択した状態で右側のインスペクターからリネームできます。
![playcanvas05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/26f028fc-ec06-64f6-30cd-a6a150ac26e8.png)

まずはオリジナルデータ**test.fbx**をアップロードします。ローカルフォルダから**ASSETS**欄の**3Dmodel**フォルダ内にドラッグ&ドロップするか、**+ボタン**から**Upload**でファイルを選択します。
![playcanvas08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/1b05e4ea-be06-e71b-24e4-eff3429b4a00.png)

続いて、**test.glb**をビューポートへドラッグ&ドロップします。
![playcanvas06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/c6737135-4850-054b-5031-4b851e69355d.png)

## マテリアルの調整
ビューポート上に表示された**test.glb**は顔のテクスチャが崩れています。これはBlender上とPlayCanvas上でのアルファ処理の相違で発生する問題です。
![playcanvas09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/a0cebe80-c998-48e0-dfa9-cdf52ef58859.png)

PlayCanvasのインスペクターからマテリアル**OPACITY**の内容を変更して修正します。

1. Blend TypeをAlpha
2. 空きスロットルに**texture_0.png**(顔部分のテクスチャ)をドラッグ&ドロップ
3. Colore Channelを**A**
4. Alpha To Coverageにチェックを入れる

![playcanvas07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/6ed1a5fa-6b1c-617a-5744-1cb6deccd292.png)
これでモデルの表示は整いました。

## CollisionとRigidBody

キャラクターが歩く為のフィールドを作成します。
HIERARCHYの**Root**を選択した状態で、HIERARCHY横の **+ボタン**から**Primitive**→**Plane**を選択してください。
![playcanvas10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/f9035656-cb7d-e123-ac6d-0799bf89b9e7.png)

右側のインスペクターのスケール値を15/0/15くらいのサイズにして調整します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/29c7bb0d-fc31-6718-64a2-f3ac37e62f1c.png)

続いて、キャラクターに、当たり判定**Collision**と剛性**RigidBody**を持たせます。

ADD COMPONENTから**Collision**と**RigidBody**を選択してください。
![playcanvas11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/a14fbeb5-7456-c191-2eac-7fd0d1628d6b.png)

CollisionのTypeを"Box"へ変更し、Half Extentsを7.5/0/7.5くらいにして、Planeと同じ大きさにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/7bed85b1-cc8c-b7cf-1857-b2c922771878.png)

RigidBodyの設定はデフォルトの状態でOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/32dac14e-56f7-b5f7-e794-5e092fb5677c.png)

## キャラクターとカメラの位置調整
ビューポート右上にある**Perspective**をクリックすると、Cameraからの視点モードに切り替えられます。
![playcanvas_cam01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/15b8b963-8630-12dd-0915-f6402cc9ef27.png)

斜め上から見下ろすような角度に任意で調整して、"Perspective"モードに戻ってください。
![playcanvas_cam02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/e44eca19-ae56-9edf-d234-7748741f175e.png)

## プロジェクトの複製**Fork**とスクリプトのコピー

クリックした箇所にキャラクターが移動するスクリプトをコピーしてきます。
こちらのURLからプロジェクトを複製**Fork**します。
https://playcanvas.com/project/806242/overview/vroidblendermixamoplaycanvas

**Fork**ボタンをクリックしてください。
![project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/14dccd23-7847-128b-c105-5e7bf0f4ab38.png)

任意の名前を入力し、右下の**Fork**ボタンをクリック
![fork.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/490123c1-d2c9-937a-6724-6b1e6621bd44.png)

複製されたプロジェクトの**EDITOR**をクリックし、スクリプトをコピーします。

**Animation.js**と**Locomotion.js**を選択し、コピーします。
![script.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/f74520ac-bb5c-1c48-d459-deb28b04bfaf.png)

続いて、オリジナルのプロジェクトへペーストします。
![playcanvas15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/87e9e3de-2cc7-3984-8491-df20d8933bd9.png)

## スクリプトをキャラクターに追加

キャラクターを選択し、ADD COMPONENTから**Script**をクリックし、インスペクター内に表示された**ADD SCRIPT**をクリック。プロジェクト内で使用できるスクリプト一覧が表示されますので、**Animation.js**と**Locomotion.js**を選択します。
![playcanvas16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/45e49467-53ee-7529-40bc-5b9987ba0ecb.png)
![playcanvas17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/d8f9535c-ff2c-3d19-484f-7afefe494d30.png)

## 実行してみる
ビューポート右上の三角マーク"Launch"ボタンをクリックすると別ウィンドウで現在設定されているプロジェクトが実行されます。
![playcanvas18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/322ce295-bf78-5838-3b14-c2c581ab6fb4.png)

マウスをクリックした箇所へキャラクターが歩く。
歩いている間に**X**を押していると走る。
スペースキーでジャンプです。
![launch01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/c485dd0c-5ff5-4e72-4cb0-02f53348cbcd.gif)

これでプロジェクトは完成です。続いて、公開用のURLを生成します。

## publish&buildで公開用のURLを生成する
上部の**Manage Scenes**をクリックしてくださ。
![playcanvas19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/a4422d1b-d975-ef7d-016b-491ba7ea411a.png)

最初にシーンを選択した画面が出てきます。右側の**PUBLISH**をクリックし、**PUBLISH TO PLAYCANVAS**をクリックします。
![playcanvas20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/143c975c-df93-8c3a-bd0e-2bb775309e45.png)

名称の変更やディスクリプション、バージョン情報等を記載する箇所があります。
一番下までスクロールすると**PUBLISH NOW**ボタンがありますので、クリックしてください。
![playcanvas21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/95ae898d-6729-a26c-260a-1a29955254e8.png)

赤枠内にあるURLが共有用のURLとなります！
![playcanvas22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/fd97acc4-6458-3287-8a11-e6a46c8c905e.png)

これで完成です。おつかれさまでした。

# まとめ
3Dキャラクターを作成し、ゲーム上で動かすというのは一昔前ではかなりの作業量が必要でした。
今回使用したVroid、Mixamo、Blender、PlayCanvasは全て無料！で且つ、かなりクオリティの高いモノを短時間で作成することができます。

※商用利用については[こちら](https://support.playcanvas.jp/hc/ja/articles/900007024443)を参照ください。