「VR（仮想空間）上に曲面ディスプレイを作成して大画面で広角カメラ映像を見る」【ヘッドマウントディスプレイとUnityでVRとかARの開発をやってみる．】

#はじめに

Unityでモノづくりをする上で欠かせないもの...3Dオブジェクト...

普通にゲームを作る分には配布データが大量に出回っていますがXR開発用のものはまだまだ数や種類が少ないため簡単なオブジェクトを作っていきます．

やはり湾曲ディスプレイは首を動かすことで臨場感を感じられるのでVR上で超巨大ディスプレイを作りたいなと思い立ったはいいが何も知識がなかったので0からメモしていきます．
初心者なので非効率な部分や雑な部分も多いですがご容赦ください．



環境一覧
[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．Blenderでプロジェクトを作成する．
2．ベジエ曲線から曲面ディスプレイを作成していく．
3．UVエディターでテクスチャ（映像描画をする場所）を設定する．
4．実際にUnity上で動かして確認してみる．

という流れ．

#1．Blenderでプロジェクトを作成する．

ゲーム作成の強き味方であるオープンソースの統合型3DCGソフトウェア[Blender](https://blender.jp/)を今回は使用します．
まずは公式サイトからダウンロードしてインストールしてください．

[Blender.jp](https://blender.jp/)←ここから

この記事で使用しているのは2.91.2です．

起動すると何を作るか聞かれるのでとりあえず「全般」を選びます．
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/d1a601d9-af09-7ab2-4c0e-396af9e5ac7e.png)

唐突に箱が目の前に現れます．
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/fe1b69f9-6018-0919-606e-f1c4fa33de55.png)

とりあえず今回は選択して右クリックからかDeleteボタンで削除しちゃいます．
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/0cc70806-f915-e6bf-5ef4-cfd94b64ceb1.png)

これで作り次始める準備は完了です．初期設定などは特にいじらなくても簡単なものは作れますのでここまでは比較的優しいです．

#2．ベジエ曲線から曲面ディスプレイを作成していく．

今回は巨大曲面ディスプレイを作りたいので骨組みとなるベジエ曲線を追加します．
Blenderの画面上にカーソルを置いて「Shift+A」で追加のタブを開けるのでカーブのベジエを選びます．
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/f77aff9b-0ff0-dedb-ce84-102da00ee49e.png)

するとなんとも弱々しい感じの線が出てきます．
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/de6fbcc1-558a-bcea-1456-f29b63a0f1ef.png)

ベジエカーブを選択状態にした状態でビュー画面右上のしまわれているタブを開きます．
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/67a08f1c-df1b-0c3e-f6a1-4b2c46d76644.png)

するとトランスフォームというパラメータ調整画面が出てきます．
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/1626d385-3ac0-9da0-0a05-3265c8c57a37.png)

まずは大きさを変更し，押し出しがしやすいように位置を上にあげます．
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/ba1dcf5e-1272-1ab5-f2e0-bbe1b7d59948.png)

大きさを変更したら左上のタブから編集モードに切り替えます．
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/2aa5fc06-0892-6227-6e95-b5da643d080a.png)

編集モードにするとベジエそのもののサイズから曲線の設定に変わります．
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/e3f4be84-1013-6e3c-ded2-ced7254cb8b9.png)
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/87624b9c-b05d-124c-da75-dd18be754dca.png)

今回は線そのものではなく直線の位置を変えることで歪みをきれいに出すので頂点を選択して位置を整えていきます．
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/007599f3-0b62-be35-1daf-eef82e524b8c.png)

ベジエカーブの2つの線を同じ角度で置くときれいな曲線ができます．
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/99fc3999-aaf9-ec2f-4c83-90b9cf966c95.png)

左上のタブからオブジェクトモードに戻し，ベジエを選択した状態で右クリックをしてメッシュに変換します．
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/bfa663a8-8ab3-880f-2d1f-6dbe1a8a6f27.png)

再び編集モードに戻すと点と線のデータに変換されています．
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/5b44b4e1-cf1f-7641-8b03-4bce169ef8c7.png)

範囲選択ですべての点を同時に選択した状態で編集モードの状態で左側に表示される押し出しを選択します．
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/b22e4bca-3e6b-3046-bf12-2f6b7bf8a293.png)

押し出しを選択すると上にどのように押し出すか選択できるのでXYZモードに切り替えます．
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/6172b62e-690e-ad29-abdb-5587fa39f921.png)

まずはモニターの大きさを出します．
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/dfe8141d-27af-9aef-3b96-b89dbd3dd3dd.png)

ペラッペラだとモニターっぽさがなくなるので先ほど同様点をすべて選択して厚みを出しておきます．
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/5f271917-f31c-d4e9-1279-ae957fb5c6e8.png)

こんな感じのものが完成しました．一応大きさはトランスフォームから変更できます．
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/ad3b6e25-257f-0fe1-2a2f-61599b34accf.png)

#3．UVエディターでテクスチャ（映像描画をする場所）を設定する．

テクスチャを張りたい範囲を囲むように頂点を選択するか，モード切替タブの右に選択方法切り替えがあるので囲むように辺を選択をする．
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/81c5e121-cfd3-fb4e-d7dd-ea3b61e2143d.png)

選択した状態で右クリックをしてシームをマークを選択する．
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/a6f73a2f-8fe1-4517-9cfd-718af0c15010.png)

シームとは切り込みのことで，赤い線でマークがつきUV展開するのが楽になります．
問題なくシームが入っていればモード切替タブの右に選択方法切り替えがあるので囲テクスチャを貼る面を選択する．
![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/237aeeae-ac3a-06a7-501a-be3e85326610.png)

"U"キーか右クリックの面をUV展開から「展開」を選択します．
![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/dab87a99-54eb-b32f-2fac-8be0e8d60efd.png)

このままでも編集できますが分かりやすいように画面左上をつまんで右にスライドして2画面に分割します．
![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/5c60f81b-f1ef-4ed7-70d1-23456426fe31.png)

こんな感じで分割されます．
![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/ca75c0bb-6a2d-0b80-6949-fba341d79986.png)

左側の画面をモード切替からUVエディターに変更します．
![27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/8eef3e99-0a64-ab10-f2fd-c40015dd9114.png)

すると先ほど展開したUVがオブジェクトの頂点と辺に合わせて表示されます．![39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/405d828f-265d-8367-c896-22a95660e58a.png)

基本綺麗にいきませんがシームをマークするとだいぶましになります．
![28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/265ef872-20a3-06f5-055d-88eb7b4ea24e.png)

頂点を選択して右上の隠れたタブから座標を数値で見れるので綺麗にUVを調整していきます．（この作業が地獄）
![29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/aed81872-6fe8-927c-2194-07ffcb1361b1.png)

こんな感じで隙間なく綺麗に調整し直します．
![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/a522dc2f-5988-0dc0-1e86-e0cac550cc8f.png)

あとは出力するだけなのでファイルからエクスポートの「FBX」形式を選びます．
![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/8082e0fc-a218-f96d-6c57-aa79ea5c25ca.png)

出力の設定としては「エンプティ」「アーマチュア」「メッシュ」「その他」を選択します．
![32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/37492952-cf87-bb28-5a69-c7da69f328a5.png)

もしサイズ感が違ったりした場合にはトランスフォームからサイズの調整はできます．メッシュ貼り直すのは地獄なのでワンチャン調整できます．
![33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/6f974475-55b0-a639-dd69-e2da91ef3875.png)

サイズを変えてもテクスチャは歪まないです．（場合によっては歪むので頑張って再設定してください）
![35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/4a96b30c-ea06-8097-6ce3-9396f1f747fb.png)

#4．実際にUnity上で動かして確認してみる．
とりあえず作ったオブジェクトをUnityプロジェクト上から見えるところに追加しておきます．
![36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/1d7b6c5d-1dc2-87be-215b-aa59a626bedc.png)

VR用のカメラを設定したうえでオブジェクトを追加します．
![37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/b940a9ea-d21d-3efb-4baa-7135203f3d0d.png)

正面に来るように位置を調整しておきます．
![38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/74d9e5b2-bd4a-fd3e-832d-c92d768b5c6e.png)

正面から見るとこんな感じ．
![39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/8b7a998e-6bbb-aac8-cf90-77f2bd2476a0.png)

歪みに影ができると綺麗に映像が映らないのでPointライトを等間隔に4つほど設置します．
![40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/dc399e45-e760-72ac-f5e5-ec17ebde65d6.png)

最後にいつもどおりC#スクリプトを作成してこの湾曲ディスプレイに落とし込みます．

こんかいはとりあえずWebCameraTestというスクリプトを作成します．

```C#:WebCameraTest.cs
using UnityEngine;
using UnityEngine.UI;

public class WebCameraTest: MonoBehaviour
{

    void Start()
    {  
        //PCに接続されているカメラデバイスをすべて配列に格納
        WebCamDevice[] devices = WebCamTexture.devices;

        //1台以上検知されれば処理，されなければebカメラが検出できません！とログに出す
        if (devices.Length > 0)
        {
            //配列に格納されたデバイスから使いたいカメラを選択する，devices[数字].nameとなっているが動かなければ数字を変えてみる．
            WebCamTexture myWebCameTexture = new WebCamTexture(devices[0].name);
            //どのゲームオブジェクトのテクスチャに貼るかを選択，今回造ったオブジェクトはcurvedという名前なのでcurved
            GameObject curved = GameObject.Find("curved");
            //テクスチャへの描画処理，オブジェクト名.GetComponent
            curved.GetComponent<Renderer>().material.mainTexture = myWebCameTexture;
            myWebCameTexture.Play();
        }
        else
        {
            //エラーログ
            Debug.LogError("Webカメラが検出できません！");
        }
    }
}
```

実際に動かすとこんな感じ．部屋が汚いのは許してください...
ここに前回の視線計測システムをいれるとVR上でもしっかりとどこを見ていたのかを記録できますし，瞳孔などのデータをとれば動眼反射なんかも計測できるので色々と使えそうではあります．
![41.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/e4268046-390d-43e5-d4c9-647cc7c0de02.gif)