【Unity】【シェーダ】Photoshopのオーバーレイをシェーダで再現する

PhotoshopのオーバーレイをUnityのシェーダで再現する方法です。

Unity2019.2.18

シェーダ

早速ですがシェーダです。

Shader "Overlay"
{
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}
        _OverlayTex("Overlay Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            sampler2D _OverlayTex;
            float4 _MainTex_ST;

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

            fixed4 frag (v2f i) : SV_Target
            {
                float4 col = tex2D(_MainTex, i.uv);
                fixed4 overlayCol = tex2D(_OverlayTex, i.uv);

                // http://www.cg-ya.net/2dcg/aboutimage/composite-is-math/
                col.rgb = col.rgb < 0.5 ? 2.0 * col.rgb * overlayCol.rgb : 1.0 - 2.0 * (1.0 - col.rgb) * (1.0 - overlayCol.rgb);
                return col;
            }
            ENDCG
        }
    }
}

コメントにURLが書いてある部分がオーバーレイの処理です。
処理はURLのサイトのものを参考にさせていただいています。

www.cg-ya.net

レンダリング結果

それではこのシェーダを使ってレンダリングしてみます。

まずベーステクスチャ(_MainTex)は次のものを使います。

f:id:halya_11:20191223005654p:plain

オーバーレイ用テクスチャ(_OverlayTex)は次のものを使います。

f:id:halya_11:20191223005627p:plain

Unityで描画した結果は以下の通りとなります。

f:id:halya_11:20191223005519p:plain

Photoshopで描画した結果は以下の通りとなります。

f:id:halya_11:20191223005602p:plain

結果に相違がないことを確認できました。

参考

www.cg-ya.net