Unity Shader 屏幕后处理-基于法线和深度纹理的边缘检

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

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

效果：

左图：在原图上描边的效果。右图：只显示描边的效果 左图：原效果。右图：直接对颜色图像进行边缘检测的结果

原理：

使用Roberts 算子进行边缘检测，Roberts 算子的本质就是计算左上角和右下角的差值，乘以右上角和左下角的差值，作为评估边缘的依据。按这样的方式，取对角方向的深度或法线值，比较它们之间的差值，如果超过某个阙值（可由参数控制），就认为它们之间存在一条边。

Roberts 算子

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;
    }
}

ScreenEdgeDetectNormalsAndDepth派生类代码：

using UnityEngine;

/// <summary>
// 屏幕后处理-基于法线和深度纹理的边缘检测
/// </summary>
public class ScreenEdgeDetectNormalsAndDepth : ScreenPostEffectsBase
{
    [Range(0.0f, 1.0f)]
    public float EdgesOnly = 0.0f;

    public Color EdgeColor = Color.black; // 边缘颜色

    public Color BackgroundColor = Color.white; // 背景颜色

    public float SampleDistance = 1.0f; // 控制对深度＋法线纹理采样时 ，使用的采样距离。值越大，描边越宽

    public float SensitivityDepth = 1.0f; // 深度敏感度，影响当邻域的深度值相差多少时，会被认为存在一条边界

    public float SensitivityNormals = 1.0f; // 法线敏感度，影响当邻域的法线值相差多少时，会被认为存在一条边界

    private void OnEnable()
    {
        // 要获取摄像机的深度＋法线纹理
        GetComponent<Camera>().depthTextureMode |= DepthTextureMode.DepthNormals;
    }

    // ImageEffectOpaque含义：
    // 在默认情况下 OnRenderlmage 函数会 所有的不透明和透明的 Pass 执行完毕后被调用 ，
    // 前添加 ImageEffectOpaque 属性后，可以在不透明 Pass (即渲染队列小于等于 500 Pass, 内置的 Background Geometry AlphaTest 渲染队列均在此范围内）
    // 执行完毕后立即调用该函数，而不对透明物体（渲染队列为 Transparent Pass 产生影响，
    [ImageEffectOpaque]
    private void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        if (Material != null)
        {
            Material.SetFloat("_EdgeOnly", EdgesOnly);
            Material.SetColor("_EdgeColor", EdgeColor);
            Material.SetColor("_BackgroundColor", BackgroundColor);
            Material.SetFloat("_SampleDistance", SampleDistance);
            Material.SetVector("_Sensitivity", new Vector4(SensitivityNormals, SensitivityDepth, 0.0f, 0.0f));

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

shander代码：

// 屏幕后处理-基于法线和深度纹理的边缘检测
Shader "Custom/EdgeDetectNormalsAndDepth"
{
    Properties
    {
        _MainTex ("Base (RGB)", 2D) = "white" { }
        _EdgeOnly ("Edge Only", Float) = 1.0
        _EdgeColor ("Edge Color", Color) = (0, 0, 0, 1)
        _BackgroundColor ("Background Color", Color) = (1, 1, 1, 1)
        _SampleDistance ("Sample Distance", Float) = 1.0
        _Sensitivity ("Sensitivity", Vector) = (1, 1, 1, 1)
    }
    SubShader
    {
        CGINCLUDE
        
        #include "UnityCG.cginc"
        
        sampler2D _MainTex;
        half4 _MainTex_TexelSize;
        fixed _EdgeOnly;
        fixed4 _EdgeColor;
        fixed4 _BackgroundColor;
        float _SampleDistance;
        half4 _Sensitivity;
        
        sampler2D _CameraDepthNormalsTexture; // 深度＋法线纹理
        
        struct v2f
        {
            float4 pos: SV_POSITION;
            half2 uv[5]: TEXCOORD0;
        };
        
        v2f vert(appdata_img v)
        {
            v2f o;
            o.pos = UnityObjectToClipPos(v.vertex);
            
            half2 uv = v.texcoord;
            o.uv[0] = uv;
            
            // 下面要对这个纹理坐标进行平台差异化处理，因为OpenGL，(0, 0)点对应了屏幕的左下角，DirectX中对应了屏幕左上角
            // 大多数时候这都无关紧要，除了渲染到渲染纹理时。在此情况下，Unity 渲染到 Direct3D 上的纹理时，会自动在内部翻转渲染，以便平台之间的惯例匹配。
            // 如果我们做的屏幕后期特效简单（一次处理一个纹理），这无关紧要，因为 Graphics.Blit 方法会自动进行处理。
            // 然而，如果在屏幕后期特效中同时处理一个以上的 RenderTexture，它们很可能会在不同的垂直方向出现（仅在类似 Direct3D 的平台上，并且仅在使用抗锯齿选项时）
            
            // UNITY_UV_STARTS_AT_TOP，纹理的坐标系原点在纹理顶部的平台上值：Direct3D类似平台是1；OpenGL类似平台是0
            #if UNITY_UV_STARTS_AT_TOP
                // 在Direct3D平台下，如果我们开启了抗锯齿，则xxx_TexelSize.y 会变成负值，好让我们能够正确的进行采样。
                // 所以if (_MainTex_TexelSize.y < 0)的作用就是判断我们当前是否开启了抗锯齿。
                if (_MainTex_TexelSize.y < 0)
                    uv.y = 1 - uv.y;
            #endif
            
            // 存储了使用 Roberts 算子时需要采样的纹理坐标
            o.uv[1] = uv + _MainTex_TexelSize.xy * half2(1, 1) * _SampleDistance;
            o.uv[2] = uv + _MainTex_TexelSize.xy * half2(-1, -1) * _SampleDistance;
            o.uv[3] = uv + _MainTex_TexelSize.xy * half2(-1, 1) * _SampleDistance;
            o.uv[4] = uv + _MainTex_TexelSize.xy * half2(1, -1) * _SampleDistance;
            
            return o;
        }
        
        // 计算对角线上两个纹理值的差值，返回0表明这两点之间存在一条边界，反之则返回1
        half CheckSame(half4 center, half4 sample)
        {
            // 获取两个采样点的法线和深度值
            // 这里并没有解码得到真正的法线值 而是直接使用了 xy 分量，是因为只需要比较两个采样值之间的差异度，
            // 而并不需要知道它们真正的法线值。
            half2 centerNormal = center.xy;
            float centerDepth = DecodeFloatRG(center.zw);
            half2 sampleNormal = sample.xy;
            float sampleDepth = DecodeFloatRG(sample.zw);
            
            // 把两个采样点的对应值相减并取绝对值，再乘以灵敏度参数，把差异值的每个分量相加再和一个阙值比较，
            // 如果它们的和小于阈值， 则返回1, 说明差异不明显，不存在一条边界；否则返回0，说明存在一条边界。
            half2 diffNormal = abs(centerNormal - sampleNormal) * _Sensitivity.x;
            int isSameNormal = (diffNormal.x + diffNormal.y) < 0.1;
            float diffDepth = abs(centerDepth - sampleDepth) * _Sensitivity.y;
            int isSameDepth = diffDepth < 0.1 * centerDepth;
            
            // 最后， 把法线和深度的检查结果相乘，作为组合后的返回值。
            return isSameNormal * isSameDepth ? 1.0: 0.0;
        }

        fixed4 fragRobertsCrossDepthAndNormal(v2f i): SV_Target
        {
            half4 sample1 = tex2D(_CameraDepthNormalsTexture, i.uv[1]);
            half4 sample2 = tex2D(_CameraDepthNormalsTexture, i.uv[2]);
            half4 sample3 = tex2D(_CameraDepthNormalsTexture, i.uv[3]);
            half4 sample4 = tex2D(_CameraDepthNormalsTexture, i.uv[4]);
            
            half edge = 1.0;
            
            edge *= CheckSame(sample1, sample2);
            edge *= CheckSame(sample3, sample4);
            
            fixed4 withEdgeColor = lerp(_EdgeColor, tex2D(_MainTex, i.uv[0]), edge);
            fixed4 onlyEdgeColor = lerp(_EdgeColor, _BackgroundColor, edge);
            
            return lerp(withEdgeColor, onlyEdgeColor, _EdgeOnly);
        }

        ENDCG

        Pass
        {
            ZTest Always Cull Off ZWrite Off

            CGPROGRAM

            #pragma vertex vert
            #pragma fragment fragRobertsCrossDepthAndNormal

            ENDCG

        }
    }

    Fallback Off
}