您现在的位置是:首页 >技术交流 >Unity制作二次元卡通渲染角色材质——5、脸部的特殊处理网站首页技术交流
Unity制作二次元卡通渲染角色材质——5、脸部的特殊处理
Unity制作二次元材质角色
回到目录
大家好,我是阿赵。
这里继续讲二次元角色材质的制作。这次是讲头部的做法。
1、脸部
之前在分析资源的时候,其实已经发现了这个模型的脸部法线有问题,导致在做光照模型的时候,脸部很奇怪。
把fbx文件导入到3DsMax里面,可以发现
这个模型为了做口里面的牙齿和舌头的动画,把脸部的布线做得很极限。
然后尝试把整个脸打同一个光滑组,发现脸部的法线还是不能正常过渡,于是检查一下模型脸部的顶点,发现很多部位并没有焊接在一起。
所以要解决脸部的问题,首先要先处理一下原始的模型,把该焊接的点给焊接一下。
进入点层级,全选所有点,然后焊接一下。
接下来给整个脸打一个光滑组
到这里,这个模型的脸部结构暂时来说比较正常。但由于脸部的结构特殊性,所以如果我们真的按照光照模型的NDotL去计算光影,脸部的光影在某些角度会非常的恐怖,比如这样:
之前我写过2篇文章去解决这个问题,各位有兴趣可以去看看:
1.使用阈值图修改角色脸部阴影
这里我选择了第2种方法去处理。
可以看到,集中在脸部的地方,法线非常的密集,而且方向比较的杂乱。这其实是正常而且合理的,因为脸部的转折很多。但用这些法线来计算光影,效果会很奇怪。
使用我之前用MaxScript写的映射法线的工具,进行一下球形法线映射
现在脸部的法线就会变成很平滑的过渡,方向非常的统一。这样的法线对于脸部来说其实是不对的,但是在做光影的时候,会比较的正常。然后配合一下之前ILM贴图的G通道,把脸部的阴影减淡一些,就可以。
这样看起来,脸部的影子就正常很多了。
这样看起来,脸部的
2、眼镜
如果只是赋予正常的身体材质,眼镜是这样的。
我们希望眼镜的效果大概有这些:
1.有基本颜色
2.有透明度,起码可以看到眼睛
3.有高光
4.有反射
所以我在身体材质的基础上做了一些修改:
1.使用正常的透明混合Blend SrcAlpha OneMinusSrcAlpha
2.使用了BlinnPhong高光
3.还是用Matcap做假反射,不过找了一个和眼镜本身颜色比较接近的Matcap反射球
完整Shader:
Shader "azhao/ToonGlass"
{
Properties
{
_BaseMap ("BaseMap", 2D) = "white" {}
_specColor("specColor",Color) = (1,1,1,1)
_shininess("shininess", Range(1 , 100)) = 1
_SpecAdd("SpecAdd",float) = 1.0
_MatCapTex("MatCapTex", 2D) = "white" {}
_MatCapIntensity("MatCapIntensity",Range(0,2)) = 1
_MatCapPow("MatCapPow",Range(0,5)) = 1
_MatCapUVScale("MatCapUVScale",Range(0,1)) = 1
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Blend SrcAlpha OneMinusSrcAlpha
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;
float4 _specColor;
float _shininess;
float _SpecAdd;
sampler2D _MatCapTex;
float _MatCapIntensity;
float _MatCapPow;
float _MatCapUVScale;
//获取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;
}
//获取BlinnPhong高光
float GetBlinnPhongSpec(float3 worldPos, float3 worldNormal)
{
float3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));
float3 halfDir = normalize((viewDir + _WorldSpaceLightPos0.xyz));
float specDir = max(dot(normalize(worldNormal), halfDir), 0);
float specVal = pow(specDir, _shininess);
return specVal;
}
float2 GetMatCapUV(float3 normalWorld)
{
float3 normalView = mul(UNITY_MATRIX_IT_MV, normalWorld);
return normalView.xy*0.5 + 0.5;
}
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);
half specVal = GetBlinnPhongSpec(i.worldPos, i.worldNormal);
float2 MatCapUV = GetMatCapUV(i.worldNormal)*_MatCapUVScale;
float4 MatCapCol = tex2D(_MatCapTex, MatCapUV)*_MatCapIntensity;
MatCapCol = pow(MatCapCol, _MatCapPow);
half3 finalRGB = col.rgb + _specColor * specVal*_SpecAdd;
finalRGB = finalRGB * (0.5) +MatCapCol.rgb*0.5;
half alpha = col.a;
return half4(finalRGB,alpha);
}
ENDCG
}
}
}
到这里,这个二次元卡通角色的材质基本上就做完了。下面说一下在这个例子里面,由于资源的原因没有做到的一些细节。虽然很遗憾不能做出效果,但也从理论上说一下应该怎样做吧。
1、头发
一般来说,头发如果有单独的问题贴图和法线贴图,比较容易做出一束一束的感觉。
可惜我这个模型素材里面,头发的贴图并没有单独的,只有一个和皮肤一样的baseMap,所以只能做到一片一片的效果。
然后也可以稍微从高光的角度去调整一下。
之前用于身体部分的高光的光照模型是BlinnPhong,所以光照会是一片的,我们可以试试改成Anisortropic各向异性高光。
//获取Anisortropic各向异性高光
float GetAnisortropicSpec(float3 worldPos, float3 worldNormal, float3 worldTangent)
{
float3 binormal = cross(worldNormal, worldTangent);
float3 lerpVal = normalize(lerp((worldNormal + binormal), binormal, _tangentVal));
float3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));
float3 halfDir = normalize((viewDir + _WorldSpaceLightPos0.xyz));
float anistropicVal = dot(lerpVal, halfDir);
float specDir = max(anistropicVal*anistropicVal, 0);
float specVal = pow(specDir, _shininess);
return specVal;
}
各向异性的高光一般是用于做一条一条形状的高光,不过由于我这个模型实在有点过于光滑,也没有法线贴图,所以这种感觉不是很明显。
2、眼睛
为了方便观察,先把眼镜隐藏了
之前我们做内描线的时候,其实发现了一个特别的东西,就是这个眼睛的贴图,居然不是在baseMap,而是在ILM贴图的A通道
在这个眼球或者瞳孔的地方,我虽然加上了高光和Matcap,但发现眼睛他其实并没有什么效果。这是因为,这里的瞳孔其实只是2个平面,在平面上面,不论是高光还是Matcap都不可能出现眼球的球形高光变化。
这个时候,要么把眼球改成真的球形,要么,使用法线贴图。
如果有法线贴图。法线贴图的做法是先采样一个凹进去的部分,然后给他赋予颜色,再把法系翻转,采样一个凸出来的部分,在凸出来的部分上面做高光和Matcap。
由于我手上这个模型并没有提供法线贴图,所以这部分我暂时就演示不了。