Unity Shader 学习笔记（20） 卷积、卷积核、边缘检测算子、边缘检测

参考书籍：《Unity Shader 入门精要》
书中算子Bug
Unity Shader 学习笔记（26） 边缘检测（深度和法线纹理）
彻底理解数字图像处理中的卷积-以Sobel算子为例
图像卷积与滤波的一些知识点
WIKI : Kernel
在定义卷积时为什么要对其中一个函数进行翻转？

---

卷积（convolution）、卷积核（kernel）

• 卷积：使用卷积核对图像每一个像素进行操作。
• 卷积核： 四方形网格结构，每个方格都有一个权重值。也称边缘检测算子。

对图像某个像素卷积时，把卷积核中心放置在像素上，翻转核（水平翻转+竖直翻转），依次计算每个元素和重合像素的乘积并求和，得到新的像素值。

边缘检测算子

即用于边缘检测的卷积核。判断边缘可以是颜色、亮度、纹理等变换差异大小，也就是判断相邻像素之间的差值（梯度，gradient）。Gx表示检测水平方向的变化梯度，得出竖直方向的边缘线。

每次卷积得到两个方向上的梯度值Gx和Gy，整体梯度值：G = | Gx | + | Gy |。

---

边缘检测

使用Sobel算子进行边缘检测。

Edges Only从0变化到1：

EdgeDetection类，主要是作为变量的输入：

public class EdgeDetection : PostEffectsBase{    [Range(0.0f, 1.0f)]    public float edgesOnly = 0.0f;              // 1为只显示边缘    public Color edgeColor = Color.black;       // 边缘色    public Color backgroundColor = Color.white; // 背景色    void OnRenderImage(RenderTexture src, RenderTexture dest)    {        if (TargetMaterial != null)        {            TargetMaterial.SetFloat("_EdgeOnly", edgesOnly);            TargetMaterial.SetColor("_EdgeColor", edgeColor);            TargetMaterial.SetColor("_BackgroundColor", backgroundColor);        }        Graphics.Blit(src, dest, TargetMaterial);    }}

Shader：

Properties {    _MainTex ("Base (RGB)", 2D) = "white" {}    _EdgeOnly ("Edge Only", Float) = 1.0                // 0：只加边缘，1：只显示边缘，不显示原图    _EdgeColor ("Edge Color", Color) = (0, 0, 0, 1)    _BackgroundColor ("Background Color", Color) = (1, 1, 1, 1)}

Pass {      ...     struct v2f {        float4 pos : SV_POSITION;        half2 uv[9] : TEXCOORD0;    // 对应周围（包括中心）像素纹理坐标    };    v2f vert(appdata_img v) {        v2f o;        o.pos = UnityObjectToClipPos(v.vertex);        half2 uv = v.texcoord;        o.uv[0] = uv + _MainTex_TexelSize.xy * half2(-1, -1);        o.uv[1] = uv + _MainTex_TexelSize.xy * half2(0, -1);        o.uv[2] = uv + _MainTex_TexelSize.xy * half2(1, -1);        o.uv[3] = uv + _MainTex_TexelSize.xy * half2(-1, 0);        o.uv[4] = uv + _MainTex_TexelSize.xy * half2(0, 0);        o.uv[5] = uv + _MainTex_TexelSize.xy * half2(1, 0);        o.uv[6] = uv + _MainTex_TexelSize.xy * half2(-1, 1);        o.uv[7] = uv + _MainTex_TexelSize.xy * half2(0, 1);        o.uv[8] = uv + _MainTex_TexelSize.xy * half2(1, 1);        return o;    }    // 亮度    fixed luminance(fixed4 color) {        return  0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b;     }    // 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 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];        }        // XY越大，最后结果越小，越可能是边缘点        half edge = 1 - abs(edgeX) - abs(edgeY);        return edge;    }    fixed4 fragSobel(v2f i) : SV_Target {        half edge = Sobel(i);        fixed4 withEdgeColor = lerp(_EdgeColor, tex2D(_MainTex, i.uv[4]), edge);    // 混合边缘颜色和原图颜色，edge越小，越判定为边缘        fixed4 onlyEdgeColor = lerp(_EdgeColor, _BackgroundColor, edge);            // 混合边缘颜色和背景颜色。        return lerp(withEdgeColor, onlyEdgeColor, _EdgeOnly);                       // 原图混合还是混合背景颜色的插值。        }    ENDCG}