UnityShader-屏幕后处理之边缘检测

一、屏幕后处理原理

我的另外一篇文章有详细的介绍：
UnityShader-屏幕后处理（调节亮度，饱和度，对比度）

二、卷积与卷积核

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

 

卷积核.png

三、边缘检测原理

（1）怎么确定形成了一条边呢？

如果相邻的像素之间存在差别明显的颜色、亮度、纹理等属性，我们就会认为他们之间应该是有一条边界的，这种相邻像素之间的差值可以用梯度来表示。

（2）常见的的几种边缘检测的算子

常见的边缘检测算子.png

 

在本例子中，我们使用Sobel算子。

（3）梯度计算公式

 

通常包括两个方向的卷积核，一个是水平方向，一个是竖直方向，我们需要对每个像素进行一个卷积计算，得到两个方向的梯度值Gx和Gy。整体公式：

 

 

出于性能考虑，用绝对值代替开根号：

 

（4）代码实现

C#代码：

using UnityEngine;
using System.Collections;

public class EdgeDetection : PostEffectsBase {

    public Shader edgeDetectShader;
    private Material edgeDetectMaterial = null;
    public Material material {  
        get {
            edgeDetectMaterial = CheckShaderAndCreateMaterial(edgeDetectShader, edgeDetectMaterial);
            return edgeDetectMaterial;
        }  
    }

    [Range(0.0f, 1.0f)]
    public float edgesOnly = 0.0f;

    public Color edgeColor = Color.black;
    
    public Color backgroundColor = Color.white;

    void OnRenderImage (RenderTexture src, RenderTexture dest) {
        if (material != null) {
            material.SetFloat("_EdgeOnly", edgesOnly);
            material.SetColor("_EdgeColor", edgeColor);
            material.SetColor("_BackgroundColor", backgroundColor);

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

shader代码：

Shader "Unity Shaders Book/Chapter 12/Edge Detection" {
    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)
    }
    SubShader {
        Pass {  
            //设置渲染状态
            ZTest Always Cull Off ZWrite Off
            
            CGPROGRAM
            
            #include "UnityCG.cginc"
            
            #pragma vertex vert  
            #pragma fragment fragSobel
            
            sampler2D _MainTex;
            //_MainTex_TexelSize:xxx_TexelSize是unity为我们提供的访问xxx纹理对应每个纹素大小的变量。
            //例如，一张512x512大小的纹理，该值大约为0.001953的（即1/512）
            uniform half4 _MainTex_TexelSize;
            fixed _EdgeOnly;
            fixed4 _EdgeColor;
            fixed4 _BackgroundColor;
            
            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;
                //通过_MainTex_TexelSize.xy值，计算需要计算的矩阵的UV值
                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; 
            }
            
            //通过Sobe算子算出这个像素点与周围的梯度值
            half Sobel(v2f i) {
                //Sobe算子矩阵，分为X与Y两个方向
                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];
                }
                //用绝对值代替开根号
                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);
                fixed4 onlyEdgeColor = lerp(_EdgeColor, _BackgroundColor, edge);
                return lerp(withEdgeColor, onlyEdgeColor, _EdgeOnly);
            }
            
            ENDCG
        } 
    }
    FallBack Off
}