Unity Shader 屏幕后处理-边缘检测

Unity Shader系列文章：Unity Shader目录-初级篇

Unity Shader系列文章：Unity Shader目录-中级篇

效果：

边缘效果1 边缘效果2

原理：

利用一些边缘检测算子对图像进行卷积 (convolution) 操作。

在图像处理中，卷积操作指的就是使用一个卷积核 (kernel) 对一张图像中的每个像素进行一系列操作。卷积核通常是一个四方形网格结构（例如 2x2 3x3 的方形区域），该区域内每个方格都有一个权重值。当对图像中的某个像素进行卷积时，我们会把卷积核的中心放置于该像素上，翻转核之后再依次计算核中每个元素和其覆盖的阳像像素值的乘积并求和，得到的结果就是该位置的新像素值。

如上图，使用—个 3x3 大小的卷积核对一张 心大小的图像进行卷积操作，当计算钜中红色方块对应的像素的卷积结果时，我们首先把卷积核的中心放置在该像素位置，翻转核之后再依次计算核中每个元素和其覆盖的图像像素值的乘积并求和，得到新的像素值。

如何使用卷积核进行边缘检测呢。如果相邻像素之间存在差别明显的颜色、亮度、纹理等属性，我们就会认为它们之间应该有一条边界。这种相邻像素之间的差值可以用梯度 (gradient) 来表示。边缘处的梯度绝对值会比较大。基于这样的理解，有几种常见的边缘检测算子被先后提出来：

三种常见的边缘检测算子

都包含了两个方向的卷积核，分别用 于检测水平方向和竖直方向上的边缘信息。在进行边缘检测时，我们需要对每个像素分别进行一次卷积计算，得到两个方向上的梯度值 Gx Gy, 而整体的梯度可按下面的公式计算而得：

由于上述计算包含了开根号操作，出于性能的考虑，我们有时会使用绝对值操作来代替开根号操作：

当得到梯度 后，我们就可以据此来判断哪些像素对应了边缘（梯度值越大，越有可能是边缘点）。

ScreenPostEffectsBase基类代码：

using UnityEngine;

/// <summary>
/// 屏幕后处理效果基类
/// </summary>
[ExecuteInEditMode]
[RequireComponent(typeof(Camera))]
public class ScreenPostEffectsBase : MonoBehaviour
{
    public Shader Shader;
    public Material Material
    {
        get
        {
            return CheckAndCreateMaterial();
        }
    }
    private Material _material;

    protected void Start()
    {
        CheckResources();
    }

    /// <summary>
    /// 检查资源
    /// </summary>
    protected void CheckResources()
    {
        if (!CheckSupport())
        {
            NotSupported();
        }
    }

    /// <summary>
    /// 检查支持
    /// </summary>
    /// <returns></returns>
    protected bool CheckSupport()
    {
        bool isSupported = SystemInfo.supportsImageEffects;
        return isSupported;
    }

    /// <summary>
    /// 不支持
    /// </summary>
    protected void NotSupported()
    {
        enabled = false;
    }

    /// <summary>
    /// 检查和创建Material
    /// </summary>
    /// <returns></returns>
    protected Material CheckAndCreateMaterial()
    {
        if (!Shader || !Shader.isSupported)
        {
            return null;
        }

        if (_material && _material.shader == Shader)
        {
            return _material;
        }

        _material = new Material(Shader);
        _material.hideFlags = HideFlags.DontSave;
        return _material;
    }
}

ScreenEdgeDetection派生类代码：

using UnityEngine;

/// <summary>
/// 屏幕效果：边缘检测
/// </summary>
public class ScreenEdgeDetection : ScreenPostEffectsBase
{
    [Range(0, 1)]
    public float EdgeOnly = 0;

    public Color EdgeColor = Color.black;

    public Color BackgroundColor = Color.white;

    private void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        if (Material)
        {
            Material.SetFloat("_EdgeOnly", EdgeOnly);
            Material.SetColor("_EdgeColor", EdgeColor);
            Material.SetColor("_BackgroundColod", BackgroundColor);

            Graphics.Blit(src, dest, Material);
        }
        else
        {
            Graphics.Blit(src, dest);
        }
    }
}

Shader代码：

// 边缘检测
Shader "Custom/EdgeDetection"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" { }
        _EdgeOnly ("EdgeOnly", Float) = 1 // 边缘线强度
        _EdgeColor ("EdgeColor", Color) = (0, 0, 0, 1) // 边缘颜色
        _BackgroundColor ("BackgroundColor", Color) = (1, 1, 1, 1) // 背景颜色
    }

    SubShader
    {
        Pass
        {
            ZTest Always Cull Off ZWrite Off

            CGPROGRAM

            #include "UnityCG.cginc"

            #pragma vertex vert
            #pragma fragment fragSobel

            sampler2D _MainTex;
            // _MainTex纹理的纹素大小，例如521x512大小的纹理，值约为0.001953，即1/512
            uniform half4 _MainTex_TexelSize;
            fixed _EdgeOnly;
            fixed4 _EdgeColor;
            fixed4 _BackgroundColor;

            // 顶点着色器传递给片元着色器的数据
            struct v2f
            {
                float4 pos: SV_POSITION; // 裁剪空间下的顶点坐标
                half2 uv[9]: TEXCOORD0; // 9维数组，对应了使用Sobel算子采样时需要的9个邻域纹理坐标
            };

            // 顶点着色器函数
            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];
                }

                // edge越小，越可能是一个边缘点
                half edge = 1 - abs(edgeX) - abs(edgeY);
                return edge;
            }

            // 片元着色器函数
            fixed4 fragSobel(v2f i): SV_Target
            {
                // 用Sobel算子，计算当前像素的梯度值
                half edge = Sobel(i);

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

            ENDCG

        }
    }
    FallBack Off
}