對於廣大的shader愛好者應該對於邊緣檢測很熟悉。在看完馮樂樂的Unity shader入門精要裡邊緣檢測那段，有一些個人的疑惑，於是上網百度搜索一些卷積概念以及部落格上對於邊緣檢測的講解，發現和馮樂樂講的大致相同，下面說下我的疑惑以及我的見解。標準的邊緣檢測shader如下：

Shader "Custom/ScannerShader"
{
	Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _MaskTex("MaskTex", 2D) = "white" {}
        _EdgeOnly ("Edge Only", Float) = 1.0
        _EdgeColor ("Edgge Color", Color) = (0,0,0,1)
        _BackgroundColor ("Background Color",Color) = (1,1,1,0)
        _Thickness ("Thickness",Float) = 1.0
		_Speed("Speed",Range(-1,0))=-0.5
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        cull off
        LOD 100
        Blend SrcAlpha OneMinusSrcAlpha

        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;
            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
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            #include "UnityCG.cginc"

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

            struct v2f
            {                    
                float2 maskuv : TEXCOORD0;
                float2 uv[9] : TEXCOORD1;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            sampler2D _MaskTex;
			half4 _MainTex_TexelSize;
            fixed _EdgeOnly;
            fixed4 _EdgeColor;
            fixed4 _BackgroundColor;
            fixed _Thickness;
			fixed _Speed;
            
            fixed luminance(fixed4 color)
            {
                return 0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b;
            }

            half Sobel(v2f i)
            {
                const half Gx[9] = {-1,-2,-1,0,0,0,1,2,1};
                const half Gy[9] = { -1,0,1,-2,0,2,-1,0,1 };

                half texColor;
                half edgeX = 0;
                half edgeY = 0;
                for (int it = 0; it < 9; it++)
                {
                    texColor = luminance(tex2D(_MainTex, i.uv[it]));
                    edgeX += texColor * Gx[it];
                    edgeY += texColor * Gy[it];
                }

                half edge = 1 - abs(edgeX) - abs(edgeY);
                return edge;
            }

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

                half2 uv = v.uv;
                
                o.maskuv = v.uv- frac(fixed2(0,_Speed * _Time.y));
				//o.maskuv = v.uv + fixed2(0.7 * _Time.y,0);

                o.uv[0] = uv + _MainTex_TexelSize.xy * half2(-1, -1) * _Thickness;
                o.uv[1] = uv + _MainTex_TexelSize.xy * half2(0, -1)* _Thickness;
                o.uv[2] = uv + _MainTex_TexelSize.xy * half2(1, -1)* _Thickness;
                o.uv[3] = uv + _MainTex_TexelSize.xy * half2(-1, 0)* _Thickness;
                o.uv[4] = uv + _MainTex_TexelSize.xy * half2(0, 0)* _Thickness;
                o.uv[5] = uv + _MainTex_TexelSize.xy * half2(1, 0)* _Thickness;
                o.uv[6] = uv + _MainTex_TexelSize.xy * half2(-1, 1)* _Thickness;
                o.uv[7] = uv + _MainTex_TexelSize.xy * half2(0, 1)* _Thickness;
                o.uv[8] = uv + _MainTex_TexelSize.xy * half2(1, 1)* _Thickness;

                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                half edge = Sobel(i);
                
                fixed4 maskColor = tex2D(_MaskTex, i.maskuv);

                fixed4 withEdgeColor = lerp(_EdgeColor,tex2D(_MainTex, i.uv[4]),edge);
                fixed4 onlyEdgeColor = lerp(_EdgeColor, _BackgroundColor, edge);

                fixed4 col = lerp(withEdgeColor, onlyEdgeColor, _EdgeOnly);
                return fixed4(col.rgb,col.a * (1-maskColor.r));
            }
            ENDCG
        }
    }
}
 

我們在看概念時都知道，使用一個3x3大小的卷積核對一張5x5大小的影象進行卷積操作，當計算圖中紅色方塊對應的畫素的卷積結果是，我們首先把卷積的中心放置在該畫素的位置，翻轉核之後再依次計算核中的每個元素和其覆蓋的影象畫素值的乘積並求和，得到新的畫素值。我們在看完卷積的公式，就知道我們為什麼要將卷積核翻轉。我們要求畫素和卷積核的卷積，也就是用畫素左上點x卷積核的右下點，這裡我們為了看起來方便我們直接將卷積核旋轉180度，也就是大部分部落格提到的翻轉。在我們理解翻轉後，我們在看原始碼用的畫素左下點乘以卷積核的左上點，這在概念上是不正確的。部落格上說sobel運算元是比較特殊的對稱的運算元所以計算結果是一樣的。所以我認為那段程式碼應該改成：

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

                half2 uv = v.uv;
                
                o.maskuv = v.uv- frac(fixed2(0,_Speed * _Time.y));
				//o.maskuv = v.uv + fixed2(0.7 * _Time.y,0);

                o.uv[0] = uv + _MainTex_TexelSize.xy * half2(1, -1) * _Thickness;
                o.uv[1] = uv + _MainTex_TexelSize.xy * half2(0, -1)* _Thickness;
                o.uv[2] = uv + _MainTex_TexelSize.xy * half2(-1, -1)* _Thickness;
                o.uv[3] = uv + _MainTex_TexelSize.xy * half2(1, 0)* _Thickness;
                o.uv[4] = uv + _MainTex_TexelSize.xy * half2(0, 0)* _Thickness;
                o.uv[5] = uv + _MainTex_TexelSize.xy * half2(-1, 0)* _Thickness;
                o.uv[6] = uv + _MainTex_TexelSize.xy * half2(1, 1)* _Thickness;
                o.uv[7] = uv + _MainTex_TexelSize.xy * half2(0, 1)* _Thickness;
                o.uv[8] = uv + _MainTex_TexelSize.xy * half2(-1, 1)* _Thickness;

                return o;
            }
 

頂點順序應該是從右下向左開始。我和我的一個小夥伴討論了一個多小時後一致這麼認為。這也堅定了我自己的想法。大家如果有不同見解歡迎留言交流！