Blenderで自作アバターを作ってVRChatに連れて行った (3. Unity)

## 概要
自作アバター作成にあたって、Unityで行う作業をまとめました。

## 目次
1. [環境構築](#1-環境構築)
2. [セットアップ](#2-セットアップ)
3. [アップロード](#3-アップロード)

## 1. 環境構築

環境構築の手順に関して、次の動画を参考にさせて頂きました。

> [【第５回】ワニでもできる！モデリングforVRChat - Unityセットアップ](https://www.youtube.com/watch?v=Vy8mNBN3DBU)
必要なソフトのインストールから、Unityでのセットアップの手順まで、初心者向けに分かりやすく解説されています。

ただ、VCCの登場によって、上記の動画で紹介されている手順と今回紹介する手順が若干異なっているので、この記事では下記のソフトウェア・アセットを利用したアバターのアップロード方法を説明します。

UnityHub と Unity、ユニティちゃんトゥーンシェーダー2.0 のダウンロード・インストール方法に関しては、上記の動画で紹介されているので参考になると思います。

今回の作業にあたって、以下のものをダウンロード・インストールしました。



___

* **UnityHub**
    Unityのバージョンやプロジェクトを管理するツールです。
    恐らく最新版のものをインストールすればよいと思います。
    > [Unityをダウンロード - Unity](https://unity.com/ja/download)
<br/>

* **Unity**
    Unity Technologies によって作られたゲーム開発環境です。
    UnityHubのインストール完了後に、Unityのインストールを行ってください。
    <font color="red">VRCがサポートしているバージョンをインストールする必要があります。</font>
    ↓こちらから、現在サポートしているバージョンを確認できます。
    > [Currently Supported Unity Version - VRChat Creation](https://creators.vrchat.com/sdk/current-unity-version/)
<br/>

* **Creator Companion**
    SDK（VRC用の開発ツール）やプロジェクトを管理するためのツールです（多分）
    下記のサイトからダウンロード・インストールを行います。
    > [Setting up the SDK - VRChat Creation](https://creators.vrchat.com/sdk/)
<br/>

* **VRCAvatarEditor beta**
    アバターの編集を行い易くする拡張ツールです。
    VCC対応版をダウンロードし、zipファイルを展開して、分かりやすいところに置いておきます。
    > [VRCAvatarEditor beta - BOOTH](https://booth.pm/ja/items/1258744)
<br/>

* **ユニティちゃんトゥーンシェーダー2.0**
    有名なシェーダーです。このシェーダ以外にも沢山のシェーダが配布されているので、慣れてきたら色々試してみるのが良いと思います。
    ダウンロードしたファイルを、分かりやすいところに置いておきます。
    > [ユニティちゃんトゥーンシェーダー2.0 - UNITY CHAN! OFFICIAL WEBSITE](https://unity-chan.com/download/releaseNote.php?id=UTS2_0)
<br/>

* **【VRChat】PlayableLayersテンプレート (Base, Action, Gesture, FX, Sittingセット)【Avatars3.0】**
    PlayableLayers（アバターの表情や動きを設定するもの）を、自作アバター用に編集する際に使用するものです。
    手の動きに応じて、表情を変化させるために使用します。
    ダウンロードしたzipファイルを展開して、分かりやすいところに置いておきます。
    > [【VRChat】PlayableLayersテンプレート (Base, Action, Gesture, FX, Sittingセット)【Avatars3.0】 - BOOTH](https://booth.pm/ja/items/4301775)

___

上記のものについて、全てダウンロード・インストールが完了したら、VCCを起動して新規プロジェクトを作成します。

↓ VCCインストール後、ショートカットが分かりづらい場所に生成されているので、デスクトップ等の分かりやすい場所に置いておくと良いと思います。
![ss8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/7b9bd6e7-fef9-1f94-c363-026488150684.png)
<br/>
VCC起動後、ウィンドウ右上の「Create New Project」から新規プロジェクト作成画面に移ります。

![ss9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/32785768-e090-adbc-858f-574d3201afc3.png)
<br/>

「Avatar Project」を選択し、適当なプロジェクト名を指定します。「Project Location」はどこでも良いと思います（私はデスクトップに作成したフォルダを指定しています）
「Create Project」を押して、プロジェクトを作成します。

![ss10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/41f8a6dc-7027-ecea-1a12-e311499d75a4.png)
<br/>

プロジェクトを作成したら、右上の「Open Project」からプロジェクトの編集を行います。
![ss11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/8c0604c7-b3dc-d7c4-2408-6ba5828984cd.png)
<br/>

自動的にUnityのエディターが起動します。
![ss12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/04791c15-f964-19cf-80c6-95243c55cd5c.png)
<br/>

ここまでの手順が詳細に説明されているサイトを見つけたので紹介します。
VCCでのプロジェクトの作成手順は Step.4 で説明されています。
> [アバター導入方法 Step.1 - VRChat 初心者向けガイド](https://vrc.wiki/beginner/672/)

## 2. セットアップ
ここからの作業は、先ほど紹介した動画とほぼ同じなので、動画の手順に従って作業を進めます。
但し、アップロードの作業はまだ行いません。
動画内で紹介されているアセットの導入方法を参考にして、先ほどダウンロードした
* VRCAvatarEditor beta
* 【VRChat】PlayableLayersテンプレート (Base, Action, Gesture, FX, Sittingセット)【Avatars3.0】

も導入します。

> [【第５回】ワニでもできる！モデリングforVRChat - Unityセットアップ](https://www.youtube.com/watch?v=Vy8mNBN3DBU)

動画を参考に、シェーダー、ボーン、シェイプキー、視点の設定を行います。
（性別の設定は後で行います）
___

以降、動画内で説明されていない
* まばたき
* 目線の設定
* 髪の毛やスカートの揺れ
* 表情の変化

について説明します。

### まばたき・目線の設定

Inspectorタブの「VRC Avatar Descriptor(Script)」の中にある「Eye Look」をEnableにして、
各項目の設定を行います。

![ss14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/89a441e5-cc24-e6f5-f2cf-9ba6f6dca526.png)
<br/>

各項目についてざっくり説明します。

* Eye Movements
    目の動きに関する設定を行います。
    * Calm ➡ まばたきの頻度が低い
    * Excited ➡ まばたきの頻度が高い
    * Shy ➡ 目があまり動かない
    * Confident ➡ 目がよく動く（他人を目で追いかけるなど）
* Transforms
    目のボーンの設定を行います。
    * Left Eye Bone ➡ 左目のボーンを指定
    * Right Eye Bone ➡ 右目のボーンを指定
* Rotation States
    目の移動範囲を設定します。
    右側のPreviewボタンで、実際の目の動きを確認できます。
    * Looking Straight ➡ 正面を見ているときの目の位置
    * Looking Up ➡ 上を見ているときの目の位置
    * Looking Down ➡ 下を見ているときの目の位置
    * Looking Left ➡ 左を見ているときの目の位置
    * Looking Right ➡ 右を見ているときの目の位置
* Eyelids
    まぶたの動きに関する設定を行います。
    * Eyelid Type ➡ 目を閉じているシェイプキーを作成している場合は「Blendshapes」を設定します。
    * Eyelids Mesh ➡ シェイプキーが設定されているメッシュを指定します。
    * Blink ➡ 目を閉じているシェイプキーを指定します。
    * Looking Up / Looking Down ➡ 本来、目の動きに応じてまぶたのシェイプキーを指定するのだと思います（今回は指定しないのでnoneにしておきます。）
    
![ss15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/3600d40e-a932-8502-c84b-beb6a56153a7.png)

### 髪の毛やスカートの揺れの設定

Hierarchyタブの中から揺らしたいボーンを選択します。
揺らしたいボーンが複数繋がっている場合は、親のボーンを選択します。

![ss16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/75d11ae0-9fc0-cce9-9086-e9657c16cedf.png)
<br/>

Inspenctorタブの「Add Component」から、VRC Phys Boneを検索・追加します。

![ss17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/d992f139-b216-dfb6-edcb-6971b1149b51.png)
<br/>
追加されたら、各項目の設定を行います

![ss18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/481ba694-73e0-99ab-c4b5-fb020d988ff7.png)

設定項目がかなり多いので説明を省きますが、各項目についての解説が掲載されている記事を紹介します。
個人的には、Forcesの中身だけ調整すれば良いと思います。

> [【VRChat】PhysBoneの設定方法・Componentについて - しぐにゃもブログ](https://signyamo.blog/phys-bone_component/)

### 表情の変化

「VRCAvatarEditor beta」アセットを追加したことで、ウィンドウのメニューに「VRCAvatarEditor」が追加されています。
「VRCAbatarEditor」から「Editor」を選択します。

![ss22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/6cb1e779-a19a-aeda-4dcc-f7022bbaeadf.png)
<br/>
次のようなウィンドウが表示されます。
アバターが表示されない場合は、ウィンドウ上部でアバターを選択します。

![ss23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/1f157e09-146e-fb82-f4ab-b38ae848c4e0.png)

ウィンドウ下半分のAvatarInfo内のGenderに、アバターの性別を指定します。

FXレイヤーに、「Custom_FX_Basic」を指定します。
（PlayableLayersテンプレートのアセットを導入すると、「Custom_FX_Basic」を選択できるようになります。）

表情の追加・編集は、ウィンドウ中央の「FaceEmotion」を選択してから行います。
これに関しては、VRCAbatarEditorのオンラインマニュアル内の「表情をつくりたい」が参考になると思います。

> [VRCAvatarEditor マニュアル](https://docs.google.com/document/d/1DU7mP5PTvERqHzZiiCBJ9ep5CilQ1iaXC_3IoiuPEgA/edit#heading=h.vima112pgcvi)

他にも、表情の編集に関して説明されている記事があったので紹介します。

> [【ご紹介】VRC Avatar Editor でラクラク表情改変！！ - バーチャルライフマガジン](https://vr-lifemagazine.com/vrc-avatar-editor-kaihen/)

## 3. アップロード

アバターに関する設定が終了したら、VRCにアバターをアップロードします。

VRCAvatarEditorのウィンドウ内の内容を一通り確認して、ウィンドウ下部の「Upload Avatar」を選択します。

![ss23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/c426d896-c83b-60fb-d81f-cce55a08349e.png)

VRChat SDKのウィンドウが表示されるので、VRChatのアカウントでログインします。
Builderタブを選択し、名前や写真を適当に設定します。

![ss24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/69f616da-9d28-de1e-0c0f-2c525709ab18.png)

ウィンドウを下にスクロールして、Validationsの内容を確認すると、複数の項目が表示されていると思います。
アイコンの意味については、次の記事の終盤に説明があります。

> [アバター導入方法 Step.4c : VCC版 - VRChat 初心者向けガイド](https://vrc.wiki/beginner/2370/)

Validations内に、次のようなアイコンの項目がある場合はアップロードできないので、「Auto Fix」を選択して解消します。

![ss25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/58c79c38-ec3b-ef8d-bb67-1d503d364a82.png)

上画像のアイコンが全て解消されたら、ウィンドウ下部の「Offline Testing」から「Build & Test」を選択します。
「Build Succeeded!」表示が出たら、VRChatを起動してアバターを確認してみます。

![ss26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/9f5904b6-3156-c442-932e-9c1158d3fae4.png)
<br/>
AvatarsのOtherに、先ほどビルドしたアバターが追加されています。実際にこのアバターに変更して、見た目や動きの確認を行います。

![ss27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/9bacd578-e162-d8c1-11cf-0c11fb544ec9.jpeg)
<br/>
修正したい箇所がある場合は、再びBlenderやUnityで編集を行った後に、同様の手順でビルドして確認を行います。
問題が無ければ、VRCat SDKに戻って、ウィンドウ下の「Online Publishing」から「Build & Publish」を選択します。

![ss28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/c18270a1-09d1-dad2-004f-f6781e504958.png)
<br/>
すると、VRCのUploadedにアバターが追加されています。
これで、全ての作業は終了です。

![ss29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/146c56d3-d94c-c595-618a-b7f56933cfe5.jpeg)

## 終わりに

最後まで読んで頂いた方、ありがとうございました。
初めてQiitaで記事を書いたので、分かりにくい部分も多かったと思います。
私自身、アバター制作への理解が浅いため上手く説明できているか分かりませんが、少しでも自作アバターを作ってみたい人の参考になれば幸いです。
<br/>

![VRChat_2023-11-18_00-50-08.976_1920x1080.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457210/6e8809f6-143f-75c0-8556-237f4ac8468c.png)


___
> [Blenderで自作アバターを作ってVRChatに連れて行った (1. 概要)](https://qiita.com/ksr03/items/fe4302017fabfe02ad17)
[Blenderで自作アバターを作ってVRChatに連れて行った (2. Blender)](https://qiita.com/ksr03/items/5a7bb46a317a52060e46
)