-->

【Unity Shader 基礎】Render 2D Dataで全画面反映シェーダー

【Unity Shader 基礎】Render 2D Dataで全画面反映シェーダー
前回のページではRender Graphを使って全画面反映のシェーダーを作りました。
しかしプロジェクトが
 Renderer 2D Data 
を使用している場合、RenderGraph無しで、シェーダーコードのみで全画面反映シェーダーが作れます。

URPの設定について

ProjectSettingsから現在のプロジェクトがRenderer 2D Dataを使っているか確認が可能です。
詳しくはこちら。 p.74 : 【Unity Shader 基礎】URP環境の確認の仕方
プロジェクト作成時にUniversal 2Dを選択している場合は、Renderer 2D Dataが指定されているはずです。


プロジェクトがUniversal Renderer Dataを選択している場合、このページのシェーダーは使う事はできません。
前回のページのRender Graphを作る必要があります。

全画面色反転シェーダー

以下の
 URPGrab2D/InvertColor 
のコード全文を.shaderファイルに丸コピしてください。
中身の細かい意味については こちらの記事に目を通しておくと分かり易いです。
Copy Code

Shader "URPGrab2D/InvertColor"
{
    Properties  
    {
        [HideInInspector]_MainTex("-",2D)="white"{} 
    }    

    SubShader
    {
        Tags 
        { 
            "Queue"="Transparent" 
            "RenderPipeline" = "UniversalPipeline" 
        }
        Cull Off
        ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            HLSLPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
            //後述のLinearToSRGB、SRGBToLinearで必要なライブラリ
            #include "Packages/com.unity.render-pipelines.core/ShaderLibrary/Color.hlsl"            

            struct Attributes
            {
                float4 positionOS : POSITION; //オブジェクト空間座標(対象の大元の座標と寸法)
            };

            struct Varyings
            {
                float4 positionCS : SV_POSITION; //クリップ空間座表(カメラの四角い画角内での対象の座標)
                float4 positionVP : TEXCOORD1; //ビューポート空間座標(クリップ空間座表 -w ~ +w を 0 ~ w の範囲に修正した座標)
            };

            // 背景テクスチャ
            TEXTURE2D(_CameraSortingLayerTexture);
            SAMPLER(sampler_CameraSortingLayerTexture);

            Varyings vert (Attributes input)
            {
                Varyings output;

                //オブジェクト空間座標をクリップ空間、ビューポート空間座標にそれぞれ変換                
                output.positionCS = TransformObjectToHClip(input.positionOS.xyz);
                output.positionVP = ComputeScreenPos(output.positionCS);              

                return output;
            }

            half4 frag (Varyings input) : SV_Target
            {
                //ビューポート空間座標から奥行を省いて座標を平面化する
                float2 screenUV = input.positionVP.xy / input.positionVP.w;
                //受け取った全画面情報から指定uv座標のピクセル色を抜き取る
                half4 background = SAMPLE_TEXTURE2D(_CameraSortingLayerTexture, sampler_CameraSortingLayerTexture, screenUV);

                //ピクセル色をリニア空間ルールから一旦ガンマ空間ルールへ変換
                half3 sRGB = LinearToSRGB(background.rgb);
                //ガンマ空間ルール上で色を反転
                sRGB = abs(1 - sRGB);
                //色をガンマ空間ルールからリニア空間ルールに戻す
                half3 invertColor = SRGBToLinear(sRGB);

                return half4(invertColor, 1);
            }
            ENDHLSL
        }
    }
}

コードを少し解説

コードの以下の部分で、
 _CameraSortingLayerTexture 
というテクスチャを受け取っています。
これはRender 2D Dataがそのポストプロセス処理の中で、デフォルトで送信しているテクスチャです。
Copy Code

            // 背景テクスチャ
            TEXTURE2D(_CameraSortingLayerTexture);
            SAMPLER(sampler_CameraSortingLayerTexture);
この中にカメラの全画面の色情報が格納さています。

受け取ったテクスチャ情報はピクセルシェーダー内で 色反転させています。
Copy Code

            half4 frag (Varyings input) : SV_Target
            {
                //ビューポート空間座標から奥行を省いて座標を平面化する
                float2 screenUV = input.positionVP.xy / input.positionVP.w;
                //受け取った全画面情報から指定uv座標のピクセル色を抜き取る
                half4 background = SAMPLE_TEXTURE2D(_CameraSortingLayerTexture, sampler_CameraSortingLayerTexture, screenUV);

                //ピクセル色をリニア空間ルールから一旦ガンマ空間ルールへ変換
                half3 sRGB = LinearToSRGB(background.rgb);
                //ガンマ空間ルール上で色を反転
                sRGB = abs(1 - sRGB);
                //色をガンマ空間ルールからリニア空間ルールに戻す
                half3 invertColor = SRGBToLinear(sRGB);

                return half4(invertColor, 1);
            }

Render 2D Dataの変更

描画済みの背景をテクスチャとして利用するため、一点だけRenderer 2D Dataの設定を変更します。
 Camera Sorting Layer Texture 
 Foremost Sorting Layer 
をDefaultに変えてください。

Unityにシェーダーを反映

次にHierarchy上で_CameraSortingLayerTexture専用のOverlay CameraとCanvasを追加します。
作成したカメラは、Base CameraのStackの一番下に登録してください。


作成したCanvasにuGUI Imageを配置して、ストレッチで全画面に伸ばします。
Imageのマテリアルには先ほど作ったURPGrab2D/InvertColorを指定したマテリアルをアタッチします。

すると以下のようにカメラに映っている全ての色が反転するのを確認できるはずです。


Imageの描画範囲を変えると、色反転の範囲も追随して変わります。
0
0