【空間再現ディスプレイ】SONY ELF-SR1にUnityのPost Processingどこまで効くか試してみた



## 背景

通学プログラミングコース（愛称プロクラ）でメンターをやってます。
なんと、本日から梅田担当から代々木担当に変わりました。
（公開される頃には絶賛引越し作業中）

半分宣伝ですが、通学プログラミングコースには[空間再現ディスプレイ SONY ELF-SR1](https://www.sony.jp/spatial-reality-display/products/ELF-SR1/)があります。
（[プロクラ公式Twitter](https://twitter.com/procla_official/status/1589429090700103680?s=20&t=hKFKtV3OAC5Q3moZS8xtrA)でも以前取り上げました）
こちらとハンドトラッキングデバイスの[LeapMotion](https://www.ultraleap.com/product/leap-motion-controller/)を用いてゲームを作成しました。
クラゲの方向を制御して泳がせ、スコアを競うゲームです。
（梅田キャンパスで実際に遊べます）
![game_7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/0fbceca0-e4a1-15df-2d67-ac79baf688e8.gif)

ゲーム作成の際にUnityの便利機能であるPost Processingを使ってみたので、検証した内容を書き連ねていきたいと思います。

Post Processingとは、現実のディスプレイ等に描画する前の画像へ処理を行うことで、最終的に見栄えを良くする機能です。
ELF-SR1では左右の目それぞれに対応した4K映像をレンダリングするため、そのそれぞれにエフェクトをかけていきます。

## 環境
```
Unity: 2019.4.31f1
LeapMotion Core Version: 4.5.1
SRDisplay Unity Plugin: 1.2.0
Post-Processing Stack v2： 3.1.1
```
~~ワンチャンVRChatワールドとしてそのまま持っていけないかとこのバージョンでやってました~~

## 前提

* 今回掲載する画像はGameViewをそのまま撮影しているため、両目の視界がまとめて描画されています

:::note warn
両目で見た時の視差がズレとして描画されてしまいますが、直感的に分かりやすいためです
（「おまけ」で後述）物理カメラでも撮れるのですが、条件を変えずに自然な状態を撮影するのは難しいと判断しました
両目で見て不自然になってしまうエフェクトに関してはテキストで言及しているのでご了承ください
:::

* SRDisplayの基本的な使い方はわかっている
    * 参考：https://www.sony.net/Products/Developer-Spatial-Reality-display/jp/develop/Unity/HelloCubeApp.html

* Post Processingの基本的な使い方はわかっている
    * 参考：https://styly.cc/ja/tips/unity_postprocessing_master/

:::note
LeapMotionの基本的な使い方は[こちら](https://tks2.co.jp/2020/01/22/unity-leapmotion/)
:::

## ELF-SR1でのPost Processingの掛け方
通常はMainCameraに**Post Process Layerコンポーネント**を追加することで設定できますが、
ELF-SR1の場合は**LeftEyeCamera**と**RightEyeCamera**の両方に追加する必要があります。

今回検証していくのは、この両目それぞれに対応するカメラに同じエフェクトをかけて立体感を維持したまま描画できるかという点になります。

## 検証点

### エフェクトなしの見た目

![normal.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/7581291b-874c-3211-a3c5-13b8eadb94ac.jpeg)

![normal2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/582868c0-9a99-5510-be07-13d127c1f206.jpeg)

真ん中の3Dモデルはゲームでも使用した自作のミズクラゲちゃんです。

### Ambient Occlusion（環境遮蔽）
オブジェクトの縁などに影を描画して現実感を出すエフェクトです。
大きく分けて、Scalable Ambient ObscuranceとMulti Scale Volumetric Obscuranceno
2種類があります。
[こちら](https://ekulabo.com/whats-ambient-occlusion)が参考になりました。

```
Scalable Ambient Obscurance
Intensity: 1.5
```
![ambient_scalable.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/d28db947-a8e9-1a04-f039-c75b3bbb24a2.jpeg)

違いが分かりにくいですが、オブジェクト周辺部が暗くなっています。
両目で見た時にも違和感はありません。


```
Multi Scale Volumetric Obscurance
Intensity: 1.5
```
![ambient_multiscale.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/8dff99fc-5344-0e35-3d11-071dcea7a98f.jpeg)

オブジェクトに縞模様が浮かんでしまっています。
両目で見た時にも見づらくなってしまいました。

### Auto Exposure（自動露出）
カメラにも良くあるやつですが、シーン内の明るさを判断して自動的に露出を変更するエフェクトです。
暗順応や明順応のような表現が可能です。
[こちら](https://ekulabo.com/whats-auto-exposure)が参考になりました。
```
Filtering: 10~60(%)
Minimum: -9→9(EV)
Maximum: 9(EV)
```
![auto_exposure.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/3809871e-b2de-6893-5df5-afbae01ae10f.gif)

ちゃんと明るさの調節ができています。

### Bloom
光源から出た光をネオンのように他のオブジェクトに映り込ませて強調するエフェクトです。
[こちら](https://ekulabo.com/fun-bloom)が参考になりました。
```
Intensity: 6
Color: R250/G247/B41
```
![bloom.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/cd23a13a-c10e-161e-20a0-430e64663e0b.jpeg)

他のエフェクトをかけていないので明るくなり過ぎていますが、Bloomの効果はきちんと適用されています。

### Chromatic Aberration（色収差）
光学レンズで波長ごとに光が分離してできる色収差のエフェクトです。
[こちら](https://ekulabo.com/whats-chromatic-aberration)が参考になりました。
```
Intensity: 0.8
FastMode: On
```
![chromatic_aberration.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/eb292ee4-5a26-5688-e349-01b9d8dc8ee7.jpeg)

立体視で見ると不思議な感じ。
床とオブジェクトの縁が干渉して変になる部分はありましたが、総じて綺麗に見えました。

### Color Grading（色調補正）
色の補正をしたり、色を付け加えたりするエフェクトです。
[こちら](https://ekulabo.com/color-grading)が参考になりました。
```
Mode: High Definition Range
Post-Exposure: 1.5(EV)
Color Filter: R60/G60/B120
```
![color_grading.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/dce5fdde-217f-fa17-b3c4-6d1dd0f2dfdb.jpeg)

これは通常の使用感と同じです。
Bloomと併せて最も使いやすいと思います。

### Depth of Field（被写界深度）
光源から出た光が他のオブジェクトに映り込んでいるように見せて強調するエフェクトです。
[こちら](https://ekulabo.com/depth-of-field)が参考になりました。
```
FocusDistance: 10
Aperture: 5.6
FocalLength: 30
```

![depth_of_field2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/8601606d-a311-3ac6-bd78-24d340277beb.jpeg)

![depth_of_field.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/ddef297c-32bf-970a-5692-4543988ef171.jpeg)

分かりにくいですが、真ん中のクラゲは近いためボケが少なく、両隣の立方体や円柱はボケが出ています。
ただし、もっと遠距離にある平面と被る領域のせいで、色収差と同様に床とオブジェクトの縁が干渉しています。
ボケている部分とそうでない部分の境目が明瞭になってしまうので、細かな調整が必要そうです。
あまり遠近差を大きくしすぎず使うか、全体的にボケ感をつけるのには有用だと思います。

### Grain
フィルムカメラのようなザラザラした粒子感を出すエフェクトです。
[こちら](https://ekulabo.com/whats-grain)が参考になりました。
```
Colored: On
Intensity: 0.5
Size: 2
```
![grain.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/58d4e8ba-a942-a8a2-66e3-0a62183711ad.jpeg)

画像からは分かりにくいですが、きちんとザラザラした見た目になっています。
ただし、立体的な表現をしているわけではないので、カメラのファインダー越しのような感覚です。

### LensDistortion（レンズ歪み）
魚眼レンズや広角レンズのような歪みを再現できるエフェクトです。
[こちら](https://ekulabo.com/whats-lens-distortion)が参考になりました。
```
Intensity: 60
```
![lens_distortion_60.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/7c7aa357-309b-d4c8-026d-c1f86686c6f3.jpeg)

魚眼レンズのような見た目になります。
立体感がありつつ、歪んでいる不思議な感覚です。
両目で見ても破綻はしていませんでした。

```
Intensity: -60
```
![lens_distortion_-60.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/7d03fdc2-cc0d-7e2b-4062-bc69b3054d77.jpeg)

広角レンズを通してみたように画角が広くなりました。
概ねそれっぽくは見えますが、こちらは両目で見るとオブジェクトの画面端寄りの縁がずれてしまっています。

同じエフェクトでも差が出てしまうのは、値の大小の問題なのか、広角側の特性なのか、まだまだ検証が必要そうです。

### Motion Blur
動いている部分にブラーを付与するエフェクト。スピード感など表現する際に使用されるエフェクト。
[こちら](https://ekulabo.com/whats-motion-blur)が参考になりました。
```
特に設定なし
```
![motion_blur.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/cfaaa85e-ea51-7860-b4b0-5186ab6870c5.gif)

視点移動もBlurの対象になるらしく、ポケモンバトルが始まりそうな感じになりました。
これは流石に使え無さそうです。

### Screen Space Reflection
リアルタイムで物体の「反射」を表現できるエフェクトです。
レンダリングの設定はDeferredRenderingにしなければいけません。
[こちら](https://ekulabo.com/whats-screen-space-reflections)が参考になりました。
```
Preset: medium

（床のマテリアル）
Metalic: 0.8
Smoothness: 1.0
```
![screen_space_reflection.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/111e9a31-9937-a814-56b8-aaf0e14bef88.jpeg)

この機能の検証時のみ、床のマテリアル設定を変えています。
しかし、残念ながら物体の反射は確認できず……。
Rendering設定を見直す必要がありそうです。

### Vignette
画面の端を暗くしてレトロな雰囲気や臨場感を出すエフェクトです。
[こちら](https://ekulabo.com/whats-vignette)が参考になりました。
```
Mode: Classic
Intensity: 0.6
```
![vignette.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2169385/b2300bfe-4905-ee43-fb9f-765d0022eb78.jpeg)

正面から見る分には、４隅がぼんやり暗くなるだけなので問題なく映ります。
ただし、斜めから見るとバランスが悪くなってしまい、違和感が生じます。

## おわりに

さて、箇条書きの形となりますが、今回の検証結果は以上になります。

結果的には、ゲームではColor Gradingしか使いませんでした。
Particleとシェーダーで事足りたのと、元々PCVR並みにスペックが必要なレンダリング処理負担を抱えている以上、余計な処理を増やすことでFPSを落としたくなかったという理由です。
N/S高等学校の梅田キャンパスor代々木キャンパスに来ると、空間再現ディスプレイを触れますのでお待ちしております ~~（ダイマ）~~


## おまけ


Unity内でのゲーム画面をキャプチャするにはUnityRecorderを使うと便利ですが、ELF-SR1での撮影は少々注意が必要でした。

Unity Recorder参考URL：
https://docs.unity3d.com/ja/Packages/com.unity.recorder@2.6/manual/index.html

通常ですと、CaptureのSourceをGameViewにするとそのまま画面をキャプチャできます。
しかし、空間再現ディスプレイでは左右それぞれの目に対応する映像をリアルタイムでレンダリングして合成しているため、今回掲載している画像のように、視差分ずれた画像が生成されてしまいます。


したがって、今回のゲーム作成と検証で得た結論は、下記のようになります。

### 両目分の画像・映像を視差含めて分かりやすく見せる
```
Source: GameView
```
:::note
解像度を変更する場合は`START RECORDING`を先に押すと、画面が小さくなってしまいます
PlayModeにしてから押しましょう
:::
### 片目分の映像のみを出力してゲーム画面内容を綺麗に見せる
```
Source: Targeted Camera
Camera: Tagged Camera
Tag: Player（下記のタグに合わせる）
```
:::note
SRDisplayManager内にあるオブジェクトRightEyeCamera or LeftEyeCameraのタグを変更しておきましょう
例：Player
:::
### 両目で見た時の雰囲気を見せる
```
理屈上、両目の真ん中付近にカメラレンズがあれば、両目で見た光景が撮影できます
頑張って目元に物理カメラを設置して撮りましょう
（他人から見るとシュールな絵面になります）
```