VRMファイルをBlenderとUnityで雰囲気合わせてカスタマイズする

# はじめに

　VRoidStudioでVRoidを作り始めて慣れてきた頃に、もうちょっと元のキャラの衣装のパーツを再現したいとふと思った。そこで手を付け始めたのがかの有名なBlenderと、ゲーム制作環境であるUnityだ。

　本記事ではあくまで自分が作業する上でポイントだと思った点を覚え書き目的で記載していく。
　なにせこの記事を書いた時点でまだBlenderも1ヶ月程度の経験レベル・Unityも同等というド素人なのでもっとこうしたほうがいいよ！などアドバイスあればいただきたく。


# VRoidStudioでベースのVRMを作る

　まずはVRoidを作っていく。VRoidStudioは簡単に・かなりの部分をいじれるので正直これだけでも慣れればオリジナルキャラはもちろん、各ゲームやアニメ等のキャラクターを再現することも可能である。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/e07f7d7e-955a-d18c-6118-793c87f822f5.png)
※戦艦少女Rというゲームのキャラクター、巡洋戦艦レナウン

　しかしながらまだ開発中ということで、衣装の各部位が未実装だったりするのはこれからに期待したいところである。

　サンプルとして巡洋戦艦レナウンをVRoidStudioで作成した。このキャラは本来ヘッドセットや足に艤装という戦うための武装をしている。しかし、VRoidStudioでできるのはメイド服やヘッドドレスなどまでだ。

　ある程度まで出来たら、「撮影・エクスポート」の「エクスポート」を実行し、VRMファイルを保存しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/4985af5b-247a-1456-7d24-ee6a80503c6c.png)

エクスポート時にはVRoidとしての基本情報を入力する必要がある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/f7b55abb-e9b1-8a2f-4989-0f5fb542d9ae.png)

ここですべて入力しなくともあとの工程で入力可能なので、せめてタイトルくらいは入れて出力しておこう。


# Blender で必要なパーツを作る

　ここからが本番である。
　Blenderは2020/08/07時点で最新である2.83を使っている。

　なお、BlenderでVRMを読み込ませるには公式ヘルプから関連記事に飛べるので、そちらを参考にしてほしい。

[VRMファイルの編集方法 / VRMファイルはVRoid Studioで再編集できますか？](https://vroid.pixiv.help/hc/ja/articles/360020275314-VRM%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E7%B7%A8%E9%9B%86%E6%96%B9%E6%B3%95-VRM%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AFVRoid-Studio%E3%81%A7%E5%86%8D%E7%B7%A8%E9%9B%86%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%81%8B-)

　目的のパーツの大きさや位置合わせをするのに絶対に必要なので、BlenderでVRMを読み込めるようにしておこう。

## パーツを作る

　ここからは普通に3Dオブジェクトを作る作業・手順である。書籍等参考にしてガシガシ作っていこう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/cee4385b-3e55-637a-6c4d-4a92723b2b7b.png)

　レナウンのヘッドセットを作った。（赤く選択されたパーツ）

原作ゲームの絵を見るともっと細かいが、自分の技術的に完全再現は無理なので、パッと見て雰囲気的に合ってる程度に留めた。

## テクスチャを準備する

　パーツに当てはめるためのテクスチャ画像を用意する。そのためには、「UV Editing」メニューでUVマップ、つまりテクスチャを画像からどのパーツにどのように当てはめたいのかを設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/0c766a2e-b0b6-2094-c62a-29d236c7d0a5.png)

このあたりは、VRoidStudioでテクスチャの編集に慣れていればなんとなくわかるだろう。そして、
あのツールが相当良くできているのも実感するはず。
一から自分で作ると非常に面倒だ。（しかし望むとおりに作れる）
ひねくれたパーツの構成にならないよう、うまくパーツを作り込みたいところである。


## Shadingをいじる

　一通り形ができたら、Shadingメニューをクリックして画面を切りかえる。

　ここで普通に「新規」をクリックしてはいけない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/ea92471e-242d-1924-c7c3-247c866ebb95.png)

すると、「プリンシプルBSDF」というシェーダーが作られてしまう。これでは、元のVRoidの雰囲気と合わない。なので作成を押した後、プリンシプルBSDFは選択して消してしまおう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/21f9741c-7c00-3bd9-4866-3e7755525a08.png)

そこで、「追加」→「グループ」→「MToon_universioned」を選ぶ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/5d4261ea-994a-8e1d-e83b-7db3022b0777.png)

そして次のようにする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/d1e3ed70-3da9-63c6-ab73-2b94f0463686.png)

1, MToon_universionedの右の放射と、「マテリアル出力」の「サーフェス」を接続する。
2, 別途用意したテクスチャファイルを読み込みたいので、「追加」→「テクスチャ」→「画像テクスチャ」を選ぶ。
3, 画像を読み込み、「カラー」を「MainTexture」と「ShadeTexture」の2箇所に接続する。
4, 「アルファ」を「MainTextureAlpha」に接続する。

元のVRMの本体のShadingを見ると色々接続されているが、どうやらこれだけでも十分目的を達成できることがわかった。
（実際には全部同じになるようにしないといけないのだろうが）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/060233ae-5109-a760-0f53-f5a72d519d77.png)


## 外部へ出力する

　一通りできたら、ファイルメニューの「エクスポート」から「wavefront (.obj)」形式で出力する。（FBXでもよいが、今回はobjにした）

1, 出力したいパーツの全オブジェクトを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/ed9b659b-76d2-c808-72f8-0655be4b82f2.png)

2, 出力のオプションは次のようにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/cb0b39ed-c192-c3af-ee83-9ad96bc014c0.png)

「選択物のみ」にチェックを入れないと、全オブジェクトが出力されて大変なことになる。

ここまでやって、ようやく目的のパーツがほぼできあがる。

# Unityで結合作業

　UnityでもVRMを読み込むには設定が必要となる。上記リンクから関連記事に飛べるのでそちらを参考にしてほしい。
　なおVRoidSDKのため、登録申請が必要となるので忘れずにやっておこう。

## Unityエディターで読み込む

　Unityに次のものを読み込ませる。

・VRMファイル
・objファイル
・mtlファイル
・テクスチャ画像

　エクスプローラでUnityのプロジェクトフォルダの「Assets」フォルダに放り込んでもいいし、エディタ上で「Assets」フォルダにドラッグアンドドロップしてもどちらでもよい。
　読み込みと適切な変換が始まるのでしばらく待つ。


## UnityにVRoidを配置する

　Unityの基本的な使い方に沿ってVRMファイルから配置していく。地面に埋まったり空飛んでいたりする場合があるが、今回はゲームを作るわけではないので気にしない。


## マテリアルを作成する

「アセット」→「作成」→「マテリアル」を選びマテリアルを作成する。
　Shaderは「VRM/Mtoon」にする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/dc3fa3f4-a733-50cd-b5b1-a683cd03b833.png)

　プロジェクトペインからテクスチャ画像を「Texture」の左端の四角い部分にドラッグアンドドロップする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/58003d25-51be-545f-e3ac-a380fbfa8845.png)

これでマテリアルができた。


## パーツにマテリアルを設定する

　パーツのインスペクタを開き、「オンデマンドの再マッピング」のすべてのマテリアルに、先程作ったマテリアルを設定していく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/57c6ce10-08ce-ec3a-69dd-b25404007d9d.png)

　最後に「適用する」を忘れずに押しておこう。

## パーツをVRoidの目的の場所に配置する

　Blenderのときと同様に位置を頑張って測って設定していこう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/518be218-a9ee-f9c2-2930-70057a1ba49c.png)


## ライティングやエフェクトの確認

　ここまで来たら後はもうVRMファイルを出力し直すだけなのだが、元のVRoidと描画の雰囲気が合っているか、そして光やエフェクトが適切にかかるかを確認しておこう。
　ライティングはエディタの上部にある「電球」マークのボタンで切り替えられる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/9598d0f8-da88-cd03-b13d-a0ca85c4eda5.png)

　ここで設定と実際の効果をまとめておきたい。

Blender上のMToon_universioned　・・・　パーツのテクスチャの描画をVRoidのテクスチャと雰囲気を合わせた。

Unity上のマテリアルのVRM/MToon　・・・　ライティングやエフェクトのかかり具合をVRoidに合わせた。

## VRMを再出力する

　ヒエラルキー上でVRoidをクリックして選択し、「VRM」メニューから「UniVRM-x.xx.x」を選び、「Export humanoid」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/b2821b3d-197a-b29c-472d-bb56a35a19e9.png)

この段階でもVRoidの情報を入力できるので、忘れずに入力しよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/eb244d82-603f-7ace-bfde-8f5b9b8c2a39.png)

元のVRMと名前を同じにすると上書きするので、それが都合悪いのであれば名前を変えて保存しよう。


# 終わりに

　以上が自分がVRoidStudioの外でVRoidを加工する際に用いた手順である。
おそらく、というか確実にこれよりも更に的確で適切な手順が確立されているに違いない。
が、自分で結果を確認して手順編みだすというのは重要だろう。

なお、最初はMToonなんたらを設定しなければならないことを知らなかったため、VRoidのパーツがBlenderの描画丸出しだった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38416/7949d7f8-1f87-c82f-08f9-3ce78f8a86cb.png)

左：MToon系適用前　　　　右：Mtoon系適用後

　VRoid対応アプリで背景にエフェクトがかかっていたりすると、自作のパーツにまでエフェクトがかかったり、逆にVRoidにかかるべきエフェクトがかかってなかったりした。
　MToon系の設定は忘れずにやっておこう。

　これからVRoidを作りたい、もっと工夫したいという方々の参考になれれば幸いである。