🎮
【初心者向け】UnityとLive2Dで拡張しやすいVTuber配信システムを作る方法

2020/07/27に公開
Unity
Live2D
tech
 はじめにこの記事はVTuber Tech #1 Advent Calendar 2018の1日目の記事です。
こんにちは、@nkjzmです。

今回はUnityとLive2Dを使ったVTuber配信システムの作り方を紹介します。

Unityに初めて触る人でも分かるくらい丁寧に書いているので、ぜひ色々な方にご覧いただきたいです。


作成できるシステムのイメージ
現状、Live2DでのVTuber配信はFaceRigというアプリケーションが用いられることが多いと思います。導入すればすぐにモデルを動かすことができるため非常に便利なのですが、反面キャラクターとしての表現を追求する際に制約となる場合もあります。
そこで、本記事ではUnityを用いることで拡張しやすいVTuber配信システムの作り方を紹介します。

サンプルとして完成プロジェクトも用意しましたので、適宜参考にしながら読み進めてください。
この記事で扱うこと
UnityとLive2Dを使ったシステム構築
OBSを使った配信方法
この記事で扱わないこと
Live2Dモデルの作り方

 必要な環境以下のいずれかのOS
macOS High Sierra (10.13.6にて動作確認済み)
Windows 10


Unity
2017.4.x~ / 2018.2.x~ (2018.2.11f1にて動作確認済み)


Live2D Cubism 3 SDK for Unity
R10にて動作確認済み
Unity2017系と2018系に対応済み [1] [2]


OVRLipSync
1.28.0にて動作確認済み


 VTuberKitについてnkjzm/VTuberKit

https://github.com/nkjzm/VTuberKit
今回紹介する方法の完成プロジェクトです。

主にAssets/VTuberKit/Examples/Koharu/以下のシーンが参考になると思います。
MITライセンスで配布しているので、このプロジェクトを基盤にシステムを作っていただいても大丈夫です。
※ただしいくつかのSDKの利用を前提としているため、それぞれのライセンスには従ってください。

特にLive2Dの「拡張性アプリケーション」に該当しないかどうかはきちんと確認してください。

拡張性アプリケーションのリリースライセンスについて
利用方法についてはリポジトリのREADME.mdをご覧ください。

 質問について記事中で分からないことがあれば@nkjzmまでご連絡ください（軽い質問であればお答えします）。また、月額制のメンターサービスで開発サポートをしているので、詳しく教えてほしい方はこちらをご利用ください。　

https://menta.work/plan/1115

 配信システム基盤の作成ここからはVTuber配信システムの具体的な作成手順を紹介します。

分からない点があれば、適宜VTuberKitを参考にしてください。

 Unityプロジェクトの新規作成Unityのインストールが済んでいない方は、こちらからインストーラーをダウンロードします。UnityHubを利用すると複数バージョンのUnityを管理出来るのでオススメです。
具体的な手順は今回は割愛します。画面に従ってインストールを進めてください。
UnityHub(もしくはUnity)を起動します。
<img width="509" alt="スクリーンショット_2018-10-17_0_01_52.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/14742225-0e39-bda0-d5db-c2fd87c086c5.png">
右上の「新規」をクリックしてください。
<img width="1013" alt="スクリーンショット 2018-10-17 0.08.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/cd42fb77-bb83-b415-805c-1cd8f8b35ee9.png">
Project Nameを入力
Templeteを2Dに変更
上記のように入力して「Create project」をクリックしてください。
<img width="1680" alt="スクリーンショット 2018-10-17 2.50.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/d0f20d78-bec9-6424-7d61-b16b2149216e.png">
プロジェクトが作成され、Unityエディタと呼ばれる画面が開くと思います。

 Live2DモデルをUnityに組み込みここからは実際にLive2DのモデルをUnity上に組み込んで行きましょう。

 Live2D SDKのインポートUnityでLive2Dを扱うためのSDKをインポートします。

配布ページにアクセスすると、利用にあたってのライセンスが表示されます。ライセンスに同意した上で、少し下の方にある「Download Live2D Cubism 3 SDK for Unity R10」のリンクをクリックしてください。ダウンロードが開始します。
<img width="1190" alt="スクリーンショット 2018-10-17 3.01.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/469a8f8d-3f30-e7c7-cf14-aec491109658.png">
次に、ダウンロードしたCubism3SDKforUnity-9.unitypackageというファイルをダブルクリックしてください。
<img width="365" alt="スクリーンショット 2018-10-17 3.12.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/f7c2a51a-1058-f40e-3a0c-117e75bcb239.png">
このような画面が開くと思います。

(上記の操作で画面が開かない場合は、Unityエディタ上にドラッグアンドドロップする操作を試してみてください。)
すべてチェックマークが入っていることを確認して、右下のインポートボタンを押してください。
<img width="437" alt="スクリーンショット 2018-10-17 3.20.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/bdf4b920-1f61-9843-68bc-aa55906e57d2.png">
このように再起動を促すメッセージが表示されるので、「ok」をクリックします。インポート終了後に再起動をしてください。
再起動の手順としては、まずUnityを終了させます。Unityを選択した状態で、MacならCommand(⌘) + Qを、WindowsならAlt + F4を押してください。
次にUnityHubアプリを起動し、プロジェクトの中から先程作成したプロジェクトを選択してください。
<img width="1007" alt="スクリーンショット 2018-10-17 3.31.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/0e7662a1-1188-9d61-81e6-a189b67bb837.png">
これでLive2D SDKが読み込みは完了です。
では正常に読み込めているか確認してみましょう。SDKにはいくつかのサンプルが含まれています。その中の一つを開いてみたいと思います。
<img width="1680" alt="スクリーンショット 2018-10-17 3.35.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/900a150e-6d9f-d619-a09f-af80ffac3046.png">
①Unityエディタ上のProjectビューから、[Asset]>[Live2D]>[Cubism]>[Samples]>[Animation]と辿っていき、②Animationというシーンファイルをダブルクリックしてください。③Gameビューにキャラクターが表示されます。④最後に再生ボタンを押してください。
Gameビューのキャラクターがこのようにアニメーションしていることが確認できると思います。

 モデルのインポート他のモデルをインポートする手順を紹介します。
今回は公式の『桃瀬ひより』というサンプルモデルを例に説明します。

自作モデルを利用する場合などは、適宜読み替えて進めてください。
サンプルモデル集より『桃瀬ひより』の「Freeダウンロード」をクリックしてください。利用の際には『無償提供マテリアルの使用許諾契約書』を確認しておいてください。
<img width="927" alt="スクリーンショット 2018-10-18 3.36.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/a4b695fe-cc79-3c8c-e862-58046d1d7bde.png">
zipファイルがダウンロード出来るので、ダブルクリックなどで解凍しておいてください。
Live2D Cubism 3のモデルデータは.cmo3という拡張子で保存されています。しかし、Unityにインポートする際には.moc3という拡張子の組込み用ファイル形式を用意する必要があります。
今回利用する『桃瀬ひより』は.cmo3形式のみの配布なので、.moc3形式に書き出す方法を説明します。
組込み用ファイルの書き出しにはCubism Editorを使用します。
こちらからCubism Editorをインストールしましょう。
<img width="1078" alt="スクリーンショット 2018-10-18 2.49.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/aa842ed3-a089-dd97-dfaa-7646fb1f82e5.png">
利用規約に同意した後、メールアドレスを入力し「最新版をダウンロード」をクリックしてください。ダウンロードしたファイルをダブルクリックし、手順に従ってインストールしてください。
<img width="639" alt="スクリーンショット 2018-10-18 2.54.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/2aeb3f8d-2028-5ddc-46bc-b8688646457b.png">
インストールが完了しました。
次に、以下のページに従って.moc3ファイルを書き出してください。
moc3ファイルの書き出し | Live2D Manuals & Tutorials

http://docs.live2d.com/cubism-editor-manual/moc3-file/
(2020.07.27追記)上記URLがリンク切れになっていました。恐らく以下の手順で大丈夫ですが、未確認です。

組み込み用データ | Live2D Manuals & Tutorials

https://docs.live2d.com/cubism-editor-manual/export-moc3-motion3-files/
<img width="556" alt="スクリーンショット 2018-10-18 3.48.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/f17a9641-8dd6-87e3-bb6b-236ebf326475.png">
書き出したファイルは、上記のように一つのフォルダにまとめておいてください。
組込み用ファイルをUnityにインポートしていきます。先程のフォルダをUnityエディタのProjectビュー上にドラッグアンドドロップします。
<img width="493" alt="スクリーンショット 2018-10-18 3.54.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/3f9136da-0ce5-dc58-3e93-e074f092c237.png">
インポートが終わると、このようにプレハブファイルが生成されます。
プレハブファイルが正常に生成されない時は？
Live2D SDKのインポート後にUnityの再起動はしましたか？
書き出し用ファイルに不足はありませんか？

 モデルをシーン上に配置するインポートしたモデルをUnityで表示してみましょう。
Projectビュー上で右クリックをして、[Create]>[Scene]を選択してください。
<img width="860" alt="スクリーンショット 2018-10-18 4.01.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/7f03f137-b534-ba86-71ce-ccf59bbde26a.png">
Mainと入力してください。
<img width="502" alt="スクリーンショット 2018-10-18 4.01.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/0e3e5719-6c58-e050-5afc-b01cc5debf17.png">
作成したシーンをダブルクリックで開いてください。
もし以下のようなウィンドウが表示されたら、[Don't Save]を押せば大丈夫です。

<img width="465" alt="スクリーンショット 2018-10-18 4.04.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/7251c4ed-5b06-a4ae-856e-25d7ffd41582.png">
Projectビューから、生成されたプレハブを選択し、Hierarchyビューにドラッグアンドドロップします。
<img width="779" alt="スクリーンショット 2018-10-18 4.06.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/eeddfa6a-b7cd-ffd6-c073-61f469f6e95c.png">
以下のような状態になればOKです。
<img width="825" alt="スクリーンショット 2018-10-18 4.09.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/47a1c1d2-1b2e-5414-7ce3-28d5e7e240e2.png">
Sceneビューにはモデルが表示されていますが、Gameビューには小さく表示されてしまっています。カメラの設定を変更して、大きく表示されるように調整をします。
HierarchyビューでMain Cameraを選択してください。
Inspectorビューにカメラの設定が表示されるので、以下のように変更してください。
<img width="378" alt="スクリーンショット 2018-10-18 4.20.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/7c177278-c895-f931-5f4e-9fccf8fcd067.png">
TransformのPosition yを0.4に変更
Backgroundを(R,G,B)=(0,255,0)に変更
CameraのProjectionがOrthographicになっていることを確認する
Sizeを0.2に変更
<img width="244" alt="スクリーンショット 2018-10-18 4.19.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/b2bf9706-ef47-1fa2-2a26-724474419a7d.png">

Backgroundの設定
<img width="550" alt="スクリーンショット 2018-10-18 4.20.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/0f8a4e66-929c-170e-86d7-ce87061b34f7.png">
Gameビューにこのように表示されるようになりました。
メニューから[File]>[Save Scenes]をクリックして、シーンを保存しておきましょう。
<img width="321" alt="スクリーンショット 2018-10-18 4.32.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/ced5c791-ee91-9c54-ba49-068f7f8c0b1f.png">
では最後に、Unity上でモデルを動かしてみましょう。
Hierarchyビューからモデルを選択してみてください。

<img width="686" alt="スクリーンショット 2018-10-18 4.51.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/f10512fa-3bf7-225b-d6da-9d8e130cf965.png">

(レイアウトを変えています)

InspectorビューにCubism Parameters Inspecotr (Script)というコンポーネントが表示されると思います。それぞれの項目がモデルの各パラメータと対応しています。自由に色々と動かしてみましょう。
このように連動してモデルが動くことが確認できます。

なお、変更したパラメータは、右下の「Reset」ボタンでリセットすることができます。

 プレゼンスを上げるさて、ここからはLive2Dモデルがキャラクターらしく振る舞うための設定をしていきます。

 口パクの実装まずは自分の声に合わせてキャラクターが口パクをするようにしてみましょう。

Unityでマイク音声を取得し、音声の大きさをキャラクターの口の開閉に反映させることで実現させます。
Projectビュー上で右クリックをして、[Create]>[C# Script]をクリックしてください。ファイル名にはSimpleLipSyncerと入力してください。
SimpleLipSyncerをダブルクリックしてエディタを開きます。以下のスクリプトをコピーアンドペーストし、保存してください。
SimpleLipSyncer.cs
using UnityEngine;
using Live2D.Cubism.Core;

/// <summary>
/// 口パクを行うクラス
/// </summary>
[RequireComponent(typeof(AudioSource))]
public class SimpleLipSyncer : MonoBehaviour
{
    AudioSource audioSource = null;

    [SerializeField]
    CubismParameter MouthOpenParameter = null;

    float velocity = 0.0f;
    float currentVolume = 0.0f;

    [SerializeField]
    float Power = 20f;

    [SerializeField, Range(0f, 1f)]
    float Threshold = 0.1f;

    void Start()
    {
        // 空の Audio Sourceを取得
        audioSource = GetComponent<AudioSource>();

        // Audio Source の Audio Clip をマイク入力に設定
        // 引数は、デバイス名（null ならデフォルト）、ループ、何秒取るか、サンプリング周波数
        audioSource.clip = Microphone.Start(null, true, 1, 44100);
        // マイクが Ready になるまで待機（一瞬）
        while (Microphone.GetPosition(null) <= 0) { }
        // 再生開始（録った先から再生、スピーカーから出力するとハウリングします）
        audioSource.Play();
        audioSource.loop = true;
    }

    private void LateUpdate()
    {
        float targetVolume = GetAveragedVolume() * Power;
        targetVolume = targetVolume < Threshold ? 0 : targetVolume;
        currentVolume = Mathf.SmoothDamp(currentVolume, targetVolume, ref velocity, 0.05f);

        if (MouthOpenParameter == null)
        {
            Debug.LogError("MouthOpenParameterが設定されていません");
            return;
        }
        // CubismParameterの更新はLateUpdate()内で行う必要がある点に注意
        MouthOpenParameter.Value = Mathf.Clamp01(currentVolume);
    }

    float GetAveragedVolume()
    {
        float[] data = new float[256];
        float a = 0;
        audioSource.GetOutputData(data, 0);
        foreach (float s in data)
        {
            a += Mathf.Abs(s);
        }
        return a / 255.0f;
    }
}
Hierarchyビュー上で右クリックをして、Create Emptyを選択してください。作成したGameObjectを選択した状態で、Add Componentをクリックしてください。
SimpleLipSyncを検索し、決定します。
<img width="278" alt="スクリーンショット 2018-10-18 5.30.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/69ee55de-da27-ce20-236a-dd7b7ab7088b.png">
このスクリプトがマイク音声を取得する役割を果たします。
次に取得した音声を口の開閉に反映させるための設定を行います。

先程のGameObjectを選択した状態で、Simple Lip SyncerのMouth Open Parameterの右端の○をクリックします。ウィンドウが表示されるので、ParameterMouthOpenYを検索して選択します。
<img width="527" alt="スクリーンショット 2018-10-18 5.31.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/d6804ba5-b833-8a91-da74-0d9a3c68e05e.png">
この状態でPlayボタンを押して再生し、してマイクに向かって喋ってみましょう。
キャラクターが自分の声に合わせて口パクするようになりました。
なお、この方法だとマイク音がPCから鳴ってしまう点に注意してください。

(問題がある場合は、後述のAniLipSync-live2dなどを使用してください。口の形が一つだけでも5箇所に設定してしまって大丈夫です。)

 まばたきを付ける参考: 自動まばたきの設定
シーン上のモデルに以下のスクリプトをAddComponentします。

CubismEyeBlinkController

BlendModeをOverrideに設定

CubismAutoEyeBlinkInput
<img width="491" alt="スクリーンショット 2018-10-18 5.42.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/546d86e9-56dc-ffaf-8c17-c404160fa501.png">
まばたきさせたいパラメータ(=目の開閉パラメータ)にCubismEyeBlinkParameterをAddComponentします。
対象は以下の2つです。
モデル/Parameters/ParamEyeLOpen
モデル/Parameters/ParamEyeROpen
<img width="493" alt="スクリーンショット 2018-10-18 5.45.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/9c9cd246-7b83-5c29-e15e-d49f6d1859f7.png">

ParamEyeROpenも同様に設定してください。
設定後、再生してみるとまばたきすることが確認できると思います。

 呼吸モーション参考: パラメータを周期的に動作させる方法
シーン上のモデルに以下のスクリプトをAddComponentします。

CubismHarmonicMotionController

BlendModeをOverrideに設定

呼吸に合わせて動かしたいパラメータにCubismHarmonicMotionParameterをAddComponentします。
今回は以下の2つに追加してみましょう。
モデル/Parameters/ParamBodyAngleY
モデル/Parameters/ParamBreath
<img width="581" alt="スクリーンショット 2018-10-18 5.59.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/c120c074-6bdb-6a2d-09e0-0a31a0818d0c.png">

それぞれのコンポーネントに、上記のような値を設定してください。
設定後、再生してみると呼吸モーションを確認できると思います。

 頭と視線を動かすマウスの動きに合わせてキャラクターが目で追うようにしてみましょう。
Projectビュー上で右クリックをして、[Create]>[C# Script]をクリックしてください。ファイル名にはGazeControllerと入力してください。
GazeControllerをダブルクリックしてエディタを開きます。以下のスクリプトをコピーアンドペーストし、保存してください。
GazeController.cs
using Live2D.Cubism.Core;
using UnityEngine;

/// <summary>
/// 目線の追従を行うクラス
/// </summary>
public class GazeController : MonoBehaviour
{
    [SerializeField]
    Transform Anchor = null;
    Vector3 centerOnScreen;
    void Start()
    {
        centerOnScreen = Camera.main.WorldToScreenPoint(Anchor.position);
    }
    void LateUpdate()
    {
        var mousePos = Input.mousePosition - centerOnScreen;
        UpdateRotate(new Vector3(mousePos.x, mousePos.y, 0) * 0.2f);
    }
    Vector3 currentRotateion = Vector3.zero;
    Vector3 eulerVelocity = Vector3.zero;

    [SerializeField]
    CubismParameter HeadAngleX = null, HeadAngleY = null, HeadAngleZ = null;
    [SerializeField]
    CubismParameter EyeBallX = null, EyeBallY = null;
    [SerializeField]
    float EaseTime = 0.2f;
    [SerializeField]
    float EyeBallXRate = 0.05f;
    [SerializeField]
    float EyeBallYRate = 0.02f;
    [SerializeField]
    bool ReversedGazing = false;
    void UpdateRotate(Vector3 targetEulerAngle)
    {
        currentRotateion = Vector3.SmoothDamp(currentRotateion, targetEulerAngle, ref eulerVelocity, EaseTime);
        // 頭の角度
        SetParameter(HeadAngleX, currentRotateion.x);
        SetParameter(HeadAngleY, currentRotateion.y);
        SetParameter(HeadAngleZ, currentRotateion.z);
        // 眼球の向き
        SetParameter(EyeBallX, currentRotateion.x * EyeBallXRate * (ReversedGazing ? -1 : 1));
        SetParameter(EyeBallY, currentRotateion.y * EyeBallYRate * (ReversedGazing ? -1 : 1));
    }
    void SetParameter(CubismParameter parameter, float value)
    {
        if (parameter != null)
        {
            parameter.Value = Mathf.Clamp(value, parameter.MinimumValue, parameter.MaximumValue);
        }
    }
}
Hierarchyビューのモデルの上で右クリックをし、[CreateEmpty]を選択、Anchorという名前にしてください。Editorビュー上で眉間の位置にAnchorを移動させましょう。ひよりモデルの場合は、(x,y,z)=(0,0.45,0)の位置です。
<img width="1044" alt="スクリーンショット 2018-11-30 6.50.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/f9c17dd6-2d07-cc3b-d251-b45f464f2507.png">
モデルに対して先程のコンポーネントをアタッチします。

以下のように設定してください。対応するパラメータが存在しない場合があるかと思いますが、ある分だけで大丈夫です。
<img width="347" alt="スクリーンショット 2018-11-30 6.55.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/9fa05f22-db4b-5578-fa64-49c6d3b95cd8.png">
この状態で再生をし、マウスを動かして見てください。
マウスの先を追うように頭が動くと思います。
<img width="267" alt="スクリーンショット 2018-11-30 7.03.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/b0cb5d80-4836-be69-04d4-25c43ea49e13.png">
また、ReversedGazingにチェックを入れてみると以下のようになります。
今度は常に正面を見つめた状態で頭が動くようになりました。

 表情を付けるこちらの記事を参考にしてください。

表情・ポーズを切り替える

 応用編ここからは応用編です。いくつかの「より魅力的になる表現」を紹介するので、ぜひ参考にしてみてください。

 リミテッドアニメのようなリップシンクを実装するLive2Dでアニメ調のリップシンクを実現できるAniLipSync-live2dというライブラリを使った例です。


「あーいーうーえーおー。こんな感じで、リップシンクができます！」
別の記事で導入方法を紹介しているので、参考にしてみてください。

Live2Dでアニメ調のリップシンクを実現する『AniLipSync-live2d』の使い方

 ボイスチェンジャーVTuberとして活動するとき、見た目と声が合っていない場合があると思います。

その場合はボイスチェンジャーを使ってリアルタイムに別の声に変換するという選択肢があります。
Windowsではフリーソフトの恋声を使ったやり方がお手軽です。MacならGarageBandで代替出来ると思います。
また、VT-4などボイストランスフォーマーと呼ばれる機器を用いて声の変換を行うこともあります。是非調べてみてください。
<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">あっまじだ、隠すと全然違う…知見だ… <a href="https://t.co/JKK0Je8kds">pic.twitter.com/JKK0Je8kds</a></p>— Nakaji Kohki (@kohki_nakaji) <a href="https://twitter.com/kohki_nakaji/status/1018007595393605632?ref_src=twsrc^tfw">2018年7月14日</a></blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 ARKitを使った表情認識iPhone X以降のFaceIDが付いた端末で利用できるARKitのFace Trackingという機能を使うと、このように高い精度で顔認識をして表情などを変えることが出来ます。
<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">iPhone X+ARKit+Live2Dがどんな感じに動くかのサンプル
(音声はPCで再生してるやつを録音したもの)
まだ表情のパラメーターは弄りがいがある感じ <a href="https://t.co/xNQZcQhsTY">pic.twitter.com/xNQZcQhsTY</a></p>— 🕯 (@mzyy94) <a href="https://twitter.com/mzyy94/status/931228533166260225?ref_src=twsrc^tfw">2017年11月16日</a></blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 OpenCVforUnityを使った実装ARKitのFace Trackingを使わない顔認識だと、このような選択肢もあります。

少し高額な有料アセットが必要ですが、導入しやすいと思います。
参考: FaceRig無しでも中の人(二次元)になりたい！【Unity × OpenCV × Dlib × Live2D】 - Qiita

 OBSを使った動画の収録・配信キャラクターを動かすための配信システムは最低限できたと思うので、次は実際に配信する手順を紹介します。

 配信アプリの書き出しまずは先程のシステムを、配信に使いやすいようにアプリとして書き出します。

 PlayerSettingsの設定メニューより、[Edit]>[Project Settings]>[Player]を選択します。
<img width="577" alt="スクリーンショット 2018-11-30 9.01.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/8e119bd9-fefd-fa81-0c70-7016dbb525f5.png">
Inscpectビューで[スタンドアロンタブ]>[Resolution and Presentation]を開き、Run In Backgroundにチェックをいれる。
<img width="272" alt="スクリーンショット 2018-11-30 9.03.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/43595104-765e-1911-6c77-f93b6a7f88a7.png">

 BuildSettingsの設定メニューより、[File]>[Build Settings]を選択します。
<img width="339" alt="スクリーンショット 2018-11-30 9.06.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/70d8ad57-7b07-ebeb-c77c-509f15e929c0.png">
Add Open Scenesを選択し、MainシーンがScenes In Buildに追加されたことを確認してBuildボタンを押す。
<img width="640" alt="スクリーンショット 2018-11-30 9.07.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/5b40cdf7-8dce-3f0b-8b7a-9bcdb52fcea0.png">
適当な名前を付けて「Save」ボタンを押す。
<img width="720" alt="スクリーンショット 2018-11-30 9.09.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/775a589b-6fee-5407-ea20-6731f4605a2f.png">
このように無事アプリが書き出されたらビルド成功です。

Windowsの方は適宜読み替えてください。
<img width="643" alt="スクリーンショット 2018-11-30 13.12.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/e925d1b1-5142-8c8a-80ad-20e2196b021e.png">
.dll周りでエラーが出た場合、Unityを再起動してもう一度試してみてください。

 アプリの起動確認ビルドしたファイルをダブルクリックで実行します。
<img width="488" alt="スクリーンショット 2018-11-30 20.04.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/b424b85c-3078-f146-0943-b26430afe68d.png">
Windowedにチェックを入れます。

その他の設定はおまかせで良いですが、Live2DやOVRLipSyncはそこそこ負荷が高いアプリなので、動作が重くなるようでしたら低めにすると良いかと思います。
任意の設定が完了したら「Play!」ボタンを押します。
<img width="737" alt="スクリーンショット 2018-10-18 18.49.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/d9665c44-2205-98b1-06e1-c4fa7b1a6075.png">
モデルが呼吸などのアニメーションをしていること、リップシンクが正常に動くことなどを確認してください。

 OBSの設定配信にはOpen Broadcaster Software (OBS)というアプリケーションを利用します。

Windows, Mac, Linuxをサポートしているオープンソースの配信ソフトウェアです。
こちらのダウンロードページを開き、お使いのOSに対応したインストーラーをダウンロードしてください。また、そのままインストールを進めてください。
インストールが完了したらOBSを起動します。初回起動時におすすめ設定を適用するか聞かれるかもしれませんが、あとから変更できるのでどちらでも大丈夫です。
<img width="1087" alt="スクリーンショット 2018-11-30 21.15.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/50116d06-b1a6-9e89-1609-c8d9733ce198.png">
このような画面が表示されます。

 ソースの設定ソースの「+」からウィンドウキャプチャを選択
<img width="271" alt="スクリーンショット 2018-11-30 21.17.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/388ba996-ca37-56e0-a541-ed8a2d5d2c3a.png">
新規作成が選択された状態で任意の名前を入力し、OKを押します。名前はそのままでも大丈夫です。
<img width="376" alt="スクリーンショット 2018-11-30 21.18.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/32a0f16c-7620-54ea-bc64-7f4bf09ee7eb.png">
リストの中から書き出したアプリを選択する。

起動中のアプリのみがリストに表示される点に注意してください。
<img width="735" alt="スクリーンショット 2018-11-30 21.45.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/1574164d-0cab-bab4-141b-b1da516c7926.png">
正しく選択できると上記のように書き出したアプリの映像が表示されるので、その状態でOKを押します。
ソースから、先程追加したウィンドウキャプチャの上で右クリックをし、フィルタを選択します。
<img width="507" alt="スクリーンショット 2018-11-30 21.57.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/69a92fff-c55b-8bf0-e1cd-62ce4cb597c1.png">
エフェクトフィルタよりクロマキーを選択
<img width="317" alt="スクリーンショット 2018-11-30 21.57.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/814540e9-d2e2-9070-a367-c2d61e19381d.png">
デフォルトで緑になっているので、このように背景が透過されます。

もしUnity側で別の色を背景色に設定していた場合などは、適宜設定を変更してください。
<img width="566" alt="スクリーンショット 2018-11-30 21.58.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/d33afaf6-9a87-5442-9431-4b26bef0caaf.png">
(Macのみ)ウィンドウの枠を切り抜きます。エフェクトフィルタよりクロップ/パッドを選択してください。画像のように値を調整してください。
<img width="867" alt="スクリーンショット 2018-11-30 22.02.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/83b1bf29-99cd-1548-2b9a-ab81e95fe2ca.png">
設定が完了したら、右下の「閉じる」ボタンを押してください。
最後に、赤枠をドラッグしてサイズと位置を調整してください。

端の方は補正が効くので合わせやすいと思います。

 背景の設定背景を設定します。今回は画像を利用しますが、例えば動画ファイルやデスクトップ、ゲーム画面などを背景にしても大丈夫です。著作権などには十分に注意してください。
今回はこちらの画像を使用させていただきました。
ソースの「+」から画像を選択し、新規作成から任意の名前を付けてOKを押します。

「参照」をクリックし、ファイラーから任意の画像を選択します。
<img width="731" alt="スクリーンショット 2018-11-30 22.18.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/f182d39d-def0-0f15-e4d9-5ac2a98a7d39.png">
上記のようになったら、「OK」をクリックします。
赤枠をドラッグしてサイズや位置の調整を行います。
背景がキャラクターよりも上に表示されているので、重なり順を入れ替えます。

ソースから画像をクリックして、「V」をクリックします。
<img width="199" alt="スクリーンショット 2018-11-30 22.23.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/39c187b8-63fd-318f-79eb-7fdbc20e9726.png">
ソースでは順番が上のものほど手前に表示されるので、以下のように正しい重なり順になりました。
<img width="899" alt="スクリーンショット 2018-11-30 22.24.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/b65354de-696e-070d-4467-5374981cdb3f.png">
これで映像の準備は完了しました。

 音声の設定最後に音声の設定をします。
ソースの「+」から「音声入力キャプチャ」を選択し、新規作成から任意の名前を打ってOKを押します。
デバイスのリストから「既定」を選択します。もし入力したい音声ソースがある場合や、ボイスチェンジャーなどを使っていて仮想音声ソース(Soundflower等)を使いたい場合などは、そちらを設定してください。
<img width="309" alt="スクリーンショット 2018-11-30 22.27.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/eb515394-a262-1f09-969e-b22b092a3c7a.png">
選択したらOKを押します。
設定した音声に併せてゲージが反応することが確認出来ると思います。
これだけでも良いのですが、OBSでは映像のキャプチャ時に少し遅延があります。

書き出したアプリをOBSを並べて口パクさせてみると、元アプリ(右)の口が動いてからOBS(左)の口が動くまでにワンテンポ遅れていることが分かると思います。
そこで、ボイスの収録を映像の遅延に併せて少し遅らせる設定をします。

ミキサーの右の歯車アイコンをクリックし、「オーディオの詳細プロパティ」を選択してください。
<img width="451" alt="スクリーンショット 2018-11-30 22.40.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/a50bfde3-c7c3-4a50-af0b-feeed22565b4.png">
マイクの同期オフセットに値を入力してください。環境毎に遅延時間が異なるので、調整してみてください。
<img width="1002" alt="スクリーンショット 2018-11-30 22.42.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/d3267af8-5aaf-0990-2539-e85a190c23bf.png">
完了したら閉じるを押してください。

これで映像と音声の準備が出来ました。

 動画の録画右下の「設定」より、出力タブの「録画フォーマット」をmp4やmovなどに変更してください。

(デフォルトのflvだと扱いづらいと思うので)
録画開始ボタンで録画開始、録画終了ボタンで録画終了です。
なお、リップシンクの反応が悪い時は、書き出したアプリを選択した状態で収録を行ってください(録画開始ボタンを押した直後に、書き出したアプリのウィンドウをクリックすればOKです)。ウィンドウを選択していない状態だと認識しづらい問題があるようです。
録画が終了すると、MacだとMovieフォルダなどに出力されます。

出力場所は、「設定」から出力タブを選び、「録画ファイルのパス」にて確認・変更することが出来ます。
<img width="604" alt="スクリーンショット 2018-11-30 22.48.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/55365/3946f742-0f60-97dd-3790-582fe8ef487c.png">
動画を再生し、映像や音声がきちんと収録されていることを確認してください。
あとはTwitterやYouTubeにアップロードすれば、見事VTuberデビューです！

 その他OBSにはYouTubeなどの生配信を行う機能や、音声のノイズを除去する機能など、様々な機能が付いています。

やりたいことがあれば、是非調べて挑戦してみてください。

 最後に今回扱った内容は基本的なことばかりです。

色々な技術を組み合わせてぜひ魅力的なキャラクターを生み出してください！
明日は、バーチャルモーションキャプチャ開発者の @sh_akira さんによるUniVRM+SteamVR+Final IKで始めるVTuberです。

VTuber Tech #1 Advent Calendar 2018

VTuber Tech #2 Advent Calendar 2018

 関連【サポーターズCoLab勉強会】Unity+Live2Dで始めるVTuber入門ハンズオン - サポーターズCoLab

https://supporterzcolab.com/event/568/
低スペックPCでVtuberになるいくつかの方法 - Qiita

https://qiita.com/Hirosaji/items/83777124823683766d96

脚注
http://docs.live2d.com/cubism-sdk-tutorials/getting-started/ ↩︎
https://forum.live2d.com/discussion/comment/3653/#Comment_3653 ↩︎