Unity制作二次元材质角色
回到目录
大家好，我是阿赵。
这里继续讲二次元角色渲染。之前说过，最基本的卡通渲染，包含了色阶化光影和描边二个元素。所以这里先来说一下色阶化光影的多种做法对比。
一、光照模型和色阶化的说明
从上一篇文章里面可以知道，这个模型提供了2套贴图，分别是baseMap和sssMap
baseMap
sssMap
这两张贴图的作用，很明显作为亮部和暗部显示用的。
那么需要怎样使用这两张贴图呢？
其实很简单，还是自定义光照模型。我之前写过文章介绍怎样自己写光照模型。然后我之后做了很多例子，如果各位如果有留意看，估计也发现，自定义光照模型是很多效果的基础。
这里我也同样的先做一个HalfLambert漫反射光照：
//获取HalfLambert漫反射值
float GetHalfLambertDiffuse(float3 worldPos, float3 worldNormal)
{
float3 lightDir = UnityWorldSpaceLightDir(worldPos);
float NDotL = dot(worldNormal, lightDir);
float halfVal = NDotL * 0.5 + 0.5;
return halfVal;
}
half4 frag (v2f i) : SV_Target
{
half4 col = tex2D(_BaseMap, i.uv);
half4 sssCol = tex2D(_SSSMap, i.uv);
half halfLambert = GetHalfLambertDiffuse(i.worldPos, i.worldNormal);
half3 finalRGB = col.rgb*halfLambert + sssCol * (1 - halfLambert);
half alpha = col.a;
return half4(finalRGB,alpha);
}
这个时候，通过获取漫反射的光照值来混合baseMap和sssMap，会得到这种效果。
不过这只是正常普通的HalfLambert光照效果，在卡通渲染里面，因为是模拟漫画的涂色方式，光影之间一般来说会有一个硬边的过渡，比如：
这种情况，我们会称为色阶化。意思就是，把一个渐变过渡的光影效果，变成了一段一段色阶的跳跃性过渡。
二、实现色阶化的多种手段介绍
做色阶化的方法比较多，比如：
1、通过一个色阶图去采样
这个方法需要准备一张色阶图：
然后通过光照模型的值作为x坐标去采样这张贴图
half4 frag (v2f i) : SV_Target
{
//色阶化
half halfLambert = GetHalfLambertDiffuse(i.worldPos, i.worldNormal);
half4 GradationCol = tex2D(_GradationMap, float2(halfLambert, 0.5));
return GradationCol;
}
会得到这个效果：
可以看出，刚才的色阶图的三个颜色都出现在模型身上了，而且三段颜色的占比，可以通过调节色阶图的颜色范围来控制。
接下来可以把这个色阶图的采样结果，和baseMap做一个混合，就得到了：
half4 frag (v2f i) : SV_Target
{
half4 col = tex2D(_BaseMap, i.uv);
half4 sssCol = tex2D(_SSSMap, i.uv);//色阶化
half halfLambert = GetHalfLambertDiffuse(i.worldPos, i.worldNormal);
half4 GradationCol = tex2D(_GradationMap, float2(halfLambert, 0.5));half3 finalRGB = col.rgb*GradationCol+ sssCol*(1- GradationCol);
half alpha = col.a;
return half4(finalRGB,alpha);
}
先忽略脸部，之后我会有专门的一篇文章讲脸部的问题。看一下身体的部分，可以看出现在的影子已经变成了色阶化了。
色阶图的做法的好处是，喜欢多少段色阶影子都可以，可以通过调整色阶图来控制影子的深浅和范围。
2、使用渐变图做色阶
色阶图其实也有缺点，如果想做到某些部位的色阶化强烈一点，某些部位的色阶化弱一点，其实是很难做到的。
所以出现了另外一种色阶图的做法，是渐变的
可以看出，这张渐变图下面是硬过渡，上面是软过渡，如果我们采样的时候，可以不同部位控制采样uv的y轴不一样，那么得到的软硬过渡程度也可以不一样。代码的写法和上面的色阶图是一样的，只是采样uv的y坐标不一样，所以就不重复写一遍了，只说一下原理。
那么怎样去控制UV坐标的y轴呢？方法很多，给一张专门的贴图去控制，或者直接用顶点颜色的某个通道去控制，都可以。
一般会使用顶点颜色去控制，配合着实时编辑顶点颜色的工具，可以比较快速的看到效果的改变。
3、使用step函数
不使用其他贴图，而是用step函数，也能实现色阶化：
half4 frag (v2f i) : SV_Target
{
//色阶化
half halfLambert = GetHalfLambertDiffuse(i.worldPos, i.worldNormal);
half toonVal = step(0, halfLambert- _stepVal);
return half4(toonVal.xxx,1);
}
加上了baseMap和sssMap的混合，效果就是：
step的做法，好处是简单，不需要额外的贴图资源，直接用一个变量就能控制阴影的范围。
4、使用smoothstep函数
step函数的做法是很简单的，但有一个缺点，不能控制阴影边缘的软硬程度
所以可以使用smoothstep函数来替代step函数，这样就可以控制阴影的软硬程度
half4 frag (v2f i) : SV_Target
{
//色阶化
half halfLambert = GetHalfLambertDiffuse(i.worldPos, i.worldNormal);
half toonVal = smoothstep(_GradationMin, _GradationMax, halfLambert);
return half4(toonVal.xxx,1);
}
可以看到，在使用smoothstep函数之后，通过控制smoothstep的最大值和最小值的参数，我们实现了不同部位的影子过渡程度不一样的效果了，甚至可以在某些部位减弱影子的效果。
混合了baseMap和sssMap，就是这种效果：
做色阶化的方法很多，可以自己再发散一下思维。已经列举出的几种方式，综合评价了一下，我觉得用smoothstep函数的方法会比较容易实现，容易控制，然后效果也还不错。所以我在这个例子里面最终是使用了smoothstep函数的方法来做色阶化光影的。
三、完整Shader
Shader "azhao/ToonBodyBase"
{Properties{_BaseMap ("BaseMap", 2D) = "white" {}_SSSMap("SSSMap", 2D) = "white" {}_GradationMin("GradationMin",Range(0.0,1.0)) = 0.0_GradationMax("GradationMax",Range(0.0,1.0)) = 1.0}SubShader{Tags { "RenderType"="Opaque" }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"#pragma multi_compile_fwdbase#include "AutoLight.cginc"struct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;float2 uv2 : TEXCOORD1;float3 normal:NORMAL;};struct v2f{ float4 pos : SV_POSITION;float2 uv : TEXCOORD0;float2 uv2 : TEXCOORD1;float3 worldPos :TEXCOORD2;float3 worldNormal :TEXCOORD3;};sampler2D _BaseMap;float4 _BaseMap_ST;sampler2D _SSSMap;float _GradationMin;float _GradationMax;//获取HalfLambert漫反射值float GetHalfLambertDiffuse(float3 worldPos, float3 worldNormal){float3 lightDir = UnityWorldSpaceLightDir(worldPos);float NDotL = dot(worldNormal, lightDir);float halfVal = NDotL * 0.5 + 0.5;return halfVal;}v2f vert (appdata v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _BaseMap);o.uv2 = TRANSFORM_TEX(v.uv2, _BaseMap);o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;o.worldNormal = UnityObjectToWorldNormal(v.normal);return o;}half4 frag (v2f i) : SV_Target{// sample the texturehalf4 col = tex2D(_BaseMap, i.uv);half4 sssCol = tex2D(_SSSMap, i.uv);//色阶化half halfLambert = GetHalfLambertDiffuse(i.worldPos, i.worldNormal);half toonVal = smoothstep(_GradationMin, _GradationMax, halfLambert);half3 finalRGB = col.rgb*toonVal + sssCol * (1 - toonVal);half alpha = col.a;return half4(finalRGB,alpha);}ENDCG}}
}
