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

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
}