Color SpaceがLinearのときUIの透明度が正しくならない

この記事は「Unityゲーム開発者ギルド Advent Calendar 2023」12/7の記事です。

概要

デザイナーからUIの素材を頂き、UGUIのImageを使って配置したところ、想定と透明度が異なることに気づきました。
設定を見直したところ、どうやらColor SpaceがGammaかLinearで見た目が変わることがわかりました。
以下の画像のように違うのですが、Gammaのときの見た目が正しく、Linearの場合が正しくありません。

Color SpaceによるUIの表示の違い

Unity 2021.3の環境でプロジェクトを立ち上げるとデフォルトがLinearなので、Linearを選択していたのですが、ここで大きく躓いてしまいました。
(今までデフォルトはGammaだったと思いますが、Linearがデフォルトなのは私の環境だけ?)

最初、何か設定などを見落としているのでは?と思い調べましたがそうではなく、Linearにおける半透明UIの描画処理に関しては仕様や制約といったことのようでした。

シェーダーで近づける

以下のForumで話がされており、シェーダーが作成され公開もされており、近づけることは可能ですが見た目を完全に一致することはできませんでした。

Linear space for scene, gamma for UI?

URPのRendererFeatureを用いる

URP限定ですが、RendererFeatureを用いて、解決することができます。
実際、以下の動画とGithubのサンプルを試したところ解決できることを確認できました。
負荷がどの程度かわからないのと採用事例などがないので少し不安でした。

Youtube - CEDEC2022】ちょっと踏み込んだURP: エンジニアに向けた実践的なナレッジ紹介
Github - CEDEC2022-URP

PhotoshopでUIを作る場合

PhotoshopでUIパーツを作る場合、編集→カラー設定からRGBカラーブレンド部分をガンマ補正をチェックし、
作成すると見た目を合わせたまま作成できると聞きましたが、今回、PhotoshopでUIを作成していないので私は試せていません。

ガンマ補正

私のゲームでの対応

半透明なUIパーツが比較的多いわけではないので、デザイナーが作った素材とUnity上での表示を並べて表示し、できるだけ一致するように調整することとしました。

使用バージョン

Unity 2021.3.31

Unityカテゴリの記事
History Inspectorの紹介
敵AIとビジュアルスクリプティング
Chronosを使った感想
Smart Inspectorの紹介
コンポーネントの順番をスクリプトから並び替える
Kris' Favorite Assets が便利
キー操作でUIのナビゲーションをループさせる
TextMeshProのSprite Assetを更新する
UnityPhysicsDebugDraw2D が便利
色管理を考える
細かいTips
ビルドスクリプトを書く
AnimatorのCulling Modeでハマった話
Vectrosityを使ってUGUI上で線や円のアニメーションをする
スプレッドシートからjsonデータを読み込む
ビジュアルノベルアセットFungusにコマンドを追加してカスタマイズする
Skinned Mesh Renderer の Boundsについて
シーンごとにビルド結果の容量を出す
シーンビューにクオリティ設定のスライダーを出すエディタ拡張
ビルド結果のFile headersが大きい理由
フリーのビジュアルノベルアセットFungusを使ってRPGのイベントを作る
Move To View を改良する
フリーのビジュアルノベルアセットのFungusが便利
Visual Studio で保存時にフォーマットする
スプレッドシートからデータを読み込む
Easy Save2 で シリアライズされたクラスを保存する
ShaderでSpriteの色相をシフトする
Sprite、Texture の 色相をシフトする
uGUIのButtonをクリック時にハイライトのままになる
uGUIのCanvas Groupを使って透過処理をしたり、操作を制限する
自作のコンフィグ画面に必要なもの
uGUIでトグルなボタンを作る
uGUI で動的にボタンを作る
Easy Save2 を使ってみる
csv読み込んで ローカライズ
LoadLevelAdditive で共通シーンを加算
画面全体に色をかける
Any State でどこからでも遷移できるようにする
iTween のStop ではまる
sprite の multiple で 境界がおかしくなる
Renderer の Materials を スクリプトから設定する
2D画面に線を引く Line Renderer
背景をスクロールさせる