[Unity] CV VTuber Exampleのサンプルを動かしてみる

# はじめに

前々からやろうと思っていましたが、正直必要アセット類の値段が高いなぁと思っていました。
が、2022-2023年にかけての年末年始で、必要アセットの半額セールをやっていたので買ってみたので、というのが理由です。
2023年1月2日時点でのCV VTuber ExampleのReadmeに沿って手を動かしているだけの記事です。

# 必要アセット類

- CVVTuberExample
- OpenCVForUnity
- Dlib FaceLandmark Detector
- どこの家庭にもあるWebカメラ


~~このうち、`Dlib FaceLandmark Detector`については、用いられている学習データが商業利用禁止のライセンスである可能性が高いです。収益を得る場合は自前で学習データを用意しましょう。~~

2023年1月3日追記:

[Dlib FaceLandmark Detector ver1.2.6 Release!](https://enoxsoftware.com/dlibfacelandmarkdetector/dlib-facelandmark-detector-ver1-2-6-release/)

上記記事によると、
> [Common]Changed the training dataset of Shape Predictor model. Since the training dataset consists of Flickr CC0 licensed images, the Shape Predictor model files are available for commercial use.

とあるので
> 用いられている学習データが商業利用禁止のライセンスである可能性が高いです。収益を得る場合は自前で学習データを用意しましょう。

この記述は現在においては正しくない気がします。
ただしこれについてなずなさんは責任はとれないので商用利用の際はご自身でご確認ください。


# 作業

## プロジェクトを作る

私の場合、ゆくゆくは現行のVRChatアバターを利用したいなぁと思っていたので2019.31.f1を利用しています。
3Dで作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/4719bc3b-a164-8898-c0fb-e2a67c9db1d2.png)

## 必要アセット類のインポート

CV VTuber ExampleのReadmeさんによると、
  1. CVVTuberExampleのインポート
  1. OpenCVForUnityのインポート
  1. Dlib FaceLandmark Detector

の順番で行うようです。`CVVTuberExample`のインポート時に、下記の画面のような注意が出ますが、気にせずimportしてください。既存のプロジェクトに対するインポート時に既存の設定を壊しかねないからこういうのが出ているようです？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/4feb769f-1a00-7235-5d91-0a04f7a293ef.png)

## Dlib FaceLandmarkのセットアップ

画面上部より、`Tools/Dlib FaceLandmark Detector/Open Setup Tools`の順に選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/24b32889-1773-2f94-fd4e-ac859514fc14.png)

続いて、`Move StreamingAssets Folder`を選択します。
"All files were successfully moved."と出ればokです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/cbb7d8e6-d177-4f78-e3e7-8d4ef2250426.png)

このように、`Assets`直下に`StreamingAssets`というディレクトリが作成され、中身は以下のようになっているはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/a5782401-42fb-9bd5-2590-fcdd12f198cd.png)

## サンプルシーンを開く

`Assets/CVVTuberExample/CVVTuber/Examples/WebCamTextureCVVTuberExample`の中にある、`WebCamTextureCVVTuberExample.unity`を開きます。HierarchyにDnDすればできます。
何やら愉快な見た目になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/62c92ed2-9ba4-0d30-30cb-39c3bb02e25e.png)

## CVVTuberExampleのセットアップ

画面上部より、`[Tools/CVVTuberExample/Setup CVVTuberExample`の順にクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/5e2343f2-99c8-b6e8-83a9-e471a5dc260c.png)

特段のプロンプトが出る等はありませんが、以下のように画面左下やConsole等に`CVVTuberExample setup is all complete!`と出ていればokです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/c6f5745d-2968-de49-c040-68cdf02d2a18.png)

## アニメーターの準備

`CVVTuberModel`にアタッチされている、アニメータを確認します。
アニメーションコントローラとして、`CVVTuberAnimatorController(.controller)`がセットされているので選択し、アニメータータブから確認します。
続いて、Base Layerの歯車マークをクリックした後に`IK Pass`にチェックが入っていることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/f0545b91-bc8c-f76a-2a52-8763145299d7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/d4114d1b-b565-5a3b-49fe-b8683bca0292.png)

## ビルド設定の確認

`File/Build Settings`を開き、Scenes In Buildの中に`CVVTuberExample/`以下のフォルダすべてが含まれていることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/ee15b506-5f3f-2dc0-05fd-b0a9a9877b54.png)

## 動かしてみる

Runしてみて、いい感じになっていたらokです。画像ではつぶしてありますが、右上に自分の顔が映ります。またうまく動いていればランドマーク検出の緑色のオーバレイが出ているはずです。

![aza.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306146/8465e77d-7ac4-4c96-5767-fe1c5447b72b.png)

# 終わりに

だいぶ駆け足でしたが、現在時点でのチュートリアルです。
サンプルの眼や口の制御、どうもアバターのシェイプキーを動かしてるっぽいのは確認しました。なので自前のVRChatアバターでもできそうですね。ただ、PhysBoneは厳しい気がするのでDynamicBoneは必要な気がしますが。引き続きやっていきたいと思います。