はじめに
これは VTuber Tech #1 Advent Calendar 2019 12日目の記事です。昨日は ゆずさん の「VICONを用いてUnityでVtuberになる！」でした。
2019年は5月頃より、スマホがLive2Dで使える「2DR」を開発してきました。
この記事では、顔認識でLive2Dモデルが操作できるアプリの作成を通じ、「2DR」で使っている技術について一部まとめてみます。
今回は簡略化のために対応機種はiPhone・iPadに絞って解説します。
環境
OS : macOS Mojave (10.14.6)
Unity : 2018.4.9f1
OpenCV for Unity : 2.3.7
Dlib FaceLandmark Detector : 1.2.9
プロジェクト作成
次の手順で新規プロジェクトを作成します。
UnityHubを開く → 「新規作成」をクリック → テンプレートは「2D」を選択 → プロジェクト名を適当に入力 → 保存先にプロジェクトを作成したいディレクトリを指定(コンマが含まれるパスは指定できません) →「作成」をクリック
プロジェクトを開くと、最初は次のようになっていると思います。
はじめはPC向けにビルドする設定になっているので、File>BuildSettings>iOSでSwitch Platformをクリックし、iOS向けにビルドする設定にします。
切り替えたら、次はGameビューの解像度を調整します。Gameビュー左上の「1920x1080 Portrait (1080x1920)」と書いてる部分をクリックします。ここで自分のiPhoneと同じ解像度を選んでおくと、エディタと実機で表示ズレがないです。
必要なアセットのインストール
1. Cubism SDK for Unity (Free)
2. OpenCV for Unity ($95)
3. Dlib FaceLandmark Detector ($40)
が必要なのでインストールしていきます。(※ 有料アセットはセール時に買うと半額近くてお得です)
OpenCV for Unity ・ Dlib FaceLandmark Detector の代わりに無償の OpenCV plus Unity を使うことも出来ますが、顔認識の精度がイマイチなため有料アセットの購入をオススメします。
Cubism SDK for Unity
次のリンクより Cubism SDK for Unityをダウンロードします。
ダウンロードできたら、プロジェクトを開いた状態で「CubismSdkForUnity-4-beta.2.unitypackage」等のファイルを開き、プロジェクトへインポートします。
OpenCV for Unity
同様に、次のリンクより OpenCV for Unity をダウンロード(未購入の場合は先に購入)し、プロジェクトへインポートします。
インポート後、Tools>OpenCV for Unity>Set Plugin Import Settings をクリックし、インポート設定をしておきます。
Dlib FaceLandmark Detector
次も同様に、次のリンクより Dlib FaceLandmark Detector をダウンロード(未購入の場合は先に購入)し、プロジェクトへインポートします。
OpenCV for Unity と同様に、Tools>Dlib Facelandmark Detector>Set Plugin Import Settingsをクリックし、インポート設定をしておきます。
設定を終えたら、スマホのカメラを使うためにFile>BuildSettings>PlayerSettings>OtherSettings>Configuration>Camera Usage Description にカメラを使用する(権限を取得する)理由を書いておきます。(アプリ初回起動時にダイアログで表示されます)
Live2Dモデルのインポート
@nkjzm さんの記事を参考に、Live2Dモデルをプロジェクトへインポートします。(ここでは公式サンプルの 桃瀬ひよりちゃんを使用)
インポート時に次のようなエラーが出た場合、「hiyori_free_t06(Clone)」のような(Clone)と表記されたオブジェクトをHierarchyビューより削除してください。
これでエラーは消えましたが、このままではひよりちゃんがディスプレイに対してかなり小さいです。
次の通りパラメータ変更し、サイズを調整します。
- Main Camera の Size を0.3
- hiyori_free_t06 の Position Y を-0.35
これで次のようなサイズで表示されます。
顔のランドマークを取得
顔認識でモデルを操作するために、Dlibを使用して顔のランドマークを推定します。ランドマークとは、次のように顔の各特徴点をディスプレイ上の(x,y)座標で表したマークのことです。この68のランドマークをもとに、「顔の向き」「口の開閉」といったパラメータを導出していきます。
さて、ランドマークの取得方法ですが、まず、Hierarchyビューでhiyori_free_t06を選択し、[Add Component]>[New Script]>[Create and Add]で「DlibWebCamFaceDetector」というスクリプトを作成し、次のコードを貼り付けてください。(かなり長いです)
次に Hierarchyビューで右クリックし、[UI ]>[Raw Image]で RawImageを新規作成します。これをDlibWebCamFaceDetectorのSurfaceにエディタ上で割り当てててください。
なお、このままだと、顔認識中の映像が表示されるので、[RawImage]>[Color]で白い部分を選択し、Aを0にします。
これでディスプレイに顔認識中の映像が表示されなくなります。
顔の向きを推定
では、ランドマークを元に顔の向きを推定していきます。hiyori_free_t06に[Add Component]>[New Script]>[Create and Add]で「FrontalFaceParam」というスクリプトを作成し、次のコードを貼り付けます。
Hierarchyビュー上でhiyori_free_t06を選択し、FrontalFaceParamを次のように設定します。
- FaceDetector に hiyori_free_t06 を割り当て
- HeadAngleParameter X に ParamAngleX を割り当て
- HeadAngleParameter Y に ParamAngleY を割り当て
- HeadAngleParameter Z に ParamAngleZ を割り当て
実機で確認すると次のように動きます。
口の開閉を推定
先程と同様に、hiyori_free_t06に[Add Component]>[New Script]>[Create and Add]で「MouthOpenParam」というスクリプトを作成し、次のコードを貼り付けます。
Hierarchyビュー上でhiyori_free_t06を選択し、MouthOpenParamを次のように設定します。
- FaceDetector に hiyori_free_t06 を割り当て
- MouthOpenParameterX に ParamMouthForm を割り当て
- MouthOpenParameterY に ParamMouthOpenY を割り当て
実機で確認すると次のように動きます。
目の開閉を設定
目の開閉ですが、ランドマークの精度的に開閉をうまく取れないので、自動まばたきを出来るようにします。
Hierarchyビュー上でhiyori_free_t06を選択し、[Add Cmponent]から「CubismEyeBlinkController」「CubismAutoEyeBlinkInput」を割り当てます。
CubismEyeBlinkControllerは次の通り設定します。
- BlendModeをMultiplyからOverrideへ変更
また、hiyori_free_t06の左右の瞳(ParamEyeLOpen・ParamEyeROpen)に「CubismEyeBlinkParameter」を割り当てます。
実機で確認すると次のように動作します。
実機ビルド
デバイスをPCに接続し、File>BuildSettings>Build And Runよりアプリをビルド&起動します。初回Xcode起動時にエラーが発生する場合、サイドバーより[Unity-iPhone project]>[Signing & Capabilities]にて、「Team」と「Bundle Identifier」に適当な値を設定してください。
設定を終えたら、左上Buildボタン(再生ボタン)をクリックし、実機で動作を確認します。
おわりに
というわけで、Live2Dがスマホで使えるアプリについて解説してみました。「2DR」は2019/12/12(木)現在、CAMPFIREにて絶賛クラファン実施中なので、よかったら応援いただけると幸いです。