Unity制作二次元卡通渲染角色材质——2、色阶化光影的多种做法对比

Unity制作二次元材质角色

回到目录

大家好，我是阿赵。
这里继续讲二次元角色渲染。之前说过，最基本的卡通渲染，包含了色阶化光影和描边二个元素。所以这里先来说一下色阶化光影的多种做法对比。

一、光照模型和色阶化的说明

从上一篇文章里面可以知道，这个模型提供了2套贴图，分别是baseMap和sssMap

baseMap

sssMap

这两张贴图的作用，很明显作为亮部和暗部显示用的。
那么需要怎样使用这两张贴图呢？
其实很简单，还是自定义光照模型。我之前写过文章介绍怎样自己写光照模型。然后我之后做了很多例子，如果各位如果有留意看，估计也发现，自定义光照模型是很多效果的基础。
这里我也同样的先做一个HalfLambert漫反射光照：

//获取HalfLambert漫反射值
float GetHalfLambertDiffuse(float3 worldPos, float3 worldNormal)
{
float3 lightDir = UnityWorldSpaceLightDir(worldPos);
float NDotL = saturate(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 100

        Pass
        {
            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 = saturate(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 texture
                half4 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
        }

    }
}