オリジナルアバターを作ってオンラインミーティングに参加しよう！


# はじめに
コロナウイルスの影響もありオンライン授業やオンライン会議が急速に普及しています。
今回はこの時期大活躍のZoomに自分が作ったオリジナルアバターで参加してみよう！というものです。

### 追記
~~この記事を書いたときはZoomで出来たのですが、Zoomセキュリティ上の関係？でアップデートするとCamTwistが使えず、出来なくなってしまいました。Google meetsなどでは使えます。~~
再アップデートで使えるようになりました (2020/05/10追記)


## 参考サイト
- [【袴でバーチャル卒業式】VR初心者がclusterにVRoid自作アバターをアップロードするまで](https://qiita.com/kemako/items/5c38c2237a8bc0d3f76c#step2--blenderでモデルの軽量化)
- [Mac で バ美肉 りたい！ (Zoom + Gachikoe + 3Tene or Reality)](https://silverbirder180.hatenablog.com/entry/2020/03/08/175607)

## 最終的にできるもの

自分のアバターでZoomに参加する
こんな感じ↓

![Screen Shot 2020-04-07 at 17.57.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/af33eb1d-5e33-436b-c008-d5ad4af98656.png)


# 実際に作ってみよう

※筆者のPC(macOS Catalina)はデフォルト言語が英語なので諸々英語表示になっています。

## 完成までの流れ
アバター作り → アバターと自分の動きを連動 → Zoomに表示
アバター作りの部分が一番大変です。

## 環境構築
インストールするもの

- VRoid Studio: アバターを作る
- 3tene: バーチャルYouTuber(VTuber)向けPCアプリ
- CamTwist

それぞれ以下の公式サイトからインストール。

- [VRoid公式サイト](https://vroid.com/studio/)
- [3tene公式サイト](https://3tene.com) (FREEのもので十分です)
- [CamTwistダウンロードサイト](http://camtwiststudio.com/download/)



## Step1: VRoidでアバター作り

自分でアバターに髪の毛を生やしたり服の柄を描いて着せることもできますが、今回は素材をダウンロードしてくる方法を紹介します。

- Void Stdioを起動し、Your Avatars(あなたのモデル) > New Avatar(新規作成)を選択
    - VRoidの表示がおかしい人は全画面表示にしたり、ピンチイン・ピンチアウトしたりしてみてください。下の画像のようになっていれば問題ないです。
- モデルタイプは作りたいアバターの性別を選択すると、下のようにとりあえずアバターが表示されます。
 ![Screen Shot 2020-04-07 at 15.33.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/63f18bc2-68ee-8666-13e3-7eb637703929.png)

### 素材のダウンロード

- boothというサイトからダウンロードします。
    - [服の例](https://booth.pm/ja/items/1348202f)
    - [髪の毛の例](https://booth.pm/ja/items/1550285)
- この他にも上の検索欄から「VRoid 衣装」や「VRoid ヘアプリセット」と検索すればたくさん出てくるので好みの服をダウンロードしてください。このとき、下に書いてある説明が後で必要になるのでこのページは閉じないでおいた方が良いです。
- 私はこれにしました↓![Screen Shot 2020-04-07 at 15.46.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/d4e09e5d-0830-7a43-89b7-43459590f2b9.png)![Screen Shot 2020-04-07 at 16.13.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/4f2fdac6-b429-9da5-bc39-9473608947bf.png)

髪の毛の色は後で変えられるので、好きな髪型を選びましょう。

### 服を着せる

- VRoid Studoに戻り、上のClothing Editorタブを選択
- 左側のDesignタブでPresetを選びます。これは各自選んだ服の説明に従ってください。私の場合は<b>「プリセットの衣装「ワンピース」にインポートしてご使用ください。」</b>と書いてあるので、ワンピースを選択します。![ex1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/134ca4d1-5fbd-ee0f-7bed-401ee0f597c9.png)
![Screen Shot 2020-04-07 at 15.50.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/b7586e7f-5d5b-8798-2185-c3490944a137.png)
- Desgnタブの隣のTextureタブを選択
- LayersのLayerを右クリック > Importを選択し、先ほどダウンロードした素材を選択します。![Screen Shot 2020-04-07 at 16.03.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/61af92e2-98d7-2e90-7e92-c093bbfbccdf.png)
![Screen Shot 2020-04-07 at 16.06.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/917b331a-18de-ba58-1086-1de8858ab1c5.png)
着れました！
ただこれだと元々着ていたワンピースが下から見えてしまっているのでそれを消します。

- LayersのDefault Imageを右クリック > Removeを選択

![Screen Shot 2020-04-07 at 16.09.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/a4d82985-9502-9a69-1346-a33e565cd07e.png)
これでよし！

### 髪の毛をセットする

服の時とは違い、ヘアプリセットはダウンロードしたフォルダを解凍・移動しないといけません。
先ほどダウンロードしたページに使い方が書いてあります。
![Screen Shot 2020-04-07 at 16.19.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/ed2a9219-bd1e-92fa-a4ba-b80d81e3558a.png)

ここの操作は素材によって違う場合もあるので、自分がダウンロードしたページの説明をよく読んでください。以下は上の素材を使った場合の操作です。

基本的に書いてある通りですが、

- まずダウンロードしたフォルダを解凍
- 解凍したファイルを移動。ディレクトリが隠しファイルになっていたりするのでドラッグ&ドロップではなくてターミナルでコマンド打つ必要があります。
    - コマンドは
    ```mv (現在のディレクトリ) (移動後のディレクトリ)```
    - 私の場合はDownloadsディレクトリにダウンロードしたので
     ```mv ~/Downloads/preset4 /Users/<ユーザ名>/Library/Application Support/com.Company.ProductName/hair_presets```になります。
- VRoid Studioを開く
- Hair Editor > プリセット4を選択し、プリセットから読み込みで使えるようになります。

この時もしプリセットが表示されなかったらVRoid Studioを再起動してください。このとき、<b>再起動前にアバターを保存するのを忘れないようにしてください！！！</b> 

![Screen Shot 2020-04-07 at 16.56.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/77f9ae95-120e-3a75-3c31-62e0c30f3cbc.png)

無事に髪が生えました！

でも、このままの髪色だととてもこの服に似合わないので、髪色を変えます。

- Design > Hair Groups > Add Freehand Groupを色々いじって好みの髪色にしてください。2本指で動かすと視点の角度を変えられます。
 ![Screen Shot 2020-04-07 at 17.03.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/9506919f-adcc-03a7-001d-f6695d153d7f.png)
![Screen Shot 2020-04-07 at 17.04.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/476e57f0-c698-cdb3-f679-d936678ff9a1.png)
いい感じの髪色になりました！

### 完成・保存
せっかく作ったのだからアバターちゃんが動いている姿を見たいですよね。

- Camera / ExpoterタブでPose & Animationを選択
- 右側のAnimationで適当に動きを選択してみてください。なんか走ったりジャンプしたりポーズしたりしてくれます！

![Screen Shot 2020-04-07 at 17.09.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/3ffc5f61-6b09-f0bc-cc80-82b56be2362c.png)

- 左側のタブでFace Exxpressionを選択すると表情を変更できたり、Windを選択すると風を吹かせたりできます。
他にも色々あるので遊んでみてください。
- Trackpadでの基本的な操作は
    - 2本指スクロールでピンチイン/ピンチアウト
    - 2本指で押しながら動かして視点変更
    - Shiftキーを押しながら1本指スクロールで高さ調整　などです
    
### その他の調整

他にも色々調整できます。

- アバターのスタイルが気に入らない場合はBody EditorタブのDesignで身長・脚の長さなど変更
- 肌の色を変えたいときは同タブのTextureを変更
- 顔を変えたい場合はFace Editorタブで諸々変更
 
などなど。満足いくまで遊んで理想のアバターを作ってください！

### 保存
この後このアバターを3teneというアプリで動かすことになるのですが、そこにアバターを表示させるために .vrm 形式で保存する必要があります。
普通にFileタブから保存しただけだと .vroid の拡張子でしか保存されないので注意してください。

- Camera / Expporterタブ > Export から右側のExportを選択
- 保存場所はDesktopにしておくと分かりやすいです。![Screen Shot 2020-04-07 at 17.24.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/169ee479-c4e0-2a89-5277-6f02d506b9a4.png)

これでようやくアバターが完成しました！VRoid STudioは閉じてしまって大丈夫です。

## Step2: アバターと自分の動きを連動させる
[3tene](https://3tene.com)というVTuberを目指す人のためのアプリを使います。

- [環境構築](#環境構築)でインストールしておいた3teneのアプリを開く
- 左の上から4つ目のメニュー"新規アバターの登録"から+をクリックし、先ほど保存した.vrm ファイルを選択します。
- すると下のように現れました！

![Screen Shot 2020-04-07 at 17.33.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/87906140-c9e4-c661-3566-47cbb2d1bdd4.png)

- 右のメニューの上にあるフェーストラッキングとリップシンクをOnにして下さい。
- 自分と同じ動きをするようになります
![Screen Shot 2020-04-07 at 17.42.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/1e04b40f-b8f0-1439-1d81-5bd35e00feb9.png)
そろそろ自分のアバターに愛着湧いてきましたよね？可愛い！！！

- カメラが立ち上がらない場合
    - 下のように アバター調整 > 設定 > ウェブカメラ をFaceTimeに設定してください。
 
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/4df230d3-eae9-b125-64ac-6efbe23921d3.png)

モバイルの場合は3teneの代わりに[REALITY](https://apps.apple.com/jp/app/reality-バーチャルライブ配信アプリ/id1404176564?ign-mpt=uo%3D4)と言うアプリを使えばできるみたいなので、興味のある人は調べてみてください。

## Step3: Zoomに表示する
3teneのアバターの様子をCamTwistで取得し、そのCamTwistの画面をZoomで表示するという仕組みです。

- [環境構築](#環境構築)でインストールしておいたCamTwistのアプリを開く
- 設定を下の画像のように変更する![Screen Shot 2020-04-07 at 17.52.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/663d3ac0-b166-2c99-20ed-14ac51333a73.png)

- 3teneとCamTwistを起動したままZoomを開く
- 設定を開き、Videoタブを選択、CameraでCamTwistを選択します。![Screen Shot 2020-04-07 at 17.56.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/939e1e53-fc39-14db-99ed-89fe89055fe3.png)
![Screen Shot 2020-04-07 at 17.57.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459946/af33eb1d-5e33-436b-c008-d5ad4af98656.png)
出来ました！
ちゃんと自分と同じ動きをしているはずです。楽しいですね。

# 終わりに
これでZoomミーティングも少し楽しくなるはずです。自分の姿を映さなくていいというのは気が楽ですよね。
初心者でも思ったより簡単に作れたと思うので、フリーの素材を使わずに髪型をデザインする・洋服の柄は自分でiPadでお絵かきしてみる、など色々試して自分の理想のアバターを作ってみてください！！

### 物足りない人へ


- 姿を変えるだけだと物足りない！声も変えたい！と言う人はこちらのサイト[Mac で バ美肉 りたい！ (Zoom + Gachikoe + 3Tene or Reality)](https://silverbirder180.hatenablog.com/entry/2020/03/08/175607)を参考に作ってみてください。
- Unityとclusterを使えば<b>今回作ったアバターを自分が作った仮想世界で動かす</b>なんてことができます。これに関しては偉大な私の先輩が記事にしてくださっているのでどうぞ参考にしてください。[【袴でバーチャル卒業式】VR初心者がclusterにVRoid自作アバターをアップロードするまで](https://qiita.com/kemako/items/5c38c2237a8bc0d3f76c#step2--blenderでモデルの軽量化)
- 上の技術を応用すれば<b>現実では離れ離れの友達同士がそれぞれ自分のアバターで1つのバーチャル世界に集まる</b>なんてこともできます。自分たちに馴染みのある場所をUnityで作り、そこにみんなで集まって写真撮影とか鬼ごっこもできちゃいます。バーチャル世界は無限大で夢で溢れています。是非遊んでみてください！