本文同时发布在我的个人博客上：https://dragon_boy.gitee.io
卡通风格渲染
渲染轮廓线
- 基于观察角度和表面法线的轮廓线渲染：使用视角方向和表面法线的点乘结果来得到轮廓线的信息。
- 过程式几何轮廓线渲染。使用两个Pass，第一个Pass渲染背面的面片，并使用某些技术让它的轮廓可见；第二个Pass再正常渲染正面的面片。适用于平滑模型。
- 基于图像处理的轮廓线渲染：即之前的边缘检测。
- 基于轮廓边检测得轮廓线渲染：我们可以检测出精确得轮廓边，然后直接渲染它们。检测一条边是否是轮廓边的公式如下：
其中，和分别表示两个相邻三角面片的法线，是视角到该边上任意顶点的方向。上述公式的本质在于检查两个相邻的三角面片是否一个面朝正面、一个朝背面。
- 最后一种是混合方法，如首先找到精确的轮廓边，把模型和轮廓边渲染到纹理中，再使用图像处理的方法识别出轮廓线，并在图像空间中进行风格化渲染。
这里介绍过程式几何轮廓线渲染。我们在第一个Pass使用轮廓线颜色渲染整个背面的面片，并在视角空间下把模型顶点沿着法线方向向外扩张一段距离，以此让背部轮廓线可见，代码如下：
viewPos = viewPos + viewNormal * _Outline;
但如果直接使用顶点法线进行扩展，对于一些内凹的模型，就可能发生背面面片遮挡正面面片的情况。为了尽可能防止这种情况发生，在扩张背面顶点之前，我们首先对顶点法线的z分量进行处理，使它们等于一个定值，然后把法线归一化后再对顶点进行扩张，代码如下：
viewNormal.z = -0.5;
viewNormal = normalize(viewNormal);
viewPos = viewPos + viewNormal * _Outline;
添加高光
卡通渲染中，高光不需要渐变感，所以我们使用一个阈值比较，将点积结果与阈值比较，判断该区域的颜色是1还是0：
float spec = dot(worldNormal, worldHalfDir);
spec = step(threshold, spec);
当上述方法高光边缘锯齿感严重，我们可以对边缘平滑处理：
float spec = dot(worldNormal, worldHalfDir);
spec = lerp(0,1,smoothstep(-w,w,spec-threshold));
smoothstep第三个参数如果小于-w，则返回0，大于w返回1，在这之间，则在0到1之间进行插值。
实现
Shader代码如下：
Shader "Unlit/ToonShading"
{
Properties
{
_Color ("Color Tint", Color) = (1,1,1,1)
_MainTex ("Texture", 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" }
LOD 100
Pass
{
NAME "OUTLINE"
Cull Front
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float3 normal : NORMAL;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 pos : SV_POSITION;
};
float _Outline;
float4 _OutlineColor;
v2f vert (appdata 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;
}
fixed4 frag(v2f i) : SV_Target
{
fixed4 col = _OutlineColor;
return col;
}
ENDCG
}
Pass
{
Tags {"LightMode" = "ForwardBase"}
Cull Back
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile_fwdbase
#include "UnityCG.cginc"
#include "AutoLight.cginc"
#include "Lighting.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
float3 normal : NORMAL;
};
struct v2f
{
float4 pos : POSITION;
float2 uv : TEXCOORD0;
float3 worldNormal : TEXCOORD1;
float3 worldPos : TEXCOORD2;
SHADOW_COORDS(3)
};
sampler2D _MainTex;
float4 _MainTex_ST;
float4 _Color;
sampler2D _Ramp;
float4 _Ramp_ST;
float4 _Specular;
float _SpecularScale;
v2f vert(appdata v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.worldNormal = mul(v.normal, (float3x3)unity_WorldToObject);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
TRANSFER_SHADOW(o);
return o;
}
float4 frag(v2f i) : SV_Target
{
float3 worldNormal = normalize(i.worldNormal);
float3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
float3 worldViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
float3 worldHalfDir = normalize(worldLightDir + worldViewDir);
float4 c = tex2D(_MainTex, i.uv);
float3 albedo = c.rgb * _Color.rgb;
float3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);
float diff = dot(worldNormal, worldLightDir);
diff = (diff * 0.5 + 0.5) * atten;
float3 diffuse = _LightColor0.rgb * albedo * tex2D(_Ramp, float2(diff, diff)).rgb;
float spec = dot(worldNormal, worldHalfDir);
float w = fwidth(spec) * 2.0;
float3 specular = _Specular.rgb * lerp(0, 1, smoothstep(-w, w, spec + _SpecularScale - 1)) * step(0.0001, _SpecularScale);
return float4(ambient + diffuse + specular, 1.0);
}
ENDCG
}
}
Fallback "Diffuse"
}
效果如下：
素描风格渲染
素描风格渲染使用了mipmaps技术，需要准备多张渐变素描纹理。Shader代码如下：
Shader "Unlit/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" {}
_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"}
LOD 100
UsePass "Unlit/ToonShading/OUTLINE"
Pass
{
Tags {"LightMode" = "ForwardBase"}
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile_fwdbase
#include "UnityCG.cginc"
#include "AutoLight.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
float3 normal : NORMAL;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 pos : SV_POSITION;
float3 hatchWeights0 : TEXCOORD1;
float3 hatchWeights1 : TEXCOORD2;
float3 worldPos : TEXCOORD3;
SHADOW_COORDS(4)
};
float4 _Color;
float _TileFactor;
float _Outline;
sampler2D _Hatch0;
sampler2D _Hatch1;
sampler2D _Hatch2;
sampler2D _Hatch3;
sampler2D _Hatch4;
sampler2D _Hatch5;
v2f vert (appdata v)
{
v2f o;
o.pos= UnityObjectToClipPos(v.vertex);
o.uv = v.uv * _TileFactor;
float3 worldLightDir = normalize(WorldSpaceLightDir(v.vertex));
float3 worldNormal = UnityObjectToWorldNormal(v.normal);
float diff = max(0, dot(worldLightDir, worldNormal));
o.hatchWeights0 = float3(0, 0, 0);
o.hatchWeights1 = float3(0, 0, 0);
float hatchFactor = diff * 7.0;
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 - o.hatchWeights0.x;
}
else if (hatchFactor > 3.0) {
o.hatchWeights0.y = hatchFactor - 3.0;
o.hatchWeights0.z = 1 - o.hatchWeights0.y;
}
else if (hatchFactor > 2.0) {
o.hatchWeights0.z = hatchFactor - 2.0;
o.hatchWeights1.x = 1 - o.hatchWeights0.z;
}
else if (hatchFactor > 1.0) {
o.hatchWeights1.x = hatchFactor - 1.0;
o.hatchWeights1.y = 1 - o.hatchWeights0.x;
}
else {
o.hatchWeights1.y = hatchFactor;
o.hatchWeights1.z = 1 - o.hatchWeights0.y;
}
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
TRANSFER_SHADOW(o);
return o;
}
fixed4 frag(v2f i) : SV_Target
{
float4 hatchTex0 = tex2D(_Hatch0, i.uv) * i.hatchWeights0.x;
float4 hatchTex1 = tex2D(_Hatch1, i.uv) * i.hatchWeights0.y;
float4 hatchTex2 = tex2D(_Hatch2, i.uv) * i.hatchWeights0.z;
float4 hatchTex3 = tex2D(_Hatch3, i.uv) * i.hatchWeights1.x;
float4 hatchTex4 = tex2D(_Hatch4, i.uv) * i.hatchWeights1.y;
float4 hatchTex5 = tex2D(_Hatch5, i.uv) * i.hatchWeights1.z;
float4 whiteColor = float4(1, 1, 1, 1) * (1 - i.hatchWeights0.x - i.hatchWeights0.y
- i.hatchWeights0.z - i.hatchWeights1.x - i.hatchWeights1.y - i.hatchWeights1.z);
float4 hatchColor = hatchTex0 + hatchTex1 + hatchTex2 + hatchTex3 + hatchTex4 + hatchTex5 + whiteColor;
UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);
return float4(hatchColor.rgb * _Color.rgb * atten, 1.0);
}
ENDCG
}
}
Fallback "Diffuse"
}
效果如下：