VRMモデルの視線制御（目の可動範囲）の設定方法

はじめましておぐらです。
今回はVRMモデルの設定で忘れられがちな、目の可動範囲の設定方法をまとめます。

目の可動範囲がデフォルト設定のままだと、VRM対応アプリでこんな風に目が動く現象が起こり得ます。

![Eye_setup01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/09640bbe-f590-be88-ce13-0ca0f8bc9ac1.gif)

目が動きすぎてちょっと気持ち悪いですね。
これではせっかくのアバターが台無しなので、`VRMLookAtBoneApplyer`の設定を変えて、目の可動範囲を適切に設定してあげましょう。

---

＜2019/06/28追記＞
バーチャルキャスト等でVIVE Pro eyeを使用した視線制御を行う場合、ちょっと大げさな可動範囲設定の方が魅力的に動くかもしれません。いろいろ試してみてください。

---

公式のドキュメントにもこのコンポーネントについては記載されていますが、こちらは動作確認の仕方などの説明がありませんので、目の動きを確認しながら設定していく方法を紹介します。
https://vrm.dev/univrm/components/univrm_lookat/

ちなみに、今回の目の可動範囲設定は**視線をボーンで制御するモデル**で行います。
**BlendShapeで視線制御を行うモデル**の場合、可動範囲の設定はVRMのBlendShape設定にある`LookUp`, `LookDown`, `LookLeft`, `LookRight`を設定し、`VRMLookAtBoneApplyer`を消して`VRMLookAtBlendShapeApplyer`を追加する…などの作業をする必要があります。
BlendShapeでの視線制御については[こちら](https://github.com/vrm-c/UniVRM/wiki/LookAt%E3%81%AE%E8%A8%AD%E5%AE%9A#lookup-lookdown-lookleft-lookright%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)を見てみてください。

# 1. VRMを読み込む
まずはUnity2017か2018で空のプロジェクトを用意し、最新の[UniVRM](https://github.com/vrm-c/UniVRM/releases)をインポートします。もちろん、VRMを書き出した過去のプロジェクトを開いても構いません。
Unity2019もリリースされていますが、Shaderの仕様がやや変わっているらしく、表示が崩れることがあるので今回はUnity2018.2.21f1を使います。

VRMモデルをProjectにドラッグ＆ドロップで配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/a3ada80b-4453-fcb8-75e5-44d4fb14cf3d.png)

書き出されたPrefabをシーン上に配置しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/08113efa-cd9e-1edf-4032-43e8188962a6.png)
同時にCameraやLightもいい感じに設定しておきます。
Cameraはモデルの前に移動、180度回転させてFieldOfViewを小さくしました。
LightはColorを白にし、回転させて前から光がさすようにしています。

# 2. VRMLookAtBoneApplyerを確認する
シーンに置いたモデルを選択して、Inspectorを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/bfb10fc0-78d3-2cb0-d4f6-2556864aa01d.png)
下の方までスクロールしていくと…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/5d98d67b-21c5-6fd2-71aa-46d9a3393323.png)
ありました。コレです。
`Degree Mapping`の下にある４つの▶を開きましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/db80a896-cbfd-d674-e08b-7c7c119575b8.png)
この設定値がそれぞれ`90`と`10`なら、それは初期設定のまま、という事です。
では、目線の様子を確認しながらいじっていきましょう。

# 3. 目の動きを確認しながらパラメータを編集する

`VRMLookAtBoneApplyer`の数値をそのまま編集してもいいですが、実際にどう目が動くかはよく分かりません。
実際に目の動きを確認しながら設定しましょう。

## 3-1 VRMモデルが「見る」オブジェクトを配置する
Hierarchyに適当にCubeを生成します。
（※Hierarchyで「何も選択していない状態」でCubeを生成してください。何かが選択されていると選択されたオブジェクトの子に配置されてしまいます。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/827b135a-2cdd-e079-515b-4b56eee09fd4.png)
適当な位置にCubeが置かれるので、InspectorからTransformを操作してPositionをすべて0、Scaleをすべて0.1にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/d5097bc6-b80a-2677-2eff-e34075dd20f6.png)

すると、Scene上ではモデルの足元にCubeが配置されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/aacf24b5-ee7b-3c60-8748-4638a675d462.png)

次に、このCubeをモデルの目の前まで移動させましょう。

![Eye_setup02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/93110967-e155-43d1-c850-54dcfaf81873.gif)
Gameビューはこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/5b38c062-44f1-7032-6034-37a151512eb6.png)

## 3-2 VRMLookAtHeadにCubeを設定する
シーン上のVRMモデルを選択して、Inspentorで`VRMLookAtHead`を探します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/5b399bc1-dcf5-2b07-bd2a-d68aec2de9ab.png)
ありました。

ここの`Target`に、先程配置したCubeをドラッグ＆ドロップで設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/422981f5-f480-c257-b79a-301e5ac91d45.png)

これでOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/cb1ff307-bfac-025a-ebbf-cad8013153e5.png)

## 3-3 目の動きを確認しながらパラメータを編集する
では、シーンを実行して確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/1f983751-b95f-9c0a-290f-9ad2a5f6e692.png)

実行中にCubeの位置を動かすと、モデルの視線がCubeを追うはずです。
![Eye_setup03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/cf93bf00-0306-8938-29fd-570b034f579a.gif)

Cubeを向かって左端に移動させると、こんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/b4628261-795f-2b69-7eaa-5b2525fab6fe.png)
デフォルトでは左目がやや内側に行き過ぎている気がするので、モデルの`VRMLookAtBoneApplyer`を編集します。
（まだUnityを停止させないでください）

内側に向きすぎている、という事は、`Horizontal Inner`の`Curve Y Range Degree`の値を操作してやればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/d637ab8e-a9b6-cd17-df0e-b96d3f181d84.png)
`10`→`3`にしたら左目がいい感じになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/cb68f018-222d-ecc3-d116-d13e38eced97.png)

右目もちょっと外に向き過ぎですね。

では次は、`Horizontal Outer`の`Curve Y Range Degree`を操作します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/134d70a9-0cfd-eba0-d730-95dee9823959.png)
`10`→`7`にしたらいい感じになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/4688f1af-5e65-6127-6c36-46b25ccffad2.png)
かわいい。OK！

今は左右の設定をしました。次は上下の設定です。
Cubeを中央の高い位置に移動させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/8918793c-435b-660b-2b93-bff9bbce0ba4.png)

ちょっと上を向きすぎですね。目のハイライトが隠れるとアレなので、もう少し小さい値にしてあげます。
操作するのは`Vertical Up`の`Curve Y Range Degree`。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/df2d873a-cb57-bb7b-3786-c808e602a232.png)
`10`→`5`にするといい感じになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/1aef43ac-640b-27f5-33cb-b333228d987f.png)

では最後に、Cubeを移動させて下の方に配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/4ef6219a-a3be-91d9-6251-13d13128e30c.png)
う～ん、カワイクない！
ので、これも調整。残った`Vertical Down`の`Curve Y Range Degree`値を操作します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/2f8b1cf5-021e-efc9-89d2-6793db844651.png)
これも`10`→`5`くらいでいい感じになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/a3b760b1-25ec-a199-f537-76beee26d45a.png)

# 4. 最終確認をして値を適用する
まだUnityを停止しないでくださいね！
最後に、Cubeをぐるぐる動かして目の動きを確認しましょう。
![Eye_setup04.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/91ba3a9e-5347-5992-6f36-f2216877acbb.gif)

お疲れ様でした。
最後に、`VRMLookAtBoneApplyer`に編集した値を適用します。
Unityに慣れた方は分かるかと思いますが、実行中に編集したパラメータは一時的なもので、停止すると編集した値はすべて実行前の状態にリセットされてしまいます。

なので、まずは`VRMLookAtBoneApplyer`の右上にある歯車アイコンから`Copy Component`をクリックして値を保持しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/e4b9c564-8976-86ab-8e03-049a8e1dd999.png)
では、シーンを停止します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/bd4af2d4-5108-fa89-a475-30e5c7fbecf6.png)
`VRMLookAtBoneApplyer`を見ると、値がすべて`10`になっていますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/02423785-1ff7-2933-d19d-96fe4073164a.png)
でも大丈夫。右上の歯車アイコンから`Paste Component Values`をすることで、値が復活します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/daf8995b-cf80-ea62-5d82-5c30a877a7aa.png)

復活しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/92481713-98cb-72c1-793f-66297322f58b.png)

# 5. VRMファイルを書き出す
これで設定は完了です！
あとはVRMをExportしてお楽しみください！

…そういえば、`Curve Y Range Degree`ばかりで`Curve X Range Degree`の設定は触りませんでしたね。あの`90`になっていた方のスライダーです。
こちらの値は、見る対象物に視線を向ける速さみたいなものです。値を小さくするほど速くなったかと…（曖昧）
可動域には影響しないので、説明を省きました。スミマセン！

# Ex. VRoid Studioでの目の可動範囲設定
`共通設定`を選択し、左のメニューで`目の可動域`を選ぶと右側にスライダーが表示され、編集することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/c2b6b5f7-d017-9fe3-0370-dbd93c1b6dfe.png)