１枚のイラストから動くアバタを作ってZoomに参加しよう！


# はじめに

今回は、**一枚のイラストや3Dアバタの画像キャプチャを用意するだけで、リアルタイムに表情をトラッキングして動くアバタを作ることができる**「Talking Head(?) Anime from a Single Image」を試してみました。

検証には、バージョン3を利用しました。

https://github.com/pkhungurn/talking-head-anime-3-demo


以下の環境で検証を行っています。

| 項目 | |
|:-- |:--|
| OS | Windows 11  |
| CPU  | AMD Ryzen 7 5700X  |
| メインメモリ  | 64GB  |
| GPU  | NVIDIA GeForce RTX 3090 |
| トラッキングアプリ検証端末 | iPhone XR, iPhone 14 Pro Max | 



# 準備：「talking-head-anime-3-demo」の動作環境構築

「talking-head-anime-3-demo」の環境構築、設定の仕方は以下の記事が大変参考になりましたのでご覧ください。

https://vtuber-guide.net/talking-head-anime3#Talking_Head_Anime_3%E3%81%AE%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%92%B0%E5%A2%83%E8%A8%AD%E5%AE%9A%E3%83%BB%E4%BD%BF%E3%81%84%E6%96%B9



# 手順1. イラスト、3Dモデルの画像キャプチャを準備する

- 用意するのは正面を向いたイラストや3Dモデルのキャプチャたった一枚だけです。今回は、VRoid Studioのサンプルモデルの正面をキャプチャしたものを用意しました。

https://vroid.com/studio

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/f323ba2f-37b4-2499-8769-99cc1a8209ea.png)


- パーツを認識するため、入力となる画像は顔の位置を揃える必要があります。
![input_spec.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/d51ddcd9-301f-890b-c8fc-76330ffae6be.png)


- 画像編集ソフトを使い、ソースコードに内蔵されているサンプル画像と重ね合わせると位置を合わせやすいです。

:::note warn
今回は検証のため、背景透過は適当に処理しています。髪など細かい領域の透過処理を入念に行うとさらに自然に見えると思います。
:::


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/38e48fbe-9de7-95f0-586d-56acf449aa18.png)

- 編集が終了したら、サンプル画像と同じようにPNGで保存します。
- ここで注意として、**背景の部分は透過しておかないとエラーになるため注意してください**。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/9a73a7e0-c3d2-61bf-f2a0-43327aa30df6.png)


# 手順2. talking-head-anime-3-demoを起動する

- GUIアプリを起動します。

```powershell
python tha3/app/ifacialmocap_puppeteer.py
```
- 左下の「Load Image」ボタンを押し、先ほど保存した画像を選択すると右側に動くアバタが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/cc97f434-23af-634b-51aa-668ac7c5b50e.png)

- 真ん中の設定では、アプリからのモーションキャプチャでは表現しきれない、瞳孔の大きさ（小さくするとびっくりした表情を作れる）や眉毛の表情（怒っている／困っているなど）、呼吸の速さなどを変えることができます。
- 右下のBackgroundで、カラーキーとして使うための緑背景などを選択できます。


# 手順3. フェイスモーションアプリを接続

iPhone, iPadでApp Storeから「iFacialMocapTrial」をダウンロードします。

https://apps.apple.com/jp/app/ifacialmocaptrial/id1520971310?platform=iphone

- このアプリでは顔の向き、黒目の位置、眉の上下・角度などをキャプチャできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/f218fcca-798a-3560-df40-58a7f01d3bb8.png)


画面上に表示されたローカルIPアドレスを「talking-head-anime-3-demo」の画面の上にあるIPアドレス欄に入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/11e8d7f0-d166-3dc6-2d3a-72d56ea4458a.png)

- 右上の「START CAPTURE!」をクリックするとリアルタイムに顔が動きます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/06bd5b5d-fced-f961-c557-f706f35e9caa.png)





# 手順4. OBSを利用してアバタが映る仮想カメラを作る


- 「ソース」 ＞ 「ウィンドウキャプチャ」で「ifacialmocap_puppeteer」のウィンドウを選択します。
- ソースに追加されたオブジェクトを右クリックし、「フィルタ」＞「カラーキー」を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/4f16c3e3-5cd0-7193-41c8-30f450d66040.png)

- 「ソース」＞「画像」から任意の画像を後ろに配置すると、背景とアバタを合成できます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/e8a2e737-eee2-ff54-275d-68b7bac61749.png)

- OBSの右下にある「仮想カメラを開始」ボタンを押すと、別のアプリケーションで映像の入力ソースとして認識されるようになります。


# 手順5. Zoomで配信開始！

- Zoomの設定でビデオのソースを「OBS Virtual Camera」に変更すると、ZoomのビデオがOBSで設定した画面になります。

※OBSで仮想カメラを作って別途Zoomの画面を録画するためBandicamを利用してキャプチャしました（OBSにも録画機能があります）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/fd010309-647e-4542-c00c-d461b536ee17.png)


# どれくらい表情豊かに顔を動かせるか

実際にトラッキングを行いながらどれだけアバタの表情を変えられるか試してみました。ここまで黙々と画面とにらめっこしたのは初めてかもしれません（笑）

GUI上では、呼吸の速度の他に、瞳孔の大きさ、眉の動き方、ウインクの動作など複数のパラメータを変更できる機能があるため、これを調整しながらトラッキングするとかなり表現力が高いと思います。
たった一枚のイラストから作ったとは思えないほど表情を変えることができ、びっくりしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/3e483a01-99f6-d9ab-1ff4-69f25235e68f.png)



# いろいろなイラスト・写真でアバタ化した時の動作風景

※GIFのため、画質・フレームレートを落としています

## VRoidサンプルモデル

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/0c4fcde3-010b-e3f0-7f38-b79cd845bab2.png)


![bandicam 2023-12-12 23-54-01-310.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/5d0682e5-99ea-b307-d3c4-d07b98b7b165.gif)


## ずんだもん

https://zunko.jp/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/efa71e8a-a0c5-89c6-9635-88ca64b39d3b.png)


![bandicam 2023-12-13 00-00-37-852.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/d46a912f-74d1-67b0-a0e1-5a22c2c39846.gif)

「Zoomにボクに似たヤツがいるのだ。オマエだれなのだ。」と言われんばかりに動かせています。

## 自作デフォルメイラスト（星野アイ）

以前描いた自作のデフォルメイラストを入力してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/f891130e-0ade-61a8-d893-4b98cfc2a6fc.png)


よく見ると変な動きはありますが、ここまでデフォルメした適当なイラストでも眉毛や口を認識し、リアルタイムに動きを表現できています。

![bandicam 2023-12-13 00-13-50-443.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/78d1b31b-909a-2bbb-9ab6-d695d8ed8124.gif)

## 番外編：リアルな顔写真を入力してみた

イラストに特化したモデルではあるものの、「リアルな顔写真を入れたらどうなるのか？？」と気になり、試してみました。
今回は「ぱくたそ」さんから画像をお借りしました。

https://www.pakutaso.com/20231038291post-45395.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/c049d13f-3309-dd3d-8f00-78517f2c4adf.png)

![bandicam 2023-12-13 00-07-02-516.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1373557/2f9ab68c-32cf-47e7-ac56-9b5163cdece5.gif)

若干無理はあるものの、一応動きました！！
大人数が参加するZoom会議で、自分が映るのが小さければ自然に見えてしまいそうです。

イラストと比べると質は低いですが、リアルの顔写真も動かせるとなると、DeepFakeとしても利用できてしまうかもしれません。実際、このおじさまになりきってZoomに参加することができてしまいました。


# さいごに

この記事では一枚のイラストから動くアバタを作る方法を紹介しました。
快適に動作するスペックの要件は高いですが、かなり自然にアバタを動かせることがわかりました！ぜひお手元のイラストや写真でお試しください。