Unity3D开发之边缘检测Sobel算子的一些个人观点

 对于广大的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;
}

顶点顺序应该是从右下向左开始。我和我的一个小伙伴讨论了一个多小时后一致这么认为。这也坚定了我自己的想法。大家如果有不同见解欢迎留言交流！