UnityShader（七）卡通着色

拼搏现实的明天。 2023-09-27 10:58 120阅读 0赞

## 一、基本漫反射 ##

首先新建一个Shader，同步创建对应的材质球。使用新的材质替换掉模型原有的材质。

接下来开始着手编写基本的漫反射Shader

声明纹理和漫反射颜色属性，并在CG中声明对应的变量

Properties
    {
        
    	_MainTex ("Texture", 2D) = "white" {
        }
    	_Diffuse("Diffuse Color",COLOR) = (1,1,1,1)
    }

引入「UnityCG」和「Lighting」两个Shader库

#include "UnityCG.cginc"  
    #include "Lighting.cginc"

定义输出结构体

struct v2f
    {
        
    	float4 vertex : SV_POSITION;
    	float2 uv : TEXCOORD0;
    	fixed3 worldNormal:TEXCOORD1;
    	fixed3 worldPos:TEXCOORD2;
    };

在顶点着色器中计算世界空间下的法线坐标、顶点坐标

v2f vert(appdata_base v)
    {
        
    	v2f o;
    	o.vertex = UnityObjectToClipPos(v.vertex);
    	o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
    	o.worldNormal = UnityObjectToWorldNormal(v.normal);
    	o.worldPos = mul(unity_ObjectToWorld, v.vertex);
    	return o;
    }

在片元着色器中计算漫反射

fixed4 frag(v2f i) : SV_Target
    {
        
    	// 环境光
    	const fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;
    	// 纹理采样
    	const fixed4 albedo = tex2D(_MainTex, i.uv);
    	// 漫反射
    	const fixed3 worldLightDir = UnityWorldSpaceLightDir(i.worldPos);
    	const float difLight = dot(i.worldNormal, worldLightDir) * 0.5 + 0.5;
    	const fixed3 diffuse = _LightColor0.rgb * albedo * _Diffuse.rgb * difLight;
    	return float4(diffuse + ambient, 1);
    }

代码很简单，都是之前学过的内容。我们直接来看效果  
![200fe526c851de9ce404e4281eb714d2.png][]

## 二、描边效果 ##

要实现描边效果，可以添加一个新的Pass通道。在新的Pass通道中，用纯色对模型进行渲染。将顶点沿法线方向向外扩展。然后在另一个Pass通道中进行其他的渲染，即可实现描边效果。

首先定义描边宽度和颜色属性

_Outline("Outline",RANGE(0,0.05)) = 0
    _OutlineColor("Outline Color",COLOR) = (0,0,0,0)

新创建一个Pass通道，需要裁剪掉正面，只渲染背面防止描边将物体遮挡住。然后在顶点着色器中将顶点沿法线方向扩展

Pass
    {
        
    	Name "Outline"
    	Cull Front
    	
    	CGPROGRAM
    	#pragma vertex vert
    	#pragma fragment frag
    	#include "UnityCG.cginc"
    
    	float _Outline;
    	float4 _OutlineColor;
    
    	struct v2f
    	{
        
    		float4 vertex:SV_POSITION;
    	};
    
    	v2f vert(appdata_base v)
    	{
        
    		v2f o;
    		// 顶点坐标沿法线方向扩展
    		v.vertex.xyz += v.normal*_Outline;
    		o.vertex = UnityObjectToClipPos(v.vertex);
    		return o;
    	}
    	fixed4 frag(v2f i):SV_Target
    	{
        
    		return _OutlineColor;
    	}
    	ENDCG
    }

效果如下  
![69a244b4f380f3b38a7cff433dc530cf.gif][]

上面这种扩展方式是在世界空间中进行的，我们也可以在视角空间中进行

v2f vert(appdata_base v)
    {
        
    	v2f o;
    	// 将顶点变换到视角空间
    	float4 pos = mul(UNITY_MATRIX_V, mul(unity_ObjectToWorld,v.vertex));
    	// 将法线变换到视角空间
    	float3 normal = normalize(mul((float3x3)UNITY_MATRIX_IT_MV,v.normal));
    	pos = pos + float4(normal,0)*_Outline;
    	// 将顶点变换到裁剪空间
    	o.vertex = mul(UNITY_MATRIX_P,pos);
    	return o;
    }

或是在裁剪空间中进行

v2f vert(appdata_base v)
    {
        
    	v2f o;
    	// 将顶点变换到裁剪空间
    	o.vertex = UnityObjectToClipPos(v.vertex);
    	// 将法线变换到视角空间
    	float3 normal = normalize(mul((float3x3)UNITY_MATRIX_IT_MV,v.normal));
    	// 再转换到裁剪空间
    	float2 viewNormal = TransformViewToProjection(normal.xy);
    	o.vertex.xy += viewNormal*_Outline;
    	return o;
    }

效果与在世界空间中扩展几乎相同，这里不再展示。

## 三、颜色处理 ##

我们知道，卡通渲染效果的颜色比较简单，有种色块拼接的感觉。要实现这种效果就需要对顶点的颜色进行离散化。

首先定义两个属性，用来设置层次和色块之间的过渡效果

_Step("Step",Range(1,30)) = 1  
    _CartoonEffect("Cartoon Effect",Range(0,1)) = 0.5

然后在计算漫反射之前进行颜色的离散化。

fixed4 frag(v2f i) : SV_Target
    {
        
    	// 环境光
    	const fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;
    	// 纹理采样
    	const fixed4 albedo = tex2D(_MainTex, i.uv);
    	// 漫反射
    	const fixed3 worldLightDir = UnityWorldSpaceLightDir(i.worldPos);
    	float difLight = dot(i.worldNormal, worldLightDir) * 0.5 + 0.5;
    	
    	// 颜色离散化
    	difLight=smoothstep(0,1,difLight);
    	const float cartoonColor = floor(difLight*_Step)/_Step;
    	difLight = lerp(difLight,cartoonColor,_CartoonEffect);
    	
    	const fixed3 diffuse = _LightColor0.rgb * albedo * _Diffuse.rgb * difLight;
    	return float4(diffuse + ambient, 1);
    }

效果如下  
![4e61cf90faa5070dfc69102d4e809c72.gif][]

## 四、边缘光 ##

要实现物体边缘发光的效果，就要确定哪部分才属于边缘。其实也非常简单，当视角方向与切线平行，也就是与法线垂直时，表示这个顶点在当前视角下处于边缘位置。也就是说只要将视角方向与法线方向进行点积，结果越接近0，这个顶点就越靠近边缘。  
![d69b088ae8e493fbf1d36149077e5ae5.png][]

首先定义两个属性用来控制边缘光的颜色和强度

_RimColor("Rim Color",COLOR) = (0,0,0,0)  
    _RimPower("Rim Power",Range(0,1)) = 0

然后在片元着色器返回的结果中加上边缘光的计算结果

fixed4 frag(v2f i) : SV_Target
    {
        
    	// ...
    	// 边缘光
    	const fixed3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
    	const float rim = 1-dot(i.worldNormal,viewDir);  
    	const fixed3 rimColor = _RimColor*pow(rim,1/_RimPower);
    	return float4(diffuse + ambient+rimColor, 1);
    }

效果如下  
![9ed7cb5e856ee7039bef86dd77b26048.gif][]

[200fe526c851de9ce404e4281eb714d2.png]: https://img-blog.csdnimg.cn/img_convert/200fe526c851de9ce404e4281eb714d2.png
[69a244b4f380f3b38a7cff433dc530cf.gif]: https://img-blog.csdnimg.cn/img_convert/69a244b4f380f3b38a7cff433dc530cf.gif
[4e61cf90faa5070dfc69102d4e809c72.gif]: https://img-blog.csdnimg.cn/img_convert/4e61cf90faa5070dfc69102d4e809c72.gif
[d69b088ae8e493fbf1d36149077e5ae5.png]: https://img-blog.csdnimg.cn/img_convert/d69b088ae8e493fbf1d36149077e5ae5.png
[9ed7cb5e856ee7039bef86dd77b26048.gif]: https://img-blog.csdnimg.cn/img_convert/9ed7cb5e856ee7039bef86dd77b26048.gif