VIVE Pro EyeのアイトラッキングをSRanipal SDKでやってみる

この記事は [「Unityゆるふわサマーアドベントカレンダー 2019 #ゆるふわアドカレ」](https://qiita.com/nkjzm/items/7c933bb5c772a0b75512) の8月13日の記事です。昨日は [@dfk_ohnuma](https://twitter.com/dfk_ohnuma) さんの [「【Unity】Unity純正オーディオ機能と波形編集ソフトを組み合わせるだけで色々できるよって話」](http://dfkfuturelab.hatenablog.com/entry/2019/09/03/050218) でした。

# VIVE Pro EyeのアイトラッキングをSRanipal SDKでやってみる

![2019-08-13 00-02-26.mjpg.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/3cde9023-6184-1c5f-9557-6c6dd75fd437.gif)

![2019-08-13 01-53-11.mjpg.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/fb24e248-66d8-9494-0ee5-11ec0a84b748.gif)


もともと別の記事を書く予定でしたが、VIVE Pro Eyeを手に入れたので、前々から気になってたアイトラッキングができるという **SRanipal SDK** を試してみました。



# VIVE Pro Eyeとは

アイトラッキング（眼球の追跡）ができるVRゴーグルです。VIVE Proの後継機に当たります。



# SRanipal SDKとは

ユーザーの目と唇の動きを追跡するためのSDKです。ただし、VIVE Pro Eye単体では、唇の動きには対応していません。

HTC VIVE公式Youtubeチャンネルに上がっている [GDC 2019の動画](https://www.youtube.com/watch?v=lpXdHjzbauU) で確認したところ、 **SRanipal** はどうやら **エスアール アニパル** と読むようです。



# 動作環境

以下の環境で確認しました。

- Windows 10 64-bit
- Unity 2018.4.2f1
- SteamVR 1.6.10
- SRanipal SDK 1.0.0.0



# SRanipal SDK Eyeをダウンロードする

以下からダウンロードすることができます。
[Intro To SRanipal SDK](https://developer.vive.com/resources/knowledgebase/vive-sranipal-sdk/)

指示に従って進めていくと以下のようなページが表示されます。ここで、 **SRanipal_SDK_1.0.1.0_Eye.zip** をダウンロードします。（私はここで間違って **Lip** の方をダウンロードしてしまいましたｗ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/c30ba318-69eb-a20c-c020-abea5d41c75d.png)



# プロジェクトにSDKを導入する

Unityで新規にプロジェクトを作成し、ダウンロードしたZipの中にある `02_Unity\Vive-SRanipal-Unity-Plugin.unitypackage` をインポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/41f45b98-b599-786a-0530-723f866b35d6.png)



**Edit** → **Project Settings** → **Player** → **XR Settings** → **Virtual Reality Supported** をONにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/19291776-1c21-acfd-9e9c-d28643f0ec24.png)





# アイトラッキングのキャリブレーションをする

`Assets\ViveSR\Scenes\EyeSample` を開き、シーンを再生します。

ゴーグルを被ると、以下のようなダイアログが表示されてます。（おそらくキャリブレーションが済んでいない場合のみ）

指示にしたがってキャリブレーションを進めていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/2c16a298-c835-034d-a1eb-7eaed19f7e6f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/1a2320af-be55-7ab7-2456-135ad607a12c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/56ce95b3-bb5d-3be8-1bb7-758fd88314d5.png)

目線を向けた方向の点が青く光りました！無事にキャリブレーションは済んだようです。

**閉じる** を選択すると、以下のような画面になりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/91e73090-e850-9655-137c-98f628c1a1b2.png)

このキャリブレーションは、 **VIVE PRO** という項目からいつでもできるようです。



# サンプルシーンを試す

改めて `Assets\ViveSR\Scenes\EyeSample` を開き、シーンを再生します。

目の前の鏡にハゲたおっさんが表示されます。アイトラッキングが正常に動作しているのがわかると思います。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">SRanipal SDKでおっさんのおめめうごいた。ウィンクもできた。 <a href="https://t.co/amdkOuqZlu">pic.twitter.com/amdkOuqZlu</a></p>&mdash; せぎゅ (@segur_vita) <a href="https://twitter.com/segur_vita/status/1160932039366868992?ref_src=twsrc%5Etfw">August 12, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# 自力でシーンを作ってみる

サンプルシーンと同じような内容のシーンを自力で作ってみます。今度はおっさんではなく女の人のアバターにしてみます。

Unity 2018でプロジェクトを新規作成した場合、 `Assets\Scenes\SampleScene` にシーンファイルがあると思うので、それを開きます。（なければ適当なシーンファイルを作ります。）



# ゲームオブジェクトをシーンに配置する

シーンに以下を追加していきます。

- `Assets\ViveSR\Models\Avatar_Fairy\Avatar_Fairy` を `Main Camera` 直下に設置
- `Assets\ViveSR\Prefabs\SRanipal Framework` をルート直下に設置
- ルート直下に `MirrorCamera` という名前の空のオブジェクトを設置
- `MirrorCamera` 直下に `MirrorRenderer` という名前の `Quad` を設置

`Hierarchy` は以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/11f3c976-3553-e03a-c5ab-8faa9b268e5a.png)



# MirrorCameraを編集する

`MirrorCamera` に `SRanipal_MirrorCameraSample_Eye` というコンポーネントを追加します。

`Camera` コンポーネントも同時に追加されるので、 `Target Texture` に `Assets\ViveSR\Materials\MirrorRenderTexture` をセットします。

`Transform` を以下のようにします。y軸で180°回転させることで、アバターの顔を撮影するようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/043d8af1-398b-37de-9732-3a16751b5b01.png)



# MirrorRendererを編集する

`MirrorRenderer` の `Mesh Renderer` の `Materials` に `Assets\ViveSR\Materials\MirrorMaterial` をセットします。

`Transform` を以下のようにします。 `Scale` の `X` に `-1` を指定することで左右が反転します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/5015143d-ab37-2ab4-89db-f1b88f9d5fe5.png)

これで鏡が完成です！



# Main Cameraを編集する

`Transform` を以下のようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/0025be5e-1a08-875e-9a8b-5cde400cb5ca.png)



# Avatar_Fairyを編集する

`Avatar_Fairy` に `SRanipal_AvatarEyeSample` というコンポーネントを追加します。

`Eyes Models` の `Size` を `2` にして、

- `Element 0` に `Avatar_Fairy/Eye_Left_grp/Eye_Left`
- `Element 1` に `Avatar_Fairy/Eye_Right_grp/Eye_Right` 

を設定します。

`Eye Shape Tables` の `Size` を `1` にして、

-  `Element 0` に `Avatar_Fairy/Head`

を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/8dd491af-9390-a9f1-c93e-47c60a7e5b3a.png)

`Eyebrow Animation Curve Upper` の右側の箱をクリックすると、 `Curve` ダイアログが表示されるので、適当によさげなカーブを描きます。とりあえず、直線にしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/fd1428cd-090e-cb25-dc3a-28ae02058208.png)

 `Eyebrow Animation Curve Lower`  と `Eyebrow Animation Curve Horizontal` も同様にやります。

これで完成です！



# シーンを再生する

シーンを再生してみるとこんな感じになりました！

 ![2019-08-13 01-53-11.mjpg.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/fb24e248-66d8-9494-0ee5-11ec0a84b748.gif)

目の動きがちょっと怖いかもしれない。。。おそらく Eyebrow Animation Curve を調整すれば、もう少しマシにはなるのかなと思います。



# さいごに

なんとかUnity上でアイトラッキングをすることができました。

本記事の作成にあたり、以下を参考にさせていただきました。

- [GDC 2019 - The Future of XR Development: SRWorks SDK + SRanipal SDK](https://www.youtube.com/watch?v=lpXdHjzbauU)
- [Intro To SRanipal SDK](https://developer.vive.com/resources/knowledgebase/vive-sranipal-sdk/)
- [[ViveProEye] SRanipal SDKで取得可能な眼球運動情報](https://qiita.com/gatosyocora/items/ad46c4e1ee871a1be5c6)
- [VRMモデルの視線制御（目の可動範囲）の設定方法](https://qiita.com/OGOG_Ogura/items/46a1f82553c5f6501636)

[「Unityゆるふわサマーアドベントカレンダー 2019」](https://qiita.com/nkjzm/items/7c933bb5c772a0b75512) 14日目の担当は @Yuki_Homma さんによる [「AR/VR表現のエフェクトの探し方、あるいは表現集」](https://note.mu/y__homm/n/nbdb6954b38d3) です。