【Unity】VRで立体視360画像を見る

# はじめに
こんにちは。[UT-virtual Advent Calendar 2019](https://qiita.com/advent-calendar/2019/ut-virtual) 、19日目担当のwappaboyです。
[Insta360Pro](https://hacosco.com/insta360-pro2/)などの全天球カメラで撮影した**立体視360静止画**をVRで見られるようにUnityで実装する方法を紹介します。

2019年4月に、サークルの新歓活動のために開発した「新歓VR」のプロジェクトを掘り起こして説明します。

#使用したもの
- Unity *2018.3.6f1*
- OculusGo
- Insta360 Pro で撮影した両眼立体視の全天球静止画

こんな感じの、上下で右眼用と左眼用に分かれている1:1の画像が用意できていると良いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201396/97712370-bd7e-9852-c2da-0c172df10e27.png)

撮影時の設定にもよりますが、私が使用したオリジナル画像は 7680x7680 pixel でした。
Unity（OculusGo）で快適に動作するよう、Photoshop等の画像編集ソフトで **2048x1024 のサイズに上下を切り分けました**。
上半分が右眼、下半分が左眼です。


# 準備
実装を始めるにあたって、諸々必要な設定を行ってください。
UnityにおけるVR開発や、OculusGoのビルドに際しての設定は省略します。[他の記事](https://framesynthesis.jp/tech/unity/oculusquest/)を参考にしてください。

## 必要なアセットのダウンロード
- Oculus Integration (https://assetstore.unity.com/packages/tools/integration/oculus-integration-82022)
- 全天球画像を貼り付けるためのSphere
    - warapuriさんの**Sphere100**を使用すると安定します。[こちらの記事](https://warapuri.com/post/131599525953/unity%E3%81%A8oculus%E3%81%A7360%E5%BA%A6%E3%83%91%E3%83%8E%E3%83%A9%E3%83%9E%E5%85%A8%E5%A4%A9%E5%91%A8%E5%8B%95%E7%94%BB%E3%82%92%E8%A6%8B%E3%82%8B%E6%96%B9%E6%B3%95%E7%84%A1%E6%96%99%E7%B7%A8)からありがたく頂戴します。記事内の「**Sphere100.fbx**」をダウンロードしてUnityプロジェクト内に入れてください。

# 両眼用の天球の作成
まず、新しいMaterial `Left` `Right` を作ります。
それぞれのShaderを `Unlit/Texture` に変更し、先ほど作成した全天球立体視の分割画像をそれぞれアタッチします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201396/9663164b-7af7-04f2-b9b0-93606ae7891a.png)

続いて、Sphere100をScene上に配置し、名前を `LeftSphere` 等にします。
MeshRendererのMaterialに先ほど作成した `Left` をアタッチします。するとこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201396/35ccd48e-7161-fd66-3eb2-f1941b28c0bc.png)

そして**LeftSphereのLayerを `Left` にします**。デフォルトではLeftレイヤーはないと思うので、**Add Layer...** から追加します。
このレイヤー設定をすることで、後のカメラ設定と合わせて両眼立体視で見られるようになるので、忘れないように！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201396/47b9f365-9a47-56b5-54a2-cf4b7cde27ad.png)

**RightSphere**も同様に作成し、`Right`Materialをアタッチ、Rightレイヤーを新しく作成して設定します。
LeftSphereとRightSphereは全く同じ位置に配置してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201396/c058da31-69cb-1dc7-2351-1cad8d9f3e1b.png)

# カメラの設定
続いてカメラの設定です。
まずOculus Integrationから `OVRCameraRig`をSceneに配置します。その他Oculus開発に関する説明は省略します。
`OVRCameraRig` > `TrackingSpace` 配下に **`Camera_L`** と **`Camera_R`** を作成しましょう。
そしてそれぞれについて以下の設定をします。

- Camera_L
    - Clear Flagsを `Depth only` に
    - Culling Maskを `Left` のみにチェック
    - Target Eyeを `Left` に

- Camera_R
    - Clear Flagsを `Depth only` に
    - Culling Maskを `Right` のみにチェック
    - Target Eyeを `Right` に

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201396/0cef5fc1-d3ae-c622-daea-8180c1136cab.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201396/050e6111-e412-a9e6-6765-0b413d78c89e.png)

これで、実際にヘッドマウントディスプレイで見ると右眼と左眼で異なる画像が描画されるので、立体視として全天球画像が見られると思います。
同様の方法で、3Dの全天球動画も実装できます。Unityでの動画再生自体はまた別の設定が必要ですがそこはよしなに...

# 最後に
今回の仕組みは東大VRサークル [UT-virtual](http://utvirtual.tech/)の新歓VRのために実装したのですが、完成品では立体視全天球画像を単に置くだけでなく、Shaderをいじってオシャレなフェードインをさせるなど随分と面倒な仕組みを追加していました。
こんな感じのものも作れちゃうUnityすごいですね。

![welcomeVR2019.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201396/c1fede1d-867c-5cb7-ad4c-9158a040bcbf.gif)


読んでくださりありがとうございました。