[Unity] シェーダーで背景と透過画像を合成する

シェーダーで背景画像と透過画像を合成します。
スクリプトで合成したり、複数のImageオブジェクトを重ねて合成することもできますが、シェーダーで実装するとシンプルに行うことができます。

またTexture2Dに変換して、EncodeToPNG()で画像ファイルを生成することができます。

シェーダー

※ _MainTexと_OverTexの画像の比率は同じになっている必要があります

OverTex.shader

Shader "Custom/OverTex"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _OverTex ("OverlayTexture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _OverTex;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 overCol = tex2D(_OverTex, i.uv);
                fixed4 mainCol = tex2D(_MainTex, i.uv);

                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);

                return fixed4((overCol.rgb * overCol.a + (mainCol.rgb * mainCol.a * (1 - overCol.a))), 1.0);
            }
            
            ENDCG
        }
    }
}

_OverTexのアルファ値を見て、画像を合成します。

実行結果

_MainTexに元画像を指定し、_OverTexに重ねて合成したい透過画像を指定します。
期待通り合成され表示されました👏