[Unity Shader]卡通渲染

最终效果，包含描边，明暗双色阶的渲染，边缘光。

参考来源：/column/c_1215952152252121088

卡通渲染

Back facing描边

基本思路：通过两次Pass绘制，一次绘制角色，一次绘制描边来实现轮廓线效果。描边的绘制在顶点沿着法线方向位移一段距离，使得模型轮廓放大，渲染作为描边。同时描边绘制时使用cull front。这样描边和角色重叠的部分会因为不能通过深度检测而cull掉，保证描边不会遮挡角色。

顶点着色器代码如下：

v2f vert (a2v v) {v2f o;UNITY_INITIALIZE_OUTPUT(v2f, o);float4 pos = UnityObjectToClipPos(v.vertex);float3 viewNormal = mul((float3x3)UNITY_MATRIX_IT_MV, v.normal.xyz);//将法线变换到NDC空间，这样无论摄像机拉近拉远，描边的粗细都能不变。float3 ndcNormal = normalize(TransformViewToProjection(viewNormal.xyz)) * pos.w;//将近裁剪面右上角的位置的顶点变换到观察空间float4 nearUpperRight = mul(unity_CameraInvProjection, float4(1, 1, UNITY_NEAR_CLIP_VALUE, _ProjectionParams.y));//求得屏幕宽高比，适配宽屏窗口float aspect = abs(nearUpperRight.y / nearUpperRight.x);ndcNormal.x *= aspect;//顶点色a通道控制粗细pos.xy += 0.01 * _OutlineWidth * ndcNormal.xy * v.vertColor.a;o.pos = pos;//o.vertColor = v.vertColor.rgb;return o;}

光照模型

要实现卡通渲染，需要减少色阶数量，分离冷暖色调，明暗区域分开。

我们实现一个二分明暗的光照效果，并支持分别设置明暗区域的颜色，设置暗面颜色为冷色调，和明面的色调做出区分。

使用smoothstep函数插值进行边界的柔和处理

片元着色器中的包含光照的关键代码：

half4 col = 1;half4 mainTex = tex2D(_MainTex, i.uv);half3 viewDir = normalize(_WorldSpaceCameraPos.xyz - i.worldPos.xyz);half3 worldNormal = normalize(i.worldNormal);half3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);half halfLambert = dot(worldNormal, worldLightDir) * 0.5 + 0.5;//明暗边界smoothstep函数插值进行柔和处理half ramp = smoothstep(0, _ShadowSmooth, halfLambert - _ShadowRange);half3 diffuse = lerp(_ShadowColor, _MainColor, ramp);//混合纹理图diffuse *= mainTex;

边缘光

边缘光是卡通渲染中重要的组成部分。它和描边一样都在物体的轮廓出现。卡通渲染通常饱和度比较高，描边和边缘光能够让角色从高饱和度的画面中凸显出来。

片元着色器中的加入计算边缘光的代码：

half f = 1.0 - saturate(dot(viewDir, worldNormal));half rim = smoothstep(_RimMin, _RimMax, f);//边缘光的柔和过渡rim = smoothstep(0, _RimSmooth, rim);half3 rimColor = rim * _RimColor.rgb * _RimColor.a;