【Unity】Render Textureを使ってPost ProcessingをUIだけに適用する

# 0.完成図
最終的にこんな感じの、特定のUIだけぼんやり光っているような（つまりUI以外は光っていない）ものが目標。
![完成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/b549ff39-9095-399b-dea5-6f8ec889355f.png)

## 実行環境
Unity2021.3.1f（LTS）

# 1.準備
## 1-1.ステージやキャラクター、UIの準備
各自、適当に作って欲しい。
自分はStandard Assetsで2Dで適当にこんな感じに作成した。
<INS>別に2Dじゃなくても今回の方法は使えるので、3Dでもよい。</INS>

![準備ステージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/fbb206a1-dee3-99a1-8a4b-c3259f11f6d5.png)

## 1-2.Post Processingの導入
Post Processingは、ゲーム画面全体をふんわりいい感じにしてくれるUnityの機能。
「画面全体」がポイントで、普通の方法でこれ導入すると、今回の目標である「UI**だけ**」光らせるのではなくて、もう画面全体色んなところが光る。それをどうにかする方法を今から説明するわけでして...。

とりあえず、Post Processingの導入方法はこちら。
1. Unity画面左上のメニューから `Window→Package Manager` でPackage Managerウィンドウを開く。
   ![Post導入1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/47db0711-18b0-1046-d633-937a01492979.png)

2. Package Managerウィンドウ左上、プルダウンで選択して `Unity Registry` に切り替える。
   ![Post導入2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/d7d1365d-efb0-5308-2bb3-beafd38a1481.png)

3. `Post Processing` を探してインストールする。
   ![Post導入3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/e28a1cf9-f1e5-c0ae-24f7-5e9df2c15d13.png)

# 2.レイヤーごとにカメラを分ける
準備ができたところで、どんどん進めていく。
まずは<INS>光らせたいUIのレイヤー</INS>と<INS>光らせたくないサムシングのレイヤー</INS>を別のものにする。

## 2-1.光らせたいUIのレイヤーの設定
1. どのゲームオブジェクトでもいいけど、インスペクタービューのLayerのプルダウンをクリック、 `Add Layer` をクリック
   ![レイヤー設定1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/c4f2f0ab-b670-dfa0-0485-e30b32c82923.png)

2. 光らせるUI専用のレイヤーを新しく作成（名前はなんでもいい...）
   ![レイヤー設定2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/c0ebe7ad-5fa7-bbbe-71cd-29c64746a95a.png)

3. ヒエラルキービューから、光らせたいUIの親オブジェクトのCanvasを選択、レイヤーを先程作ったレイヤーに設定
   ![レイヤー設定3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/b6d32497-a2c5-911c-c4bb-dd7cf7285c77.png)

4. でてきたメッセージでYesを選択すると、一気に子オブジェクト全部のレイヤーを変更してくれる。
   ![レイヤー設定4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/cd839e53-5f7d-04c5-70c7-34f4928fbde9.png)

## 2-2.光らせたくないサムシングのレイヤーの設定
当たり前だけど、先程作ったレイヤー以外のものに設定する。
この後の手順の關係で、<INS>「レイヤーがない」のはちょっとまずい</INS>ので（具体的に言うと画面に映らなくなる）、<INS>何かしらレイヤーを設定しておこう</INS>。

自分は適当にサムシング全選択で、Defaultレイヤーにした。
![レイヤー設定5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/b709f197-8210-7ba0-61d9-91726c5f42d9.png)

## 2-3.カメラを分ける
光らせたいUIのみを映すカメラを作っていく

1. Cameraを作成
   ![別カメつくる1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/274db4c3-26da-a2b9-d712-6fb056132e59.png)

2. 作ったCameraの `Culling Mask` の項目を、先程設定した、光らせたいUI用のレイヤーのみに設定する。
   ![別カメつくる2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/4d1de2bc-7be2-2779-54ef-17d3668aff91.png)

3. もともとあったカメラの方は逆に、光らせたいUI用のレイヤーを `Culling Mask` の項目から外す。
   ![別カメつくる3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/3442d7d8-d567-58f9-7813-a4097eb65a32.png)

4. 現状UIはどのカメラに限らず映るようになっているので、UI用のカメラのみに映るように設定する。
   光らせたいUIの親オブジェクトのCanvasを選択、インスペクタービューから `CanvasコンポーネントのRender Mode` を `Screen Space-Camera` に変更する。
   ![別カメつくる4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/debe0f4e-1ac0-5791-63a8-1fe6774f8642.png)

5. 続いて、`Render Camera` の項目に、UI用のカメラをドラッグ＆ドロップ。
   ![別カメつくる5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/f7fab121-80c8-9956-beb2-210c81c38e16.png)

## 2-4.ここまでの完成図
UI用のカメラをオンオフすると、こんな感じで、UIのみの画面とUIが映ってない画面に切り替わるのならとりあえずOK。
謎に映ってないやつがあったら、そいつのレイヤーをもう一度確認してくるんだ。
![途中経過.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/3b0a0ec2-1bb0-5def-46cb-1367ec4c51cb.gif)

## 2-5.カメラの深度を調整する
さて、各レイヤーごとに映すカメラを変えたところで、実際にPost Processingを始める前に一つ、調整しなければいけないのがカメラの「深度（depth）」である。
上記GIFでもわかるが、UI用のカメラが有効化されていた場合、MainCameraではなくUI用のカメラが現状優先されて描写されていると思われる。これを逆にする必要がある。

1. MainCameraとUI用のカメラ、両者の `CameraコンポーネントのDepth` を比較する。
   ![Depth1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/cfc76898-7da8-c2ee-6bb0-ce323eff6d0a.png)

2. UI用のカメラの深度（Depth）をMainCameraよりも小さい数字にする。
   ![Depth2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/ce20db64-719a-7ff9-2a79-d96d574dff1f.png)

これでゲーム画面には、MainCameraで映しているものが映っているはず！
![Depth3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/647fc4c6-4cc6-994e-072f-213c0ffb406e.png)

# 3.Post Processingを導入する
いよいよ、Post Processingを使っていい感じにエフェクトをかけていく。

## 3-1.Post Processingを導入する
1. UI用のカメラを選択し、レイヤーを光らせるUI専用のレイヤーに設定する。
   ![postレイヤー設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/7f1f4e73-b60d-4f2f-da82-e4dd78ea7107.png)

2. UI用のカメラに `Post-process Layer,Post-process Volume` の二つのコンポーネントを追加する。
   ![postコンポーネント.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/723bd260-2a32-d926-f2a2-fca780f0da02.png)

## 3-2.Post-process Layerの設定
Post-process Layerコンポーネントに関しては、一つだけしか触るところはない。
Layerの項目を、光らせたいUI専用のレイヤーのみに設定する。
![post-layer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/6bd4920c-033a-ce0f-fb5c-904b7b23d87f.png)

## 3-3.Post-process Volumeの設定
ここを失敗すると、UIは光らない。Post Processingの根幹。

1. `is Global` にチェックをいれ、`Profile` の項目にあるNewボタンをクリックする。
   ![post-volume1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/7a704ad6-519b-bd41-0c0d-1d3067d8917d.png)

2. 続いて、Add effect....ボタンをクリック。
   ![post-volume2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/19372eee-4717-e13f-5341-0b783418840d.png)

3. `Unity→Bloom` という順に選択。
   ![post-volume3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/2b2fba7d-0921-f055-f168-062c670d2945.png)

4. Bloomの`Intensity,Color` の項目にチェックを入れて有効化し、適当に設定する。
   この辺の項目、気になった人は調べるなり実地で検証するなりしてみてください。
   ![post-volume4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/ec9d7122-1afd-2570-d395-b36b18efe8b6.png)

5. MainCameraを一度非表示にしてみて、エフェクトを確認する。
   いろいろと微調整してみて、いい感じになったら次に進む。
   ![post-volume5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/cee3dbb2-f785-cbc6-4867-5ab4c7e30c96.png)

# 4.Render Textureを導入する
<INS>Render Texture</INS>とは、別のカメラで映しているものをテクスチャとしてとってくれる、めちゃ便利なUnityの機能。
今回は、UI用のカメラで映したものをテクスチャとしてとりこんで、MainCameraに重ねる方針。

1. プロジェクトビューで、 `Render Texture` をつくる。
   ![renderTx1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/ef6740c1-b9fc-c3ef-67cd-2429819212a7.png)

2. 作成したRender Textureを選択、インスペクタービューにて、Sizeの項目を該当の画面サイズにしておく。
   ![renderTx2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/affa2972-fb49-d1df-ec84-e6afeb25adfe.png)

3. UI用のカメラをヒエラルキービューから選択、 `CameraコンポーネントのTarget Texture` の項目にRender Textureをドラッグ＆ドロップする。
   こうすることで、Cameraで映っている画面がRender Textureに描写される。
   ![renderTx3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/64da4fea-9c2a-8cce-8f6f-d187d9a83dd6.png)

4. 新しくCanvasを作成する。光らせたいUIを配置していたCanvasとは別に作成するのがポイント。（一緒くたにすると、レイヤー關係がややこしくなるぞ）
   ![renderTx4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/0c7dff3d-4929-3a6c-742b-7e4c19d7f720.png)

5. 新しく作ったCanvasの子オブジェクトに `Raw Image` を設置する。
   ![renderTx5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/fab63353-754e-8499-7975-3cfe47da40c1.png)

6. Raw Imageの設定諸々を施す。
   Rect Transformはstretch×stretchにしたうえで下記のように数字を入力すると、Raw Imageは画面ピッタリに描写される。
   あとは `Raw ImageコンポーネントのTexture` 項目に、プロジェクトビューのRender Textureをドラッグ＆ドロップすると、Raw Image上にRender Textureのテクスチャが入力される。
   ![renderTx6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/a015120b-bbd4-e8cf-62fb-8d0c186ee3c7.png)


# 5.完成図
感想：Render Textureべんり！！
![完成図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/4f538dd1-46c9-cab9-6fae-18632bba4d9c.png)

# 6.参考文献
今回の記事は、下記の記事を参考にアレンジしたもの。
この記事にある**加算マテリアル**を使うと、もっとイイ感じになるぞ。
![スクリーンショット (215).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/73f51333-1faf-70fb-10bc-0d839fc598ab.png)

https://www.create-forever.games/pps-v2-word-bloom/