VIVE Pro Eyeのアイトラッキングを解説【自作開発でも眼球操作】

VIVE Pro Eyeのアイトラッキングを解説するとUnityでの自作ツールの開発でも眼球操作が利用できるって本当?
SDKやプラグインを入れたらまずサンプルシーンで動作確認するのがおすすめって本当?
設定の作業はEye Shape Tablesでのブレンドシェイプがメインで上手く動かない時はVRM Look At Headをいじってみようって本当?
こんな疑問に答えます。

僕はVRoidで漫画が作れるiPhoneアプリComicamを開発して公開中です。
そんな僕が解説していきます。

VIVE Pro Eyeのアイトラッキングを解説【自作開発でも眼球操作】

VIVE Pro EyeのアイトラッキングをUnityでの開発に利用していく流れについて書きます。

VIVE PRO EYEの一般的な話はこちらの記事で書いています。
» VIVE Pro Eyeを徹底解説【目を動かすまでの流れ+他機種との比較】

VIVE Pro EyeのアイトラッキングをUnityで設定しよう=まずは公式からSDKをダウンロード

アイトラッキングの開発のSDKをダウンロード

https://developer.vive.com/resources/vive-sense/eye-and-facial-tracking-sdk/download/latest/

VIVE公式ページの中からEye abd Facial Trackingの最新のSDKを選んでダウンロードします。
規約に同意してHTCのアカウントにログインするとダウンロードが始まります。

SRanipal Runtimeがまだの人はそれもダウンロード

VIVE製品を機種変した人などでアイトラッキングの基本ソフトウェア(SR_Runtime)のインストールがまだの人はそっちもやりましょう。
» 参考:アイトラッキングソフトウェアをインストールする(VIVE公式)

ロボットアイコンが出てればSR_Runtimeはインストールされてます。

VIVE Pro Eyeのアイトラッキングのプラグインをインストールしよう

Unityを開いてプラグインをインポートする

ダウンロードしたファイルの中にあるVive-SRanipal-Unity-Plugin.unitypackageをクリックしてUnityで開きます。

いつも通りにインポートを押せばOKです。

OpenXRがまだの人はそれも設定しよう

Open XR Plugin(非営利団体による共通規格)(OpenVRの進化版)がONになっているか確認しましょう。
Window>Package Managerのウィンドウで各VRゴーグル特有のスクリプトを設定します。
こちらの記事に画像入りで詳しく書いています。
» XR Interaction Toolkitを解説【全ゴーグル向け構築が可能+応用技】

VIVE Pro Eyeのアイトラッキングのサンプルシーンを見ていこう

EyeSample_v2を開いてみよう

Asset > ViveSR > Scenes > Eyeの中の「EyeSample_v2」を開いてみましょう。
男性モデルか女性モデルを表示させて起動してみましょう。
自分の目に合わせてモデルが動いてくれれば成功です。
基本的にこれを自作のプロジェクトでも真似していけばOKです。

Eye Shape Tablesなどの設定を確認しよう(ズレてる)

笑顔・びっくり・泣き顔…などの時にどこのシェイプを動かすか指定しているところです。
ズレてしまっている(俺だけ?)のでこの記事の次の章で綺麗にまとめました。

この時点で目が動かない人は原因を探ろう

・HTC VIVEはきちんと接続されてON表示されていますか?
・SRanipal Runtimeが機能してるか確認する(ロボットのアイコン)
・Animaterなど右サイドバーの機能をONOFFしてみる
・VIVEを再起動してみる
・Unityを再起動してみる

僕はこの辺を試したりします。
想像以上に再起動で治るパターンも多いので試してみてください。
自作プロジェクトで動かない時もこのサンプルプロジェクトに戻って動作確認すると便利です。
(その場合は変更保存してない新品のサンプルプロジェクトで試す)

サンプルについてのドキュメントも一応は存在(SDKガイド)

・SRanipal Unity SDK Guide(PDF)
・SRanipal Unity SDK document(HTML)
» 参考:Documentation - SRanipal Unity SDK(VIVE公式)

PDF資料に目の状態の一覧が図示されています。
(Squeeze、Blink、Up、Downの違い)
でもまあ…これ見なくてもボタン押していけばすぐパッとわかると思います。
HTMLにはクラスの一覧などがシンプルに載ってます。

VIVE Pro Eyeのアイトラッキングを自分のプロジェクトのVRoidにも適用しよう

ではここから自分のプロジェクトでVRoid(VRM)のアイトラッキングをしていきます。

サンプルと同じようにSRanipalのフレームワークを配置しよう

まずはVRoidモデルの右サイドバーにSRanipal Avatar Eye Sample v2 (Script)を追加します。

左サイドバーのヒエラルキーにSRanipal Eye Frameworkも追加します。

SRanipal Eye Frameworkのバージョンは2になっているかも確認しましょう。

Eye Shape Tablesの欄に対応するブレンドシェイプを設定をしていこう

Eye Shape Targetsの設定をしていくんですがサンプルファイルと同じく今回もズレてしまっています。

仕方ないので数えました。

No.

BlendShapeの並び順

Eye Shape Tablesでの設定

意味

1

Face.M_F00_000_00_Fcl_ALL_Angry

怒り

2

Face.M_F00_000_00_Fcl_ALL_Fun

楽しい

3

Face.M_F00_000_00_Fcl_ALL_Joy

喜び

4

Face.M_F00_000_00_Fcl_ALL_Sorrow

悲しい

5

Face.M_F00_000_00_Fcl_ALL_Surprised

驚き

6

Face.M_F00_000_00_Fcl_BRW_Angry

怒り

7

Face.M_F00_000_00_Fcl_BRW_Fun

楽しい

8

Face.M_F00_000_00_Fcl_BRW_Joy

喜び

9

Face.M_F00_000_00_Fcl_BRW_Sorrow

悲しい

10

Face.M_F00_000_00_Fcl_BRW_Surprised

驚き

11

Face.M_F00_000_00_Fcl_EYE_Natural

標準

12

Face.M_F00_000_00_Fcl_EYE_Angry

怒り

13

Face.M_F00_000_00_Fcl_EYE_Close

閉じ

14

Face.M_F00_000_00_Fcl_EYE_Close_R

Eye_Right_Blink

閉じ(右)

15

Face.M_F00_000_00_Fcl_EYE_Close_L

Eye_Left_Blink

閉じ(左)

16

Face.M_F00_000_00_Fcl_EYE_Joy

喜び閉じ

17

Face.M_F00_000_00_Fcl_EYE_Joy_R

喜び閉じ(右)

18

Face.M_F00_000_00_Fcl_EYE_Joy_L

喜び閉じ(左)

19

Face.M_F00_000_00_Fcl_EYE_Sorrow

悲しい

20

Face.M_F00_000_00_Fcl_EYE_Surprised

驚き

21

Face.M_F00_000_00_Fcl_EYE_Extra

22

Face.M_F00_000_00_Fcl_MTH_Up

上げる

23

Face.M_F00_000_00_Fcl_MTH_Down

下げる

24

Face.M_F00_000_00_Fcl_MTH_Angry

怒り

25

Face.M_F00_000_00_Fcl_MTH_Neutral

標準

26

Face.M_F00_000_00_Fcl_MTH_Fun

楽しい

27

Face.M_F00_000_00_Fcl_MTH_Joy

喜び

28

Face.M_F00_000_00_Fcl_MTH_Sorrow

悲しい

29

Face.M_F00_000_00_Fcl_MTH_Surprised

驚き

30

Face.M_F00_000_00_Fcl_MTH_A

31

Face.M_F00_000_00_Fcl_MTH_I

32

Face.M_F00_000_00_Fcl_MTH_U

33

Face.M_F00_000_00_Fcl_MTH_E

34

Face.M_F00_000_00_Fcl_MTH_O

35

Face.M_F00_000_00_Fcl_HA_Fung1

牙1

36

Face.M_F00_000_00_Fcl_HA_Fung1_Low

牙1(上顎)

37

Face.M_F00_000_00_Fcl_HA_Fung1_Up

牙1(下顎)

38

Face.M_F00_000_00_Fcl_HA_Fung2

牙2

39

Face.M_F00_000_00_Fcl_HA_Fung2_Low

牙2(上顎)

40

Face.M_F00_000_00_Fcl_HA_Fung2_Up

牙2(下顎)

41

EyeExtra_01.M_F00_000_00_Fcl_EyeExtra_

ようするに今回は上から13・14・15番目を変更すればいいかなって思います。
(他の項目も応用して目の動きで表情を変化させても面白いかもしれませんね。)
これで完了です。

実際に動かしてみよう

綺麗に動いていますね。
キャラによってはLook At Boneの数値や大元のVRoidで目の動く範囲(上下左右)を調整するのもいいかもしれません。

もしVIVE Pro Eyeのアイトラッキングが動かないエラーになる時→スライダーやLook At Headをチェック

起動中にブレンドシェイプの数値やスライダーの動きを確認しよう

まずは起動中にVRoidモデル>Face>BlendShapeの一覧がきちんと動いているか見てみましょう。
本来なら眼球に合わせてスライダーがピクピク動いているはずです。

ただVRゴーグルを被りつつ同時にPCの画面を見るのは一人では難易度は高いですね…
OBSなどで画面録画をしてチェックするのもおすすめです。

もし狙いとは違う項目が動いている場合は先ほどのEye Shape Targetsの設定がずれている可能性が高いです。

白目のままで動かない場合→VRM Look At Headをいじってみよう

VRM Look At HeadのTargetをいじります。
例えば適当に置いた球(Sphere)に設定します。

するとこのようにVRoidの目線はSphereの方向にきちんと動きますね。
そのまま再生起動中にTargetをSRanipalに戻します。
Animator(自動で動く)はオフ
Blinker(自動まばたき)もオフ(自分で動くので必要ないですね)
にしてみましょう。
これで白目がとりあえず治った感じです。
(この辺まだ試行錯誤中でもあるので訂正するかもしれないです)

起動するたびにゴーグルをズラしてこの作業をするのはわりと大変なので原因を探求中です。
(やっぱSDKのバージョンが上がるの待ちかな)
モデルによっては白目にならない場合もありますね。

VIVE Pro Eyeのアイトラッキングでさらに知っておきたいこと【他ソフトでの利用やクラス一覧】

VIVE Pro Eyeのアイトラッキング以外の項目も設定してVTuberを目指そう

Unity内でVTuberのようにVRoidを動かす全体の流れはこちらの記事でまとめています。
» VTuberの作り方【準備から最後のアップまで10記事以上で解説】

アイトラッキングする機材を持っていなくてもタイムラインで編集すれば目線は動かせます。
ただちょっと労力はかかりますね。
» UnityのTimelineを解説【キャラの表情や動きを5秒で編集可能です】

VIVE Pro Eyeのアイトラッキングのキャリブレーション

アイトラッキングのキャリブレーションとは目の位置をゴーグルの関係の設定です。
VR上での設定画面から進んでいけばできます。
» VIVE Pro Eyeを徹底解説【目を動かすまでの流れ+他機種との比較】

VIVE Pro Eyeのアイトラッキングのデータ

アイトラッキングのデータの数値やパラメータを使って新しくプログラミングしていく場合はSDKの資料にあるクラス一覧が参考になりそうです。
» 参考:Documentation - SRanipal Unity SDK(VIVE公式)

VIVE Pro EyeのアイトラッキングをVRChatで利用する→できそう

VRChatでのアイトラッキングはまだ筆者は挑戦中です。
しっかり理解したら別記事に書きたいです。

VRChatでは2022年2月の更新よりOSC(Open Sound Control)を利用してアバターのパラメータを動かせる仕組みが進化しています。
» 参考:VRChat OSC for Avatars(VR CHAT)

このページの動画を見る限りアイトラッキングの利用もできそうですね。

というわけで今回は以上です。
眼球の動きでUnityの操作ができる…ってだけでいろんなゲームやツールに応用できそうですね。

関連記事VIVEのトラッカーを解説【設定から体への固定方法まで+応用技】

関連記事Unityのリップシンクを解説【口の形を発音ごとに選択します】

このカテゴリーの人気記事

1

VRchat VRoid

VRoidモデルをVRChatでアバターとして追加する方法【アップロード】

2018/10/6  

VRoidモデルをVRChatでアバターとして追加する方法は? ボーンのエラーを消す方法は項目を訂正するだけって本当? アバターの設定の各項目の意味は目の位置や立ち方って本当? こんな疑問に答えます。 ...

2

VR VRchat

VRchatのカメラ機能の使い方を徹底解説【自撮りやタイマー機能】

2018/8/9  

VRchatのカメラのボタンが押せないんだけど? 自撮りモードやフィルターの使い方は? こんな疑問に答えていきます。 2018年8月からHTC ViveでVRChatを利用している僕が、実体験を元に解 ...

3

VRchat

VRchatのシステムメニュー項目一覧とおすすめの設定【表示、音量】

2018/10/2  

名前の表示や、システムの表示を消したい時の設定は? 音量のバランスの設定はどうやるの? こんな疑問に答えていきます。 2018年8月からHTC Viveを利用している僕が、実体験を元に解説していきます ...

-HTC Vive, Unity