Unity Shader 学习笔记（27）渲染轮廓线（描边）方法、卡通风格渲染、素描风格渲染_unity 轮廓描边

Unity Shader 学习笔记（27）渲染轮廓线（描边）方法、卡通风格渲染、素描风格渲染

参考书籍：《Unity Shader 入门精要》

渲染轮廓线（描边）

五种方法：

• 基于观察角度和表面法线。即视角方向和表面法线点乘结果判断（接近0，表示面接近垂直与视角）。
• 过程式几何。两个Pass：第一个Pass渲染背面并且让轮廓可见（顶点外扩）；第二个Pass正常渲染正面。适应于大多数表面平滑的模型，不适合立方体等平整模型。
• 基于图像处理。前面两种边缘检测就是了：直接用算子判断和使用深度和法线纹理。但如果一些深度和法线变化很小的无法检测出来，如桌子上一张纸。
• 基于轮廓边。检测方法：相邻两个三角是否一个面向视角，另一个背向视角，就是边。即 (n₀·v > 0) ≠ (n₁·v > 0)。 缺点是轮廓是逐帧单独提取的，帧与帧之间会出现跳跃性。
• 混合上述方法。首先找到轮廓线（方法4），把模型和轮廓边渲染到纹理中，再使用图像处理识别轮廓线（方法3），在图像空间进行风格化渲染。

卡通风格渲染

使用描边方法2，以及卡通风格的高光反射光照模型实现。
描边注意：在背面顶点扩展时，可能有正面的面，这时会出错。可想象一个半实心球，内部有个面向视角的面，顶点外扩时，内部的面会超出外表面，遮挡了外表面。解决办法是先让背面法线z值减0.5再归一化（背面压扁）。
高光实现：镜面反射使用Blinn模型，计算(n·h)时，做阈值比较，小于的就是高光部分。

Shader "Custom/Chapter 14/Toon Shading" {
	Properties {
		_Color ("Color Tint", Color) = (1, 1, 1, 1)
		_MainTex ("Main Tex", 2D) = "white" {}
		_Ramp ("Ramp Texture", 2D) = "white" {}						// 漫反射渐变纹理
		_Outline ("Outline", Range(0, 1)) = 0.1						// 轮廓线宽度
		_OutlineColor ("Outline Color", Color) = (0, 0, 0, 1)		// 轮廓线颜色
		_Specular ("Specular", Color) = (1, 1, 1, 1)
		_SpecularScale ("Specular Scale", Range(0, 0.1)) = 0.01		// 高光反射的阈值
	}
    SubShader {
		Tags { "RenderType"="Opaque" "Queue"="Geometry"}
		
		// 第一个Pass，延展背面顶点，实现描边。
		Pass {
			NAME "OUTLINE"
			Cull Front		// 剔除正面，只渲染正面
			...
			
			v2f vert (a2v v) {
				v2f o;
				
				// 顶点和法线变换到视角空间下，让描边可以在观察空间达到最好的效果
				float4 pos = mul(UNITY_MATRIX_MV, v.vertex); 
				float3 normal = mul((float3x3)UNITY_MATRIX_IT_MV, v.normal);  
				normal.z = -0.5;	// 让法线向视角方向外扩，避免物体有背面遮挡正面
				pos = pos + float4(normalize(normal), 0) * _Outline;		//对外扩展，出现轮廓
				o.pos = mul(UNITY_MATRIX_P, pos);
				
				return o;
			}
			...
		}
		
		// 第二个Pass，基于Blinn光照模型，使用自定义高光光照模型，实现高光。
		Pass {
			Tags { "LightMode"="ForwardBase" }
			Cull Back
			...
			
			float4 frag(v2f i) : SV_Target { 
				...
				
				fixed spec = dot(worldNormal, worldHalfDir);

				// 高光区域抗锯齿操作，fwidth：邻域像素的近似导数。
				fixed w = fwidth(spec) * 2.0;		

				// _SpecularScale为0会完全消除高光反射，smoothstep：小于-w为0，大于w为1，否则在0到1之间插值。
				fixed3 specular = _Specular.rgb * lerp(0, 1, smoothstep(-w, w, spec + _SpecularScale - 1)) * step(0.0001, _SpecularScale);	  
				
				return fixed4(ambient + diffuse + specular, 1.0);
			}
		
			ENDCG
		}
	}
	FallBack "Diffuse"
}

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

素描风格渲染

通过判断不同光照下漫反射值，使用不同的渲染纹理。纹理组成一个色调艺术映射（Tonal Art Map, TAM）。

// 素描风格
Shader "Custom/Chapter 14/Hatching" {
	Properties {
		_Color ("Color Tint", Color) = (1, 1, 1, 1)
		_TileFactor ("Tile Factor", Float) = 1	// 平铺系数
		_Outline ("Outline", Range(0, 1)) = 0.1
		_Hatch0 ("Hatch 0", 2D) = "white" {}	// 6张素描纹理，模拟不同阴影使用的纹理
		_Hatch1 ("Hatch 1", 2D) = "white" {}
		_Hatch2 ("Hatch 2", 2D) = "white" {}
		_Hatch3 ("Hatch 3", 2D) = "white" {}
		_Hatch4 ("Hatch 4", 2D) = "white" {}
		_Hatch5 ("Hatch 5", 2D) = "white" {}
	}
	
	SubShader {
		Tags { "RenderType"="Opaque" "Queue"="Geometry"}
		
		UsePass "Custom/Chapter 14/Toon Shading/OUTLINE"	// 使用前面的描边渲染Pass
		
		Pass {
			...
			
			struct v2f {
				float4 pos : SV_POSITION;
				float2 uv : TEXCOORD0;
				fixed3 hatchWeights0 : TEXCOORD1;	// 6张纹理存在两个fixed3中
				fixed3 hatchWeights1 : TEXCOORD2;
				float3 worldPos : TEXCOORD3;
				SHADOW_COORDS(4)
			};
			
			v2f vert(a2v v) {
				...
				
				o.hatchWeights0 = fixed3(0, 0, 0);
				o.hatchWeights1 = fixed3(0, 0, 0);
				
				float hatchFactor = diff * 7.0;	// 放大7倍，便于分成7块，混合权重。
				
				if (hatchFactor > 6.0) {
					// 纯白
				} else if (hatchFactor > 5.0) {
					o.hatchWeights0.x = hatchFactor - 5.0;
				} else if (hatchFactor > 4.0) {
					o.hatchWeights0.x = hatchFactor - 4.0;
					o.hatchWeights0.y = 1.0 - o.hatchWeights0.x;
				} else if (hatchFactor > 3.0) {
					o.hatchWeights0.y = hatchFactor - 3.0;
					o.hatchWeights0.z = 1.0 - o.hatchWeights0.y;
				} else if (hatchFactor > 2.0) {
					o.hatchWeights0.z = hatchFactor - 2.0;
					o.hatchWeights1.x = 1.0 - o.hatchWeights0.z;
				} else if (hatchFactor > 1.0) {
					o.hatchWeights1.x = hatchFactor - 1.0;
					o.hatchWeights1.y = 1.0 - o.hatchWeights1.x;
				} else {
					o.hatchWeights1.y = hatchFactor;
					o.hatchWeights1.z = 1.0 - o.hatchWeights1.y;
				}
				
				o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
				
				TRANSFER_SHADOW(o);
				
				return o; 
			}
			
			fixed4 frag(v2f i) : SV_Target {			
				fixed4 hatchTex0 = tex2D(_Hatch0, i.uv) * i.hatchWeights0.x;
				fixed4 hatchTex1 = tex2D(_Hatch1, i.uv) * i.hatchWeights0.y;
				fixed4 hatchTex2 = tex2D(_Hatch2, i.uv) * i.hatchWeights0.z;
				fixed4 hatchTex3 = tex2D(_Hatch3, i.uv) * i.hatchWeights1.x;
				fixed4 hatchTex4 = tex2D(_Hatch4, i.uv) * i.hatchWeights1.y;
				fixed4 hatchTex5 = tex2D(_Hatch5, i.uv) * i.hatchWeights1.z;
				// 全白和最浅的纹理混合。
				fixed4 whiteColor = fixed4(1, 1, 1, 1) * (1 - i.hatchWeights0.x - i.hatchWeights0.y - i.hatchWeights0.z - 
							i.hatchWeights1.x - i.hatchWeights1.y - i.hatchWeights1.z);
				
				fixed4 hatchColor = hatchTex0 + hatchTex1 + hatchTex2 + hatchTex3 + hatchTex4 + hatchTex5 + whiteColor;
				
				UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);
								
				return fixed4(hatchColor.rgb * _Color.rgb * atten, 1.0);
			}
			ENDCG
		}
	}
	FallBack "Diffuse"
}

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