VRMのコアラアバターを自作してダンスさせた話

「QualiArts Advent Calendar 2021」 22日目の記事になります。
今回紹介するのはこちらについてです！

<img src="https://user-images.githubusercontent.com/25292248/146956148-e5f52be3-4c53-4c9b-9f72-3a638715ad40.gif">

私がQiitaのアイコンに設定しているコアラを3D化してVRMで出力してダンスさせた話になります。
他の方々の記事よりもゆるい内容になっていますので、息抜きがてら見ていただけると良いかもしれません。

## はじめに
本記事ではBlender2.9を使用してVRMアバターを作成し、動かすまでの流れを説明します。VRMは聞いたことがあるけどよく知らない、自分のアバターを作って動かしてみたいという方に、本記事を通してどうやって作り、どうやって動かすのかをざっくりとでも知っていただきたいと思います。意外と簡単なので、皆様がアバターを作成してみたくなるきっかけになると幸いです。

### 使用する環境
- [Blender2.9](https://www.blender.org/download/)
    - リギングとモデル出力に「[VRM Add-on for Blender](https://github.com/saturday06/VRM_Addon_for_Blender)」というアドオンを利用するので、インストールしてください。
- [VRMLiveViewer](https://booth.pm/ja/items/1783082)
    - 最初から楽曲やダンスモーションが入っているので、VRMモデルさえあればすぐにダンスさせることができます。

### Blenderについて
無料で始められる3DCGソフトウェアです。無料であるにも関わらず、3DCGを制作するには充分すぎる性能を持っており、世界中に愛用者がいます。一昔前まではショートカットキー操作が基本でとっつきにくい印象がありましたが、今となってはUIなどが見直されて誰でも気軽に制作を始められるようになっています。3DCG制作を始めてみたい方はBlenderを使えば間違いなしです。Steam版も出ており、プレイ時間を確認できるようになっているのも嬉しいです。
私は下記サイトでBlenderの操作方法を学びました。非常におすすめです。
http://krlab.info.kochi-tech.ac.jp/kurihara/lecture/cg/BlenderWeb_Hayashi/html/basicOperation.html

### VRMについて
FBXやOBJなどの3Dファイル形式の1つです。人型3Dモデル用に特化しています。今回紹介するVRM用のアドオンを利用することで、簡単に3Dモデルが動かせるようになります。VRM対応のアプリケーションは多く存在しているので、一度オリジナルアバターを作ってしまえばたくさん楽しめるようになります。

### コアラについて
私がQiitaのアイコンに設定している緑の蛍光色のコアラです。大学生の時にInkscapeの授業で制作し、GitHubのアイコンに設定したことで自分のトレードマークになりました。いつかは3Dにしてみたいと考えていたので、今回を機に作成して遊んでみます。
![25292248.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/98535dff-593e-914b-3737-702e138264c2.png)

## 手順
手順は下記になります。
1. 下絵作成
2. モデル作成
3. マテリアル割り当て
4. リギングしてスキニング
5. VRMで出力して動かす

### 1. 下絵作成
モデルを作成するための準備になります。作成したいモデルを立体で捉えられるように2面図や3面図に起こします。衣装やアクセサリーを身に付けていたりしてディティールに関して説明しておきたい場合はそれ単体について絵や文字に起こしておくこともします。今回は作成対象が簡単な形状だったので、正面と横からの2面図だけにしましたが、さらに複雑な形状になると後からも捉えた3面図を用いたりします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/97d8a52b-52fa-b5de-3606-2ac1267d46b9.png" width=500>

### 2. モデル作成
Blenderに2面図をセットして、それぞれのアウトラインに沿うように面を張って行きます。斜めから見た時のアウトラインはないので、自分の感覚に頼りながら進めていきます。地道な作業になりますが、イメージ通りの見た目になるように整えます。慣れてくると粘土をこねるようにして制作できるようになります。
ここでは面の数が多いモデル制作を紹介していますが、操作方法が慣れないうちは直方体を組み合わせただけの簡単な人型のモデルを作成してみるのもいいかもしれません。

- Blenderへの下絵のセット方法
    - 「Shift+A」を押して「Image > Reference」で下絵用のオブジェクトを生成できます。X軸とZ軸の座標平面とY軸とZ軸の座標平面の2つの面に生成した下絵オブジェクトを位置や大きさを調整しながらセットします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/68045fd7-9429-2f3e-1204-51c145f00dfc.png" width=500>

- アウトラインに沿ってモデル作成
    - ２面図のアウトラインに沿って面や点の移動、面張りをしていきます。ショートカットキーを利用する場合は、押し出しの「E」や移動の「G」を多用することになります。回転の「R」や拡大縮小の「S」、ループカットという機能の「Control+R」もよく利用します。これらの操作はBlenderでは基本になるので覚えておくと良いと思います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/f65803f1-c979-c7fb-beb1-e459b766d27f.png" width=500><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/ad4673e2-4961-6ffa-c22a-7de06acc7805.png" width=500><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/39bc8cff-dcb6-c48b-31a8-4fdea988154b.png" width=500><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/d51ee665-3812-260d-ff7e-7d7315f5b69d.png" width=500><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/e5052132-fb6c-42d5-0e4c-51083a5d0bcc.png" width=500>

### 3. マテリアル割り当て
作成したモデルに色と質感を与えてあげます。一般的にはこの後にテクスチャを利用して見た目をさらに良くしていく工程がありますが、作成対象のコアラは単調な緑の蛍光色と目と鼻の黒色しかないので、今回は割愛しています。マテリアルは緑の蛍光色の体に影を落とさないようにEmissionを体に設定し、目にはハイライトが浮かび上がるように環境光をよく反射するSpecularを設定しています。
マテリアルは面単位で割り当てることができ、質感が異なる部位ごとに分けていくと良いです。

- マテリアルの割り当て方法
    - Blenderを編集モードにして、割り当てたい面を選択して画面右側の「Material Properties」で設定します。
    - ノードを編集してマテリアルを設定します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/30a18ecd-3f53-cd32-4d96-de76b6db0f69.png" width=500>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/a6d80626-3d0b-8caf-d3cd-d36fa8bc448b.png" width=500>


### 4. リギングしてスキニング
Blenderにインストールした「VRM Add-on for Blender」の機能を用います。リギングは作成したモデルを動かすための骨を組むことです。骨を組むだけでは骨を動かした時にモデルは動かないので、骨とモデルを関係付けていきます。これをスキニングといいます。細かな動きを実現したい、もしくはより複雑で面の数が多い3Dモデルになるほど、これらの工程はとても重要になってきます。
難しそうに思えますが、今回紹介する方法では「VRM Add-on for Blender」を利用することで、10分もかからず作業が終了してしまいます。

- 「VRM Add-on for Blender」の利用方法
    - 通常ボーンを組む時は一本一本組んでいきますが、「Shift+A」を押して「Armature > VRM Humanoid」を選択することで人型構造のボーンを自動生成してくれます。
    - 体に合わせてボーンを移動していきます。
    - Blenderに自動で良い感じにスキニングしてくれる機能があるので活用します。Blenderをオブジェクトモードにして「Shift」を押しながらボーンを選択した後にモデルを選択し、「ctrl+P」を押して「Armature Deform > With Automatic Weight」を選択します。※手作業での調整が必要になる場合もあるので、その際はBlenderをウェイトペイントモードにしてスキニングを調整します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/d50f7737-c11c-e540-eebd-a94c349d4670.png" width=500>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/46b2ca5d-b768-84de-b25b-7dfcfeb7cacd.png" width=500>
![スクリーンショット 2021-12-21 234624.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878088/5d01ddc9-2083-8197-9e5c-7cc91cf13a74.png)

### 5. VRMで出力して動かす
標準のBlenderではVRM形式でファイル入出力ができませんが、「VRM Add-on for Blender」をインストールすることで入出力できるようになります。コアラをVRM出力し、「VRMLiveViewer」で読み込みます。本記事では「VRMLiveViewer」を利用して作成したコアラを踊らせますが、VRM対応のアプリケーションならば何でも構いません。

- 「VRMLiveViewer」を利用したコアラの踊らせ方
    - 「ファイル読み込み」でコアラのVRMモデルを読み込みます。
    - コアラには影を落としたくないので「歯車マーク > ライトの設定」でキャラクターのライトの「Intensity」を0にします。
    - 「Space」を押して再生します。

ダンスしている動画もアップロードしていますので、ぜひ見ていただければと思います！

https://youtu.be/GOFCHTLtRkE

## まとめ
Blenderの機能とVRM周りのBlenderのアドオンが充実していたのでサクサク制作を進められました（作成から踊らせるまで8時間ほど）。しかし、表情や口パクなどを使っておらずVRMを活かし切れるほどのクオリティの3Dモデルではなかったため、今後はさらにクオリティの高いものをご紹介できればと思います。
本記事では自作モデルを使っていますが、自作するのは難しいという方は簡単な形のモデルを作成してみるところから始めるか、他の人が作ったモデルを使ってみるのもいいと思います。

以上になります。
最後まで読んでくださりありがとうございました！