シンプルなImageEffect その９。ディゾルブ(dissolve)

TwitterにアップしたディゾルブImageEffectのシェーダコードを貼っておきます。

今日のシンプルなImageEffect。Dissolve（ディゾルブ）

よくあるくり抜きだけだと味気ないので、境界部分の色を指定出来るようにした。
（加算、Lerp合成の２種）

テクスチャと色設定をいじれば、トランジションで色々使えるかと。 pic.twitter.com/Q1iQ2aaiH6

— MIYAKE (@ScreenPocket) May 15, 2020

ディゾルブのコードはググればいくらでもありますが、
せっかくなので境界線に色付けができるシェーダコードを用意しました。

DissolveBorderColor.shader

Shader "ScreenPocket/ImageEffect/Dissolve Border Color"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _DissolveTex ("Dissolve Texture", 2D) = "white" {}
        _DestColor ("Dest Color", Color) = (0,0,0,1)
        _BorderColor ("Border Color", Color) = (0,0,1,1)
        _Rate ("Rate", Range (0.0, 1.0)) = 0
        _Scale ("Scale", Float) = 12
    }
    
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        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;
            };

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

            sampler2D _MainTex;
            sampler2D _DissolveTex;
            float _Rate;
            float _Scale;
            fixed4 _DestColor;
            fixed4 _BorderColor;

            fixed4 frag (v2f i) : SV_Target
            {
                half4 col = tex2D( _MainTex, i.uv );
                half4 dis = tex2D( _DissolveTex, i.uv );
                fixed rate = saturate( (_Rate - dis.r) * _Scale );
                col = lerp( col, _DestColor, floor(rate));
                col = lerp( col, _BorderColor, frac(rate));
                
                return col;
            }
            ENDCG
        }
    }
}

敢えてstep()は使わず、Scaleで乗算することで境界部分を実装しています。
Scaleで乗算値を調整することで、境界線の幅を調整できます。

境界線の色を加算合成したい場合は、下記のコードをご利用下さい（ちょっと計算順番が違う）

DissolveBorderColorAdditive.shader

Shader "ScreenPocket/ImageEffect/Dissolve Border Color Additive"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _DissolveTex ("Dissolve Texture", 2D) = "white" {}
        _DestColor ("Dest Color", Color) = (0,0,0,1)
        _BorderColor ("Border Color", Color) = (0,0,1,1)
        _Rate ("Rate", Range (0.0, 1.0)) = 0
        _Scale ("Scale", Float) = 12
    }
    
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        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;
            };

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

            sampler2D _MainTex;
            sampler2D _DissolveTex;
            float _Rate;
            float _Scale;
            fixed4 _DestColor;
            fixed4 _BorderColor;

            fixed4 frag (v2f i) : SV_Target
            {
                half4 col = tex2D( _MainTex, i.uv );
                half4 dis = tex2D( _DissolveTex, i.uv );
                fixed rate = saturate( (_Rate - dis.r) * _Scale );
                col += _BorderColor * frac(rate);
                col = lerp( col, _DestColor, floor(rate));
                return col;
            }
            ENDCG
        }
    }
}