オリジナルVRMモデルにCandyRockStarを踊ってもらう （2）VRMの導入・設定

[前回の記事](https://qiita.com/niiya_enji/items/5ebc63a8ead43ecad930)の続きを書いていきます．

#VRMモデルを導入
自分のVRMモデルを動かしてぇ～～～！！！
はい，動かしましょう．

まずは[公式GitHub](https://github.com/vrm-c/UniVRM/blob/master/README.ja.md)からUniVRMをダウンロード

ダウンロードできたらUnityに戻り，上部ツールバーからAssets>Import Package>Custom Package...
ダウンロードしたUniVRMを選択し，開きます．（少し時間がかかります）

UniVRMを開くことができたら，Project内にVRMファイルをD&Dしましょう．
![Inkedキャプチャ5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273124/f82e0997-0ef0-9fe5-cdd2-5bb208f34dc2.jpeg)
フォルダ分けをしていないので少々汚いですが，このまま行きます．

##1.Prefabにオブジェクトを追加
VRMファイルを入れることで出力された[VRM名].prefabを編集します．
[VRM名].prefabを選択し，InspectorビューからOpen Prefabを選択．

ステージ上の光のみではキャラクタが暗くなってしまうため，Prefab内にポイントライトを追加します．
Hierarchyの一番上にあるオブジェクト（VRM名のオブジェクト）を右クリック＞Light>PointLightで追加．
Inspectorビューでは以下のように設定しました．（身長に合わせてY座標を調節）
![yfutyuygkyugkg.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273124/975b7a78-30b8-a718-aafd-5c1206f7969f.png)

また，右クリック＞CreateEmptyで空のオブジェクトを追加し，名前を「Camera Target」とします．
さらに別の空のオブジェクトを追加．こちらの名前は「Character1_Head」とします．
InspectorビューのTransformの設定は以下のとおりです．（身長に合わせてY座標を調節）
![キャプチャ11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273124/4954cf2b-2f97-87b3-c05e-3b76f07e4a9d.png)
これら2つのオブジェクトは，カメラが向くターゲットを示しています．

##2.Prefabにアニメーターを設定
Hierarchyの一番上にあるオブジェクト（VRM名のオブジェクト）を選択．
InspectorビューからAnimatorのControllerの右の⦿から「MocapC86」を選択します．

また，ApplyRootMotionにチェックを入れておきましょう．
これがないと左右前後に動いてくれません．
![uyfukyugyguugukyggky.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273124/ef2ec2bd-b687-4ef3-6298-33ae5e69f5b9.png)

アニメーターの設定は以上です．

##3.Prefabに表情変化イベントを受け取るスクリプトを追加
まだ表情が変化しないので，表情変化イベントを受け取る処理を書きます．

Hierarchyの一番上にあるオブジェクト（VRM名のオブジェクト）を選択．
Inspectorビューの一番下のAddComponentからNew Scriptを選択．
名前は「FaceChanger」とします．Script右のFaceChangerをダブルクリックでファイルを開きます．
FaceChanger.csの内容は以下．

```c#:FaceCanger.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using VRM;

public class FaceChanger : MonoBehaviour
{
	VRMBlendShapeProxy proxy;

	void Start(){
		proxy = GetComponent<VRMBlendShapeProxy>();
	}
	//表情を変えるイベントをここで受け取る．
	public void OnCallChangeFace (string str)
	{   
		switch(str){									//受け取ったメッセージが
			case "eye_close@unitychan":					//「目を閉じる」であれば
				proxy.ImmediatelySetValue("BLINK",1);	//目を閉じる
			break;
			case "smile3@unitychan":					//「笑顔」であれば
				proxy.ImmediatelySetValue("JOY",1);		//笑顔
			break;
			case "conf@unitychan":						//「怒る」であれば
				proxy.ImmediatelySetValue("ANGRY",1);	//怒る
			break;
			case "default@unitychan":					//それ以外なら
				proxy.ImmediatelySetValue("BLINK",0);	//初期化
				proxy.ImmediatelySetValue("JOY",0);
				proxy.ImmediatelySetValue("ANGRY",0);
			break;
		}
	}
}

```
VRMの表情設定をそのまま活かす形で設定しました．

#StageDirectorを編集
ProjectのScene内にあるMainを開いていれば，StageDirectorがHierarchyにあると思います．
StageDirectorを選択し，InspectorビューのStageDirector(Script)＞PrefabOnTimeLine＞Element0にVRMキャラのPrefabを設定します．
![キャプチャ456464.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273124/6bb448f1-76bf-2e8d-d2ab-42e3180a4b68.png)
#リップシンク（口パク）設定
このまま再生してみると分かるんですけど，口が動きません．
**「歌ってるなら口は動いてほしい！！！」**
わかります．なんとかしましょう．

CandyRockStarのユニティちゃんの口が動く仕組みは「LipSyncController.prefab」にあります．
projectウィンドウの検索バーから探してみてください．

このPrefabを開き，Hierarchyの一番上のオブジェクト（LipSyncController）を選択．
InspectorビューからLipSyncController(Script)内のTargetName欄を変更します．
~~ここには**「あ・い・う・え・お」のブレンドシェイプが存在するオブジェクト**の名前を入力します．~~
`コメントがあったので修正します．（2019/04/30　現在）`
ここには「**VRMPrefab名(Clone)**」と入力してください．(ex: Enji(Clone) )
そしてLipSyncController.csの内容を以下のように変更します．

```c#:LipSyncController.cs
using UnityEngine;
using System.Collections;
using VRM;

public class LipSyncController : MonoBehaviour
{
    public string targetName;

    public Transform nodeA;
    public Transform nodeE;
    public Transform nodeI;
    public Transform nodeO;
    public Transform nodeU;

    public AnimationCurve weightCurve;

    VRMBlendShapeProxy target; //変更

    void Start()
    {
        target = GameObject.Find(targetName).GetComponent<VRMBlendShapeProxy>();//変更
    }

    float GetWeight(Transform tr)
    {
        return weightCurve.Evaluate(tr.localPosition.z);
    }

    void LateUpdate()
    {
        var total = 1.0f;//変更

        var w = total * GetWeight(nodeA);
        target.SetValue("A", w, false);//変更
        total -= w;

        w = total * GetWeight(nodeI);
        target.SetValue("I", w, false);//変更
        total -= w;

        w = total * GetWeight(nodeU);
        target.SetValue("U", w, false);//変更
        total -= w;

        w = total * GetWeight(nodeE);
        target.SetValue("E", w, false);//変更
        total -= w;

        w = total * GetWeight(nodeO);
        target.SetValue("O", w, false);//変更

        target.Apply();//追加
    }
}
```

以上のように設定することでVRMの表情設定と同様に設定できます．

あとはPostProcessingStac v2を利用してエフェクトを掛けて，Recorderアセットで録画すれば動画が撮れます．
[PostProcessing参考サイト](https://www.gaprot.jp/gaprot-x-chogiken/xr/unity-lookdev-post-processing-stack-v2)

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">オリジナルVRMモデルでCandyRockStar踊ってみた <a href="https://t.co/QcvvlgWEq3">https://t.co/QcvvlgWEq3</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから<br>Twitterに上げてた動画をさらに修正してFullでアップました！！<br>何卒～～～！！！</p>&mdash; 🔥炎児🔥 (@niiya_enji) <a href="https://twitter.com/niiya_enji/status/1122011009168728064?ref_src=twsrc%5Etfw">2019年4月27日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#参考
[VRM公式サイト](https://vrm.dev/)
[UniVRM公式GitHub](https://github.com/vrm-c/UniVRM/blob/master/README.ja.md)
[Unity ルックデヴ講座 Post Processing Stack v2編](https://www.gaprot.jp/gaprot-x-chogiken/xr/unity-lookdev-post-processing-stack-v2)

#ライセンス
ユニティちゃん
![imageLicenseLogo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273124/000e5a0c-dad7-c77c-5547-efca3fee4d99.png)
この作品は[ユニティちゃんライセンス](http://unity-chan.com/contents/license_jp/)条項の元に提供されています