Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

Eye_setup01.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での視線制御についてはこちらを見てみてください。

1. VRMを読み込む

まずはUnity2017か2018で空のプロジェクトを用意し、最新のUniVRMをインポートします。もちろん、VRMを書き出した過去のプロジェクトを開いても構いません。
Unity2019もリリースされていますが、Shaderの仕様がやや変わっているらしく、表示が崩れることがあるので今回はUnity2018.2.21f1を使います。

VRMモデルをProjectにドラッグ&ドロップで配置します。
image.png

書き出されたPrefabをシーン上に配置しましょう。
image.png
同時にCameraやLightもいい感じに設定しておきます。
Cameraはモデルの前に移動、180度回転させてFieldOfViewを小さくしました。
LightはColorを白にし、回転させて前から光がさすようにしています。

2. VRMLookAtBoneApplyerを確認する

シーンに置いたモデルを選択して、Inspectorを確認します。
image.png
下の方までスクロールしていくと…
image.png
ありました。コレです。
Degree Mappingの下にある4つの▶を開きましょう。
image.png
この設定値がそれぞれ9010なら、それは初期設定のまま、という事です。
では、目線の様子を確認しながらいじっていきましょう。

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

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

3-1 VRMモデルが「見る」オブジェクトを配置する

Hierarchyに適当にCubeを生成します。
(※Hierarchyで「何も選択していない状態」でCubeを生成してください。何かが選択されていると選択されたオブジェクトの子に配置されてしまいます。)
image.png
適当な位置にCubeが置かれるので、InspectorからTransformを操作してPositionをすべて0、Scaleをすべて0.1にします。

image.png

すると、Scene上ではモデルの足元にCubeが配置されます。
image.png

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

Eye_setup02.gif
Gameビューはこんな感じ。
image.png

3-2 VRMLookAtHeadにCubeを設定する

シーン上のVRMモデルを選択して、InspentorでVRMLookAtHeadを探します。
image.png
ありました。

ここのTargetに、先程配置したCubeをドラッグ&ドロップで設定します。
image.png

これでOKです。
image.png

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

では、シーンを実行して確認してみましょう。
image.png

実行中にCubeの位置を動かすと、モデルの視線がCubeを追うはずです。
Eye_setup03.gif

Cubeを向かって左端に移動させると、こんな感じになります。
image.png
デフォルトでは左目がやや内側に行き過ぎている気がするので、モデルのVRMLookAtBoneApplyerを編集します。
(まだUnityを停止させないでください)

内側に向きすぎている、という事は、Horizontal InnerCurve Y Range Degreeの値を操作してやればOKです。
image.png
103にしたら左目がいい感じになりました。
image.png

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

では次は、Horizontal OuterCurve Y Range Degreeを操作します。
image.png
107にしたらいい感じになりました。
image.png
かわいい。OK!

今は左右の設定をしました。次は上下の設定です。
Cubeを中央の高い位置に移動させます。
image.png

ちょっと上を向きすぎですね。目のハイライトが隠れるとアレなので、もう少し小さい値にしてあげます。
操作するのはVertical UpCurve Y Range Degree
image.png
105にするといい感じになりました。
image.png

では最後に、Cubeを移動させて下の方に配置します。
image.png
う~ん、カワイクない!
ので、これも調整。残ったVertical DownCurve Y Range Degree値を操作します。
image.png
これも105くらいでいい感じになりました。
image.png

4. 最終確認をして値を適用する

まだUnityを停止しないでくださいね!
最後に、Cubeをぐるぐる動かして目の動きを確認しましょう。
Eye_setup04.gif

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

なので、まずはVRMLookAtBoneApplyerの右上にある歯車アイコンからCopy Componentをクリックして値を保持しておきます。
image.png
では、シーンを停止します。
image.png
VRMLookAtBoneApplyerを見ると、値がすべて10になっていますね。
image.png
でも大丈夫。右上の歯車アイコンからPaste Component Valuesをすることで、値が復活します。
image.png

復活しました。
image.png

5. VRMファイルを書き出す

これで設定は完了です!
あとはVRMをExportしてお楽しみください!

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

Ex. VRoid Studioでの目の可動範囲設定

共通設定を選択し、左のメニューで目の可動域を選ぶと右側にスライダーが表示され、編集することができます。
image.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away