Unity Shader 屏幕后效果——邊緣檢測

關於屏幕后效果的控制類詳細見之前寫的另一篇博客：

https://www.cnblogs.com/koshio0219/p/11131619.html

這篇主要是基於之前的控制類，實現另一種常見的屏幕后效果——邊緣檢測。

 

概念和原理部分：

 

首先，我們需要知道在圖形學中經常處理像素的一種操作——卷積。

卷積操作的實質在於，對於圖像中的每個像素與其周圍的像素進行的重新融合計算行為，以得到不同的像素處理效果，例如銳化圖像，模糊圖像，檢測邊緣等。

 

卷積操作通過不同的像素融合算法能得到各不相同的效果，這主要依賴於卷積核。

可以把卷積核看作是一個n行n列方陣，原始像素則位於方陣的中心。

 

邊緣檢測的卷積核也叫邊緣檢測算子，以Sobel算子為例，形如：

需要特別注意的是，這里的Sobel算子是基於坐標軸以屏幕左上為原點，右下分別為+x,+y方向的，而不是類似於uv坐標軸的以屏幕左下為原點，右上分別為+x,+y方向的。這一點需要特別注意，不然后面的程序很容易寫錯。

其中G_x和G_y分別是縱向和橫向兩個方向的邊緣線檢測，你可以通過去掉矩陣中的零元素來想象，因為零元素不會對像素產生任何影響。也就是說，G_x是為了計算橫向的梯度值，G_y為了計算縱向的梯度值。

橫向的梯度值檢測出來的是縱向的邊緣線，縱向的梯度值檢測出來的是橫向的邊緣線。這一點非常容易混淆，需要特別注意。

 

利用邊緣檢測算子除了融合像素外，主要是為了計算出像素的梯度值。

一個像素和周圍的像素之間梯度值很高，意味着它與周圍的像素差異很大，我們可以想象這個像素和周圍的像素格格不入，存在一個無法逾越的階梯；那么就可以這么認為，這個像素可以作為一條邊界中的值。

對圖像中的每個像素都如此處理，最終就能得到圖像的邊緣。這也就是邊緣檢測的實質內容。

 

計算方法：

 

1.得到每個像素周圍的8個像素的坐標位置以便與Sobel算子進行計算，類似於：（排列方式應該與Sobel算子的坐標軸保持一致）

uv[0]	uv[1]	uv[2]
uv[3]	uv[4]（原始像素點）	uv[5]
uv[6]	uv[7]	uv[8]

 

 

 

 

但因為uv坐標的原點在左下角，因此在計算uv[0]-uv[8]時，若依據uv[4]為原始像素點，則它們的偏移可以表示為如下情況：

(-1,1)uv[0]	(0,1)uv[1]	(1,1)uv[2]
(-1,0)uv[3]	(0,0)uv[4]	(1,0)uv[5]
(-1,-1)uv[6]	(0,-1)uv[7]	(1,-1)uv[8]

 

 

 

 

 

2.通過偏移值可以很快計算出目標像素的周圍像素位置坐標信息，隨后與G_x和G_y對應元素分別進行橫向和縱向的梯度值計算，也就是分別進行縱向和橫向的邊緣檢測：

具體計算方法為：先對卷積核進行180度翻轉，得到新的矩陣，隨后各項對應元素相乘並相加，注意，不要與矩陣的乘法計算混淆。

但因為Sobel算子是否執行翻轉操作對計算結果沒有任何影響，故對於Sobel算子來說，翻轉操作可以省略。

G_x和G_y計算結束后再將它們開平方和；但往往為了簡化GPU的計算量，可以直接取各自的絕對值再相加，得到最終的梯度值G。

 

3.計算出梯度值后對原始的采樣結果進行關於G的插值操作以得到最終的圖像。

 

程序實現：

 

首先是參數調控的腳本：

using UnityEngine;

public class EdgeDetectionCtrl : ScreenEffectBase
{
    private const string _EdgeOnly = "_EdgeOnly";
    private const string _EdgeColor = "_EdgeColor";
    private const string _BackgroundColor = "_BackgroundColor";

    [Range(0,1)]
    public float edgeOnly = 0.0f;

    public Color edgeColor = Color.black;

    public Color backgroundColor = Color.white;

    private void OnRenderImage(RenderTexture source, RenderTexture destination)
    {
        if (Material!=null)
        {
            Material.SetFloat(_EdgeOnly, edgeOnly);
            Material.SetColor(_EdgeColor, edgeColor);
            Material.SetColor(_BackgroundColor, backgroundColor);
            Graphics.Blit(source, destination, Material);
        }
        else
            Graphics.Blit(source, destination);
    }
}

同樣是繼承自ScreenEffectBase基類，三個參數的意義分別如下：

edgeOnly（shader中：_EdgeOnly）：邊緣線的疊加程度，0表示完全疊加，1表示只顯示邊緣線，不顯示原圖
edgeColor（shader中：_EdgeColor）：邊緣線的顏色
backgroundColor（shader中：_BackgroundColor）：背景顏色，當只顯示邊緣線時，可以很清晰看出

基類腳本見：

https://www.cnblogs.com/koshio0219/p/11131619.html

下面是Shader腳本：

Shader "MyUnlit/EdgeDetection"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }

        Pass
        {
            ZTest always
            Cull off
            ZWrite off

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

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

            struct v2f
            {
                half2 uv[9] : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 pos : SV_POSITION;
            };

            sampler2D _MainTex;
            //紋理映射到[0,1]之后的大小,用於計算相鄰區域的紋理坐標
            half4 _MainTex_TexelSize;
            //定義控制腳本中對應的參數
            fixed _EdgeOnly;
            fixed4 _EdgeColor;
            fixed4 _BackgroundColor;

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

                half2 uv = v.uv;
                half2 size = _MainTex_TexelSize;
                //計算周圍像素的紋理坐標位置，其中4為原始點，右側乘積因子為偏移的像素單位，坐標軸為左下角原點，右上為+x,+y方向，與uv的坐標軸匹配
                o.uv[0] = uv + size * half2(-1, 1);
                o.uv[1] = uv + size * half2(0, 1);
                o.uv[2] = uv + size * half2(1, 1);
                o.uv[3] = uv + size * half2(-1, 0);
                o.uv[4] = uv + size * half2(0, 0);
                o.uv[5] = uv + size * half2(1, 0);
                o.uv[6] = uv + size * half2(-1, -1);
                o.uv[7] = uv + size * half2(0, -1);
                o.uv[8] = uv + size * half2(1, -1);

                UNITY_TRANSFER_FOG(o,o.pos);
                return o;
            }
            //計算對應像素的最低灰度值並返回
            fixed minGrayCompute(v2f i,int idx) 
            {
                return Luminance(tex2D(_MainTex, i.uv[idx]));
            }
            //利用Sobel算子計算最終梯度值
            half sobel(v2f i) 
            {
                const half Gx[9] = {
                    - 1,0,1,
                    - 2,0,2,
                    - 1,0,1
                };
                const half Gy[9] = {
                    -1,-2,-1,
                     0, 0, 0,
                     1, 2, 1
                };
                //分別計算橫向和縱向的梯度值，方法為各項對應元素相乘並相加
                half graX = 0;
                half graY = 0;

                for (int it = 0; it < 9; it++) 
                {
                    graX += Gx[it] * minGrayCompute(i, it);
                    graY += Gy[it] * minGrayCompute(i, it);
                }
                //絕對值相加近似模擬最終梯度值
                return abs(graX) + abs(graY);
             }

            fixed4 frag (v2f i) : SV_Target
            {
                half gra = sobel(i);
                fixed4 col = tex2D(_MainTex, i.uv[4]);
                //利用得到的梯度值進行插值操作，其中梯度值越大，越接近邊緣的顏色
                fixed4 withEdgeColor = lerp( col, _EdgeColor, gra);
                fixed4 onlyEdgeColor = lerp( _BackgroundColor, _EdgeColor, gra);
                fixed4 color = lerp(withEdgeColor, onlyEdgeColor, _EdgeOnly);

                UNITY_APPLY_FOG(i.fogCoord, color);
                return color;
            }
            ENDCG
        }
    }
}

效果如下：