玄武区网站建设,手机访问wordpress网站卡,影视播放网站建设,o2o网站开发价格Unity制作二次元材质角色 回到目录 大家好#xff0c;我是阿赵。 这里继续讲二次元角色材质。这次打算讲一下描边和细节的添加。
一、外描边
外描边的做法也不止一种#xff0c;比如后处理方法的偏导数ddx/ddy之类的#xff0c;也能整个屏幕的求出边缘。但一般来说单模型渲… Unity制作二次元材质角色 回到目录 大家好我是阿赵。 这里继续讲二次元角色材质。这次打算讲一下描边和细节的添加。
一、外描边
外描边的做法也不止一种比如后处理方法的偏导数ddx/ddy之类的也能整个屏幕的求出边缘。但一般来说单模型渲染常用的描边方式是写多一个Pass这个Pass是Cull Front的也就是说是剔除了正面的然后给模型的顶点沿着法线方向稍微扩大一点填充成黑色最后把正常颜色的模型放在黑色模型的重叠位置那么黑色模型就变成了描边了效果了。
这个就是Cull Front的Pass的效果。
把2个pass一起渲染就能得到描边的效果。 值得注意的是沿着法线放大模型这一步顶点坐标应该在哪个空间里面来做放大呢 一般来说使用世界空间肯定是可以的就是先求出顶点的世界坐标和世界法线方向然后世界坐标加上世界法线乘以一个控制大小的值。 但更好的做法是在观察空间里面做这个扩展。这是因为有时候我们想让这个Cull Front的Pass渲染的黑色模型可以沿着我们观察的方向的Z轴做偏移如果在世界空间坐标里面做法线扩展明显是很难找到一个轴是可以沿着摄像机方向的。如果我们先把顶点坐标和法线都转换到观察空间那么在观察空间里面的Z坐标其实就是离我们观察点的远近了。 这里有2个做法 1、在法线转换成观察空间之后把法线的z轴直接固定到一个值这样模型沿着法线方向扩展时在z轴会沿着我们想要的方向去放大比如
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) * _OutlineLen*0.001;o.pos mul(UNITY_MATRIX_P, pos);return o;
}2、在观察空间扩展完法线之后用一个值来控制偏移后顶点的z轴偏移比如
v2f vert(appdata v)
{v2f o;float4 pos mul(UNITY_MATRIX_MV, v.vertex);float3 normal mul((float3x3)UNITY_MATRIX_IT_MV, v.normal);pos pos float4(normalize(normal), 0) * _OutlineLen*0.001;pos.z - v.vertexColor.b;o.pos mul(UNITY_MATRIX_P, pos);return o;
}我这里用了一个顶点颜色的B通道去偏移Z轴是因为这是一般的习惯做法通过给顶点颜色指定一个通道作为描边Z轴偏移的量这样的做法可以实现整个模型不同部位的描边显示不一样。 由于我手上的这个模型并没有烘焙顶点色所以没有顶点通道可以控制所以我就使用第一种方式来处理。
二、内描边
刚才得到的是外描边。正常来说如果项目要求不高也勉强够用了。但如果我们想把效果做得更贴近卡通那么按道理来说模型除了外部有描边模型内部应该也会有一些描边的细节。 回头看看之前说的ILM贴图的A通道
可以发现这张贴图提供了模型里面的描边效果。一般来说在贴图上面画内描线会遇到一个问题
同样一张贴图上水平或者垂直的线条会很清晰但斜线会起马赛克会模糊。
放大我们的这个角色模型看一下内描线的效果发现每一内描线基本都很清晰没有出现斜线模糊的情况。这是为什么呢 接下来看一下这张ILM贴图的A通道可以发现一些东西
会发现这个内描线基本上都是水平和垂直的线并没有出现任何斜线。其实这是一种经验和技巧。在展UV的时候我们尽量把模型的UV展成这张水平和垂直的方向这样在画这张线条形的贴图时线条就能非常的清晰。 这种事情最好是在一开始的时候就规划好。如果说实在做不到因为漫反射贴图已经画好了没法改那么我们也可以通过展UV2特别为这个内描线展一张水平垂直的UV。
加上了内描边之后整体的感觉就丰富了很多了。
三、细节线条
如果想再进一步添加一些小划痕或者痕迹这里还可以添加一张细节图
看得出来这张图片并没有像内描边一样讲究水平垂直的画线整体比较随意。因为这张贴图添加的是一些像手绘的笔触一样的线条并不需要非常的整齐和明显。 把这张图也加上那么线条方面的工作就基本完成了
四、贴花
最后才说贴花是因为这个贴花是独立于之前的角色模型贴图以外的。
本来这个模型是分为了身体和武器(吉他)2个部分的所以刚才说到的所有图包括BaseMap、SSSMap、ILMMap都是身体一套武器一套的。但这一张贴花的图片却是身体和武器共用的。 为什么不同的模型可以共用一张贴图呢这是因为这张贴花贴图是使用了UV2的也就是说把身体和武器需要贴花的部分展成UV2然后合并在一起。至于不需要贴花的部分UV基本上是缩小到看不见的。 所以这个部分其实也没什么好说的直接读取模型的UV2然后赋予贴图就行了。我自己做了一点小改动因为吉他弦的部分没有地方控制透明通道所以我给这张贴花图片做了个透明通道让吉他弦能正常的显示出来。
加上了贴花之后整个模型的显示基本上就完成了。
五、完整Shader
Shader azhao/ToonBodyOutline
{Properties{_BaseMap (BaseMap, 2D) white {}_SSSMap(SSSMap, 2D) white {}_ILMMap(ILMMap, 2D) white {}_DetailMap(DetailMap,2D) white{}_specColor(specColor,Color) (1,1,1,1)_shininess(shininess, Range(1 , 100)) 1_SpecAdd(SpecAdd,float) 1.0_GradationMin(GradationMin,Range(0.0,1.0)) 0.0_GradationMax(GradationMax,Range(0.0,1.0)) 1.0_OutlineColor(OutlineColor,Color) (0,0,0,1)_OutlineLen(_OutlineLen,float) 2_MatCapTex(MatCapTex, 2D) white {}_MatCapIntensity(MatCapIntensity,Range(0,2)) 1_MatCapPow(MatCapPow,Range(0,5)) 1_MatCapUVScale(MatCapUVScale,Range(0,1)) 1}SubShader{Tags { RenderTypeOpaque }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include UnityCG.cginc#pragma multi_compile_fwdbase#include AutoLight.cgincstruct 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;sampler2D _ILMMap;sampler2D _DetailMap;float4 _specColor;float _shininess;float _SpecAdd;float _GradationMin;float _GradationMax;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 texturehalf4 col tex2D(_BaseMap, i.uv);half4 sssCol tex2D(_SSSMap, i.uv);half4 ilmCol tex2D(_ILMMap, i.uv);half4 detailCol tex2D(_DetailMap, i.uv2);//色阶化half halfLambert GetHalfLambertDiffuse(i.worldPos, i.worldNormal);half toonVal smoothstep(_GradationMin, _GradationMax, halfLambert);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*toonVal sssCol * (1 - toonVal)_specColor* specVal*ilmCol.r _specColor * specVal*ilmCol.b*_SpecAdd;finalRGB finalRGB * (1-ilmCol.b) MatCapCol.rgb*ilmCol.b;finalRGB finalRGB * ilmCol.a*detailCol.r;half alpha col.a;return half4(finalRGB,alpha);}ENDCG}Pass{Cull FrontCGPROGRAM#pragma vertex vert#pragma fragment frag#include UnityCG.cginc#pragma multi_compile_fwdbase#include AutoLight.cgincstruct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;float3 normal:NORMAL;};struct v2f{float4 pos : SV_POSITION;float2 uv : TEXCOORD0;float3 worldPos :TEXCOORD1;float3 worldNormal :TEXCOORD2;};float4 _OutlineColor;float _OutlineLen;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) * _OutlineLen*0.001;o.pos mul(UNITY_MATRIX_P, pos);return o;}half4 frag(v2f i) : SV_Target{return _OutlineColor;}ENDCG}}
}
