「Unity上でカメラを複数台追加してHMDやコントローラの動きを見る」【初心者】HTC VIVE Pro Eyeを使ってUnityでVRの開発を行ってみる．

#はじめに

デバックや実験をする際に，外部から監視したり，様子を記録するためにカメラを複数台にしたくて色々調べたのでメモします．


環境一覧
[SteamVR](https://store.steampowered.com/app/250820/SteamVR/?l=japanese) 1.16.10
[Unity](https://unity3d.com/jp/get-unity/download) 2019.4.27f1 or 2020.1.17f1（動作確認済み，非対応なSDKあり）

[SteamVR Plugin](https://assetstore.unity.com/packages/tools/integration/steamvr-plugin-32647) 2.7.3
[Vive SRanipalRuntime Plugin](https://hub.vive.com/en-US/download) 1.3.2.0


追加アクセサリー
[VIVEトラッカー2018](https://www.amazon.co.jp/dp/B0748ZY323/ref=cm_sw_r_tw_dp_QDZSM4A3844PSM33DB3R?_encoding=UTF8&psc=1)
[Ovrvision Pro（ステレオカメラ）](https://www.amazon.co.jp/dp/B01N7H8YUM/ref=cm_sw_em_r_mt_dp_6TGRDF5BWQPW2PJ1H4WN)
[Leap Motion](https://www.amazon.co.jp/Leap-Motion-Controller/dp/B075T4MH77/ref=asc_df_B075T4MH77/?tag=jpgo-22&linkCode=df0&hvadid=342463500927&hvpos=&hvnetw=g&hvrand=13721783060484696807&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009320&hvtargid=pla-945077929421&psc=1)


使用PCスペック
インテル® Core™ i7-7700K
NVIDIA GeForce GTX 1070

- **環境作成編**

 #1 [Unityのセットアップをする](https://qiita.com/RyoyaHase/items/5a173b7acbdf9aa2cfff)　2021年 1月更新

 #2 [プロジェクトを作ってみる](https://qiita.com/RyoyaHase/items/7b2148e9034584db7420)　2021年 1月更新

 #3-α [Unity2019でVR開発のための環境を整える（SteamVR Plugin2.7.Xをインストールする）：推奨](https://qiita.com/RyoyaHase/items/36910ec8a0b3d8122f8c)　2021年 6月更新

 #3-β [Unity2020でVR開発のための環境を整える（SteamVR Plugin2.7.Xをインストールする）](https://qiita.com/RyoyaHase/items/b7b5f8a7110810c1c0f1)　2021年 5月更新

 #3-おまけ [UnityでVR開発のための環境を整える（SteamVR Pluginの最新版をインストールする）：非推奨](https://qiita.com/RyoyaHase/items/f8b4fb5b04d9f02aae49)　2021年 2月更新

 #4 [SteamVRのダウングレードと自動アップデートの停止（上級者向け）](https://qiita.com/RyoyaHase/items/0dab278b080f517032a0)　2021年 5月更新


- **コントローラの入力やトラッカー，HMDの位置座標，回転座標を得る＋α**

 #5 [VIVEコントローラのボタン入力を取得する](https://qiita.com/RyoyaHase/items/89ffc9d134b784b8ae50)　2021年 2月更新

 #6 [トリガーの押し具合やトラックパッドの位置情報の入力を取得する](https://qiita.com/RyoyaHase/items/81fa026f68aee02fa5d4)　2021年 2月更新

 #6-おまけ [VIVEコントローラを使った開発をする時のおすすめ設定（独断と偏見）](https://qiita.com/RyoyaHase/items/d622e1bb0e345cf78f4f)　2021年 5月更新

 #7 [ヘッドマウントディスプレイとコントローラの位置座標と回転を取得する](https://qiita.com/RyoyaHase/items/325e7250c01f47e7e63b)　2021年 2月更新

 #8 [VIVEトラッカー2018を有効化してUnity上で位置座標と回転を取得](https://qiita.com/RyoyaHase/items/015bbb8671833ef8e740)　2021年 5月更新

 #9 [VIVEコントローラの振動機能を開発してみる](https://qiita.com/RyoyaHase/items/0690761fed2e71f6d517)　2021年 4月更新


- **VIVE Pro Eyeのアイトラッキングを使ってみる**

 #10 [VIVE Pro Eyeの視線トラッキングを有効化（セットアップ）する](https://qiita.com/RyoyaHase/items/024f3589547d1af84a92)　2021年 4月更新

 #11 [VIVE Pro Eyeのアイトラッキングを使ってUnity上で瞬きや視線のデータを取得する](https://qiita.com/RyoyaHase/items/5af948666a039d48a68d)　2021年 4月更新

 #11-おまけ [VIVE Pro Eyeのアイトラッキングで計測できるデータについて（適宜更新）](https://qiita.com/RyoyaHase/items/044826488e763f896a0f)　2021年 4月更新


- **VIVE Pro Eyeのカメラを使ってみる**

 #12 [VIVE Pro Eyeのフロントカメラの解像度（性能）とAR機能を有効化について](https://qiita.com/RyoyaHase/items/853938ec7c8745ec811c)　2021年 5月更新


- **小技**

 [プレイエリアの境界線（シャペロン境界）が表示されないように設定を変更する](https://qiita.com/RyoyaHase/items/57296d7753877afc6f34)　2021年 6月更新

 [__Unity上でカメラを複数台追加してHMDやコントローラの動きを見る（この記事）__](https://qiita.com/RyoyaHase/items/4b4733503d53c8387db4)　2021年 6月更新


- **Ovrvision Pro（ステレオカメラ）を使ってAR開発してみる**

 ＄1-1 [Ovrvision Pro（ステレオカメラ）のセットアップをして実際に動かしてみる](https://qiita.com/RyoyaHase/items/262ad2133ee89d00b3cb)　2021年 6月更新

 ＄1-2 [Ovrvision Pro（ステレオカメラ）とHMDを使ってARアプリ開発する](https://qiita.com/RyoyaHase/items/4abcd90f0f2319c89114)　2021年 6月更新

- **Leap Motionを使ってハンドトラッキングしてみる**

 ＄2-1 [Leap Motion（ハンドトラッキング）のセットアップをして実際に動かしてみる](https://qiita.com/RyoyaHase/items/6891c21c8c21dcb08b2f)　2021年 6月更新

 ＄2-2 [Leap Motion（ハンドトラッキング）とHMDを使ったインタラクティブなアプリ開発する](https://qiita.com/RyoyaHase/items/b0f6cd1d7474286f99ed)　2021年 6月更新

- **アプリを作ってみる**

  [VR（仮想空間）上に曲面ディスプレイを作成して大画面で広角WEBカメラ映像を見る](https://qiita.com/RyoyaHase/items/cc57e67799c1b14ef15d)　2021年 5月更新


今回の記事では，

1．固定カメラを追加する．
2．VR用のカメラを追加する．
3．HMDのモデルを追加して観測用カメラのみが映るようにする．

という流れ．

#1．固定カメラを追加する．

VR用に設定されたプロジェクトを開き，SteamVRの[CameraRig]を追加します．
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/47241da9-ac75-9b57-0095-81bcb7ef667e.png)

[CameraRig]内のカメラを選択し，タグを"MainCamera"に設定しておきます．
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/cb09716a-b269-8d3f-6433-244dd929cda6.png)

描画先がDisplay1のBothになっているか確認しておきます．
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/61a885ef-6d1e-3f45-0f39-8ebf39d4bbca.png)

この状態だと実行してもGameタブにはHMDの左目の画面しか出ないので右クリックから普通の"Camera"を追加します．
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/1bde4644-de6e-8efc-6b1d-cb6693bd86c2.png)

名前をわかりやすく"Camera(2)"とかにしておきます．
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/3c354644-3abd-d9e4-f4e7-01b9ecd5dec2.png)

次にCamera(2)のDepthを1にします．Depthは描画される位置の設定です．
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/cb1275df-d6e5-0806-005a-645d2e3d33f9.png)

しかし，このままだとHMDにCamera(2)の内容が表示されてしまうので，描画先をDisplay1のNone(Main Display)にすることでUnity上でのみ描画するようにします．
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/732293da-86b0-27ab-41a5-e07421d82386.png)

SceneタブからGameタブに切り替えて，Camera(2)のViewport Rect（描画範囲）を変更します．この辺の設定はGameタブで確認しながらお好みで設定してください．
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/88e21252-1af9-57e2-a305-165c1cfeff1c.png)

今回はVRのコントローラとHMDを見たいのでキャリブレーションした位置の若干後ろにカメラを移動しておきます．
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/900d0c33-097b-8230-c5f4-4c7fda5b92e7.png)

音声用のコンポーネントは1つにしか付けられないのでCamera(2)のコンポーネントは消しておきます．
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/a47358ba-7186-a0fc-eb41-486b909023d5.png)

全部設定し終わるとこんな感じです．
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/a8ca889c-fd28-1901-13e4-9c41dd5cb383.png)

実行すると右上のカメラに後ろから見ている視点のカメラが追加されました．
![12.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/8d6d8f57-cfcc-8e69-99e1-43b9ffbe8a21.gif)

とりあえう画面右下にもCamera(3)を追加しておきます．
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/82ab325d-7e8d-632e-96de-0e15fa64bc2e.png)

#2．VR用のカメラを追加する．

今の設定だとVR画面の左側しか表示されず，違和感がある映像になってしまっているので左側に表示するVRカメラを追加します．
先ほど同様Camera(4)を作成し，[CameraRig]内のCameraの子オブジェクトに設定します．
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/f643e579-7624-e18c-06ed-f7946aff3c4c.png)

カメラのPositionは0,0,0に設定し，カメラの描画サイズとターゲットはNoneにしておきます．
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/12394e3a-7907-0358-d3c8-6c0094096109.png)

#3．HMDのモデルを追加して観測用カメラのみが映るようにする．

[CameraRig]内のCameraに，Controller内にあるModelオブジェクトコピーして子オブジェクトに入れます．
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/0a6c9063-2154-6ca0-dccc-7f94f1834c40.png)

Modelを選択し，Layerタブを開いてAdd Layerを選択します．
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/bc75dc8b-6be4-7a4c-b4c7-60430fd9a03a.png)

今回はLayer10に新しくMaskというレイヤーを作成します．
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/6cc70f7d-9ec8-8a55-8ab1-e6eb9a150499.png)

Modelを選択し直して，Layerタブから先ほど作成したMaskを割り当てます．
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/6d39d7d8-bd03-44e7-7dae-738a2c59fb5f.png)

ModelのIndexをHmdに設定しておきます．
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/801a4330-a158-ba94-16bc-c3f1a8df9481.png)

[CameraRig]内のCameraのCulling Mask（描画するレイヤー）を開き，Maskのチェックを外します．これでHMDのモデルがこのカメラには描画されません．
（Maskをつけたまま実行するとHMDの3Dモデルが目の前に描画されて真っ暗な画面になっちゃいます．）
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/66f6e521-e24e-4659-a62a-dfcb93c2ffef.png)

同様にCamera(4)のCulling Mask（描画するレイヤー）を開き，Maskのチェックを外します．
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/e289e998-d82f-047b-5966-8c13e7ad6e18.png)

Camera(4)はそのままだと通常のカメラと同じ画角になっているので，Field of viewをVR用の視点と同じ60に設定する．
![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/49e0109f-a133-11c1-5dcf-9d1c9c52e3d2.png)

描画される範囲の最短距離であるNearも0.01と短めにしておく．
![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/58a75e86-fe36-66e0-3d82-42e2b5c7d208.png)

最終的な各カメラのパラメータはこんな感じ
Camera(2)
![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/4ff0f6cd-3a47-f602-57ea-bbcbed957568.png)

Camera(3)は上からの視点にしています．
![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/e01ad557-c391-6881-f527-6131080fad5a.png)

Camera(4)
![27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/4aa2855c-7e46-394b-f314-5230c36d90c9.png)

実行する際には，GameタブのMaxmize On Playにすると画面上に広く描画されるのでつけとくといいです．重くなる場合には外してください．
![28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/0ccbf3d3-9313-009e-ef6e-ee5382c9cbd8.png)

実際に動かすとこんな感じです．
実際の目線やHMDの動き等を見ることができます．
![31.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/803463f9-7983-2d98-c506-420756d65a9c.gif)