UnityShader-边缘检测

UnityShader-边缘检测

卷积

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

convolution.png-15.1kB

基于像素差值的边缘判定

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

edge_detection_kernel.png-19.8kB

在进行边缘检测时，需要对每个像素分别进行一次卷积计算，得到两个方向的梯度值$$G_x$$和$$G_y$$，整体的梯度计算公式为：
$$
G = \sqrt{G_x^2 + G_y^2}
$$
出于性能考虑，有时会使用绝对值操作来代替开根号操作：
$$
G = \abs{G_x} + \abs{G_y}
$$
当得到梯度G后，可以设置一个特定的阈值，超过该阈值的像素判定为边缘；或者建立像素颜色和梯度值之间的函数映射关系，梯度值越大，像素叠加的边缘颜色越深

使用Sobel算子实现

shader的代码实现如下，有一个疑问点在于，如果像素位于图像边缘，如何计算超出图像范围的像素值，经过测试，超出的部分可能取得clamp环绕模式，原因如下：

  • 将i.uv[it] +/- dx, dx >=1时，edge = 1，即完全不影响原图，代表邻域中的像素颜色都是相同的
  • 如果是repeat模式，则边缘检测的效果应该不会发生变化

当然，另一种情况是采样的像素颜色全是非0值，但我人为上述解释的可能性更高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
Shader "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;  
			// xxx_TexcelSize是Unity提供的访问xxx纹理对应的每个纹素的大小
			// 大小为SxS的纹理的该值大约为1/S
			uniform half4 _MainTex_TexelSize;
			// 当_EdgeOnly为0时，边缘会叠加在原渲染图像上;当edgesOnly为1时，只会显示边缘，不显示原渲染图像
			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;
				
				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; 
			}
			
			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++) {
					// 超出的部分可能取得clamp环绕模式，原因如下：
					// 将i.uv[it] +/- dx, dx >=1时，edge = 1，即完全不影响原图，代表邻域中的像素颜色都是相同的
					// 如果是repeat模式，则边缘检测的效果应该不会发生变化
					texColor = luminance(tex2D(_MainTex, i.uv[it]));
					edgeX += texColor * Gx[it];
					edgeY += texColor * Gy[it];
				}
				
				// 1减去水平方向和垂直方向梯度值的绝对值，得到edge，edge越小，表明该位置越可能是一个边缘点
				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);
				// 根据EdgeOnly进行插值，以决定背景的实际颜色
				return lerp(withEdgeColor, onlyEdgeColor, _EdgeOnly);
 			}
			
			ENDCG
		} 
	}
	// 不使用其它着色器
	FallBack Off
}

挂载在脚本上的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
		}  
	}
	
	/// <summary>
	/// 当_EdgeOnly为0时，边缘会叠加在原渲染图像上;当edgesOnly为1时，只会显示边缘，不显示原渲染图像
	/// </summary>
	[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);
		}
	}
}

基于深度和法线的边缘检测

以上方法存在许多缺陷，原因在于，单纯使用颜色信息得到的边缘并不一定真的是世界空间中物体的边缘，如果某个表面上有许多色彩差异较大的色块，依然会被错误地判定为边缘

更好的解决办法是，使用深度和法线纹理进行边缘检测，这样，图像不会受到纹理和光照的影响

使用Roberts算子实现

Roberts算子的使用：计算左上角和右下角的差值，乘以右上角和左下角的差值，作为评估边缘的依据。本实现中，我们会取对角方向的深度或者法线值，比较它们之间的差值，如果超过某个阈值，就认为它们之间存在一条边

shader的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
Shader "Edge Detection Normals And Depth" {
	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;
		// 控制对深度+法线纹理采样时，使用的采样距离，sampleDistance越大，描边越宽
		float _SampleDistance;
		// x分量存放法线阈值，y分量存放深度阈值
		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;
			
			#if UNITY_UV_STARTS_AT_TOP
			if (_MainTex_TexelSize.y < 0)
				uv.y = 1 - uv.y;
			#endif
			
			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;
		}
		
		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);
			
			// difference in normals
			// do not bother decoding normals - there's no need here
			half2 diffNormal = abs(centerNormal - sampleNormal) * _Sensitivity.x;
			int isSameNormal = (diffNormal.x + diffNormal.y) < 0.1;
			// difference in depth
			float diffDepth = abs(centerDepth - sampleDepth) * _Sensitivity.y;
			// scale the required threshold by the distance
			int isSameDepth = diffDepth < 0.1 * centerDepth;
			
			// return:
			// 1 - if normals and depth are similar enough
			// 0 - otherwise
			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
}

挂载到相机上的脚本如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
using UnityEngine;
using System.Collections;

public class EdgeDetectNormalsAndDepth : 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;
	// 控制对深度+法线纹理采样时，使用的采样距离，sampleDistance越大，描边越宽
	public float sampleDistance = 1.0f;

	// 影响当邻域的深度值相差多少时，认为存在一条边界，等于0表示不受深度影响
	public float sensitivityDepth = 1.0f;
	// 影响当邻域的法线值相差多少时，认为存在一条边界，等于0表示不受法线影响
	public float sensitivityNormals = 1.0f;
	
	void OnEnable() {
		GetComponent<Camera>().depthTextureMode |= DepthTextureMode.DepthNormals;
	}

	// 声明该属性代表该函数不会对透明物体产生影响，即透明物体不会被描边
	[ImageEffectOpaque]
	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);
		}
	}
}

对特定物体的描边

如果只想对某个物体描边，可以使用Graphics.DrawMesh或者Graphics.DrawMeshNow函数把需要描边的物体再渲染一遍（在所有不透明物体渲染完毕之后），然后使用边缘检测算法计算每个像素的梯度值，判断是否小于某个阈值，如果是，则在Shader中使用clip()函数将该像素剔除掉，从而获得原来的物体颜色

Unity
#Unity #Shader #postprocess
UnityShader-边缘检测
http://example.com/2023/01/10/UnityShader-边缘检测/
作者
Chen Shuwen
发布于
2023年1月10日
许可协议