RenderTextureで色がおかしい：マテリアルで解決

こんにちは、ユーゴです。
今回は、RawImageにRenderTextureを指定した時に、カメラで写した世界の色が本来と異なる件にぶつかりました。その問題を、RenderTexture側から解決したいと思います。

## 環境
・MacBookPro 13インチ
・Unity 2021.3.4f1

## 問題
RenderTextureをアタッチしたRawImageの色が部分的に変。特に、透明系。
**期待した結果**
![スクリーンショット 2022-06-24 15.27.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/064fa8c7-4781-b8d8-eb11-42033b30a690.png)
**実際の結果**
![スクリーンショット 2022-06-24 15.27.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/7d5bf589-db62-2e39-1c1a-51945bc612f8.png)

## 原因
カメラが透明系(Fade, Transparentなど)を写した時、その情報がRenderTextureに乗る。そして、その情報からRawImage自体が透明になっている。
上の写真「実際の結果」が白っぽくなっているのは、RawImageの後ろに標準UI「Pannel」を置いていたため、グレーが貫通して表示されていた。

## 結論
(2022/7/5 追記)
**方法2**の方がおすすめ。手順が少ないため。

**【方法1】**(おすすめ度：☆☆)
RawImageのマテリアル(厳密にはShader)を透明度が乗らないものに変更する。
今回採用したのは、標準で搭載されているシェーダー「**UI/DefaultETC1**」。

**【方法2】**(おすすめ度：☆☆☆) (2022/7/5 追記)
RenderTexture自体を透明度が乗らないものにする。
RenderTextureのColorFormatを「**B10G11R11_UFLOAT_PACK32**」に変更する。(他にもありそう)

## 現象の再現
2021系なので、レイアウトが違う場合があります。ご了承ください。

**(1)RawImageを作成**
ヒエラルキーウィンドウ左上の＋ボタンから、「UI > RawImage」をクリックする。
![スクリーンショット 2022-06-24 15.36.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/ba6821ed-e90a-83fb-2f35-77e79a3d08d7.png)

**(2)RenderTextureを作成**
プロジェクトウィンドウの左上の＋ボタンから、「RenderTexture」をクリックする。
![スクリーンショット 2022-06-24 15.41.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/0f315e47-8988-9736-9c62-17c38998137d.png)

**(3)UIの準備**
(3-1)ヒエラルキーの＋ボタンから、「UI > Pannle」を追加。色を真っ黒にする

(3-2)ヒエラルキーの＋ボタンから、「UI > RawImage」を追加

(3-3)(3-1)のPannelを、(3-2)のRawImageの裏に配置する。ヒエラルキーで、RawImageがPannelより上にあればできる。
わかりやすいように、以下の写真ではPannelをちょっと大きくした。
![スクリーンショット 2022-06-28 14.07.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/d2aa28ce-c8f3-62a9-fd00-cdf5e8f60046.png)


(3-4)追加されたRawImageのTextureに、(2)で作成したRenderTextureを指定
![スクリーンショット 2022-06-28 12.24.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/aa71108b-3526-85c6-4d59-72aeed669025.png)

**(4)カメラにRenderTextureを指定**
ヒエラルキーの＋ボタンから、カメラを追加。(2)のRenderTextureを、追加したカメラのTargetTextureに指定。シーンを作った時にある**Main Cameraにアタッチするのはダメ**なので注意(映像が映らなくなるため)。
![スクリーンショット 2022-06-28 12.16.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/6379240d-7002-29b1-b8b2-e48437b80f5e.png)


**(5)透明なオブジェクトをカメラに映す**
(5-1)適当にオブジェクトを作成。今回はキューブにした。

(5-2)半透明なマテリアルを作成。Alpha値を50くらいにする。
![スクリーンショット 2022-06-24 15.49.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/111cc401-9947-1f77-6e35-cc9d2f3df01a.png)
![スクリーンショット 2022-06-28 12.20.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/3236af79-474d-74d8-b1b9-72725d00f325.png)

(5-3)(5-1)で作ったオブジェクトを(4)のカメラに映す

(5-4)オブジェクトのマテリアルに、(5-2)のマテリアルをアタッチ

**(6)結果を確認**
色彩感覚が良くないと差異は分かりにくいかもしれませんが、右上のRawImageに写っているキューブは、少し黒い感じがします。
![スクリーンショット 2022-06-28 14.11.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/336f9c08-ee78-c28f-d136-8b977641665d.png)


## 解決方法
### 方法1：マテリアルで透明を無効化
まず、RawImageのインスペクターを見てみます。すると、RawImageにはマテリアルが付いていないのが分かります(厳密には、標準搭載の｢UI/Default｣が割り当てられる)。
![スクリーンショット 2022-06-28 14.13.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/a5394055-5089-0f98-0cc1-f94261d3d351.png)
これは透明度を反映してしまう処理になっています。
なので、以下の手順を行なってください。

(1)マテリアルを作成
(2)シェーダーを｢**UI/DefaultETC1**｣にする。
![スクリーンショット 2022-06-28 14.16.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/807d3266-eeba-467f-5d00-c6dfb3e40b6a.png)
(3)そのマテリアルをRawImageにアタッチ。
![スクリーンショット 2022-06-28 14.18.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/e01a7d1c-28c7-5f31-a177-d3e596a9ce0b.png)

結果、期待通りになった。
![スクリーンショット 2022-06-24 15.27.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/35621f7f-2ba5-848a-266a-c00160ef42dd.png)


### 方法2：RenderTextureの形式で透明を無効化
(1)RenderTextureのColorFormatを「**B10G11R11_UFLOAT_PACK32**」にする。
![スクリーンショット 2022-07-05 21.41.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/93e95ae5-8232-2544-d0a1-65b5019b410b.png)

期待通りになった。
![スクリーンショット 2022-07-05 21.34.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607452/d4468c82-49fa-73f4-57af-939dd2f17412.png)

## まとめ
いかがでしょうか。
今回は、RenderTextureをRawImageに映すとき、透明度が乗ってしまう問題を紹介しました。解決方法は、透明度が乗らないマテリアル(シェーダー)を選択すれば良いです。

(2022/7/5 追記)もしくは、RenderTexture側の設定からも直ります。

このように、Unityに関するニッチな情報から、初心者向けの技術まで扱っていきたいと思います。
よろしければ、フォローの方お願いします。