卡通渲染的主要原理包含两个方面:
1.轮廓线的描边效果
2.模型漫反射离散和纯色高光区域的模拟
描边:
描边的实现方法采用将模型的轮廓线顶点向法线(或顶点)的方向扩展一定的像素得到。也可通过边缘检测(基于法线和深度)来实现。
漫反射离散:
利用离散的Ramp纹理对漫反射光照效果进行采样,可以实现不同效果梯度的卡通渲染效果,例如:
注意此纹理的灰度变化并非均匀变化,而是类似于一种突变,仅在灰度变化的交界处进行了平滑过渡。这样的Ramp纹理正是卡通渲染所需要的颜色过渡模式,也是卡通渲染实现的核心内容。
也可增加阶度的个数实现更多层次的卡通渲染效果。
纯色高光区域:
不同于真实渲染,卡通渲染的高光部分通常就是一个色块,这里主要的问题是处理高光边缘的锯齿问题。
这里可以利用smoothstep(-w,w,spec-threshold);在边缘范围[-w,w]进行平滑插值处理,其中w可以通过fwidth(spec);得到。
fwidth(spec);用于得到邻域像素的近似导数值。
Shader脚本如下,光照模型采用半兰伯特:
1 Shader "MyUnlit/CartoonShading"
2 {
3 Properties
4 {
5 _Color("Color Tint",Color)=(1,1,1,1)
6 _MainTex ("Texture", 2D) = "white" {}
7 _Ramp("Ramp Texture",2D)="white"{}
8 _Outline("Outline",Range(0,0.1))=0.02
9 _Factor("Factor of Outline",Range(0,1))=0.5
10 _OutlineColor("Outline Color",Color)=(0,0,0,1)
11 _Specular("Specular",Color)=(1,1,1,1)
12 _SpecularScale("Specular Scale",Range(0,0.1))=0.01
13 }
14 SubShader
15 {
16 Tags { "RenderType"="Opaque" }
17 //此Pass渲染描边
18 Pass
19 {
20 //命名用于之后可重复调用
21 NAME "OUTLINE"
22 //描边只用渲染背面,挤出轮廓线,所以剔除正面
23 Cull Front
24 //开启深度写入,防止物体交叠处的描边被后渲染的物体盖住
25 ZWrite On
26 CGPROGRAM
27 #pragma vertex vert
28 #pragma fragment frag
29
30 #include "UnityCG.cginc"
31
32 float _Outline;
33 float _Factor;
34 fixed4 _OutlineColor;
35
36 struct appdata
37 {
38 float4 vertex : POSITION;
39 float3 normal:NORMAL;
40 };
41
42 struct v2f
43 {
44 float4 vertex : SV_POSITION;
45 };
46
47 v2f vert (appdata v)
48 {
49 v2f o;
50 float3 pos=normalize(v.vertex.xyz);
51 float3 normal=normalize(v.normal);
52
53 //点积为了确定顶点对于几何中心的指向,判断此处的顶点是位于模型的凹处还是凸处
54 float D=dot(pos,normal);
55 //校正顶点的方向值,判断是否为轮廓线
56 pos*=sign(D);
57 //描边的朝向插值,偏向于法线方向还是顶点方向
58 pos=lerp(normal,pos,_Factor);
59 //将顶点向指定的方向挤出
60 v.vertex.xyz+=pos*_Outline;
61 o.vertex=UnityObjectToClipPos(v.vertex);
62 return o;
63 }
64
65 fixed4 frag (v2f i) : SV_Target
66 {
67 return fixed4(_OutlineColor.rgb,1);
68 }
69 ENDCG
70 }
71 //此Pass渲染卡通着色效果,主要运用半兰伯特光照模型配合渐变纹理
72 Pass
73 {
74 Tags{"LightMode"="ForwardBase"}
75 Cull Back
76 CGPROGRAM
77
78 #pragma vertex vert
79 #pragma fragment frag
80 #pragma multi_compile_fwdbase
81
82 #include "UnityCG.cginc"
83 //引入阴影相关的宏
84 #include "AutoLight.cginc"
85 //引入预设的光照变量,如_LightColor0
86 #include "Lighting.cginc"
87
88 fixed4 _Color;
89 sampler2D _MainTex;
90 sampler2D _Ramp;
91 fixed4 _Specular;
92 fixed _SpecularScale;
93 float4 _MainTex_ST;
94
95 struct appdata
96 {
97 float4 vertex:POSITION;
98 float2 uv:TEXCOORD0;
99 float3 normal:NORMAL;
100 float4 tangent:TANGENT;
101 };
102
103 struct v2f
104 {
105 float4 pos:SV_POSITION;
106 float2 uv:TEXCOORD0;
107 float3 worldNormal:TEXCOORD1;
108 float3 worldPos:TEXCOORD2;
109 SHADOW_COORDS(3)
110 };
111
112 v2f vert(appdata v)
113 {
114 v2f o;
115 o.pos=UnityObjectToClipPos(v.vertex);
116 o.uv=TRANSFORM_TEX(v.uv,_MainTex);
117 o.worldNormal=mul(v.normal,(float3x3)unity_WorldToObject);
118 o.worldPos=mul(unity_ObjectToWorld,v.vertex);
119 TRANSFER_SHADOW(o);
120
121 return o;
122 }
123
124 fixed4 frag(v2f i):SV_Target
125 {
126 fixed3 worldNormal=normalize(i.worldNormal);
127 fixed3 worldLightDir=normalize(UnityWorldSpaceLightDir(i.worldPos));
128 fixed3 worldViewDir=normalize(UnityWorldSpaceViewDir(i.worldPos));
129 fixed3 worldHalfDir=normalize(worldLightDir+worldViewDir);
130
131 //计算材质反射率
132 fixed4 c=tex2D(_MainTex,i.uv);
133 fixed3 albedo=c.rgb*_Color.rgb;
134
135 //计算环境光
136 fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz*albedo;
137
138 //处理阴影
139 UNITY_LIGHT_ATTENUATION(atten,i,i.worldPos);
140
141 //计算半兰伯特漫反射系数,亮化处理,将结果从[-1,1]映射到[0,1],以便作为渐变纹理的采样uv
142 fixed diff=dot(worldNormal,worldLightDir);
143 diff=(diff*0.5+0.5)*atten;
144
145 //卡通渲染的核心内容,对漫反射进行区域色阶的离散变化
146 fixed3 diffuse=_LightColor0.rgb*albedo*tex2D(_Ramp,float2(diff,diff)).rgb;
147
148 //计算半兰伯特高光系数,并将高光边缘的过渡进行抗锯齿处理,系数越大,过渡越明显
149 fixed spec=dot(worldNormal,worldHalfDir);
150 fixed w=fwidth(spec)*3.0;
151
152 //计算高光,在[-w,w]范围内平滑插值
153 fixed3 specular=_Specular.rgb*smoothstep(-w,w,spec-(1-_SpecularScale))*step(0.0001,_SpecularScale);
154
155 return fixed4(ambient+diffuse+specular,1.0);
156 }
157 ENDCG
158 }
159 }
160 FallBack "Diffuse"
161 }
效果如下: