Unity制作二次元卡通渲染角色材质——4 、内外描边和细节添加
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 { "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;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 = 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.cginc"struct 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}}
}
Unity制作二次元卡通渲染角色材质——4 、内外描边和细节添加相关推荐
- Unity制作二次元卡通渲染角色材质——2、色阶化光影的多种做法对比
Unity制作二次元材质角色 回到目录 大家好,我是阿赵. 这里继续讲二次元角色渲染.之前说过,最基本的卡通渲染,包含了色阶化光影和描边二个元素.所以这里先来说一下色阶化光影的多种做法对比. 一.光照 ...
- Unity制作二次元卡通渲染角色材质——5、脸部的特殊处理
Unity制作二次元材质角色 回到目录 大家好,我是阿赵. 这里继续讲二次元角色材质的制作.这次是讲头部的做法. 1.脸部 之前在分析资源的时候,其实已经发现了这个模型的脸部法线有问题,导致在做光照模 ...
- Unity制作二次元卡通渲染角色材质——1、资源分析
Unity制作二次元材质角色 回到目录 大家好,我是阿赵. 开始制作二次元角色材质之前,我觉得应该是先分析一下,我手上拿到的这个角色模型资源,总共有哪些信息是我们能用的. 所以这篇文章我不会分享具体的 ...
- Unity制作二次元卡通渲染角色材质——3、高光反射与ILM贴图
Unity制作二次元材质角色 回到目录 大家好,我是阿赵. 这里继续来讲二次元角色的材质.上次讲了光影的色阶化问题,这次继续讲光照模型效果的问题. 之前我们说过,光照模型的最后效果是: 环境色+漫反射 ...
- 二次元卡通渲染之描边
前言 本文为"优梦创客"原创文章,您可以自由转载,但必须加入完整的版权声明 更多学习资源请加QQ:1517069595获取(企业级性能优化/热更新/Shader特效/服务器/商业项 ...
- 二次元卡通渲染-着色
前言 本文为"优梦创客"原创文章,您可以自由转载,但必须加入完整的版权声明 更多学习资源请加QQ:1517069595获取(企业级性能优化/热更新/Shader特效/服务器/商业项 ...
- 二次元卡通渲染——进阶技巧
前言 随着<原神>游戏的盛行,国内对于二次元游戏这块儿领域越来越看重了.二次元项目中本身基于日本的卡通动漫而来,所以最后的本质都是为了尽量还原2D立绘,而并不像PBR追求物理正确,只要好看 ...
- 腾讯游戏主美:二次元卡通渲染有哪些黑科技?
今年,<原神>的出现让行业注意到了三渲二这种独特的画风.但在二次元游戏中,<原神>其实并非第一个吃螃蟹的人.作为腾讯游戏魔方工作室群<王牌战士>项目组的主美,谢海天 ...
- Unity Shader 实现卡通渲染效果
本文参考博客Unity Toon Shader 卡通着色器(一):卡通着色 这是我实现的最后效果 我们先一步一步来 最开始我们实现一个只有漫反射效果的Shader,效果和代码如下 Shader &qu ...
最新文章
- 2022年软件测试工具大全(自动化、接口、性能、安全、测试管理)
- 洛谷P1372 又是毕业季IP1414 又是毕业季II[最大公约数]
- android动画帧率_Android动画进阶—使用开源动画库nineoldandroids
- osg渲染到纹理技术(二)
- 计算机的发展阶段及特点与未来发展,计算机的发展历史及未来
- flash调用swf文件服务器,浏览器如何加载Flash文件? (SWF)
- 华为P30系列再曝光:屏幕参数揭晓 还要用水滴全面屏?
- 70 行 Go 代码打败 C!
- nginx linux下载文件,linux – 从nginx缓慢下载大型静态文件
- bind merge r 和join_R语言数据处理——数据合并与追加
- 非平衡数据(imbalanced data)简单介绍
- 冲压模板自动标注LISP_自动标注.LSP
- amr转换成mp3 java_微信开发-将amr格式转换为mp3格式
- ORA-00932: 数据类型不一致: 应为 DATE, 但却获得 NUMBER
- Install YouTube-DL – A Command Line Video Download Tool for Linux
- PRN(20200908):Frosting Weights for Better Continual Training
- LWIP+ENC28J60长时间运行后无法访问外网服务器
- 系统安全漏洞及解决方案
- Ubuntu为安装的软件添加启动图标
- 湖北省潜江市谷歌高清卫星地图下载