Unity酱~ 卡通渲染技术分析(一)

前面的话

unitychan是日本unity官方团队提供的一个Demo,里面有很好的卡通渲染效果,值得参考学习

Shader分类

上图是我整理出来的shader结构,可以看到Unity娘被拆分成了很多个小的部件,我想主要是为了挂动态骨骼吧。因为有很多部件的材质,shader其实都是一样的可以合并成少数几个

我打算分3个部分来学习

  1. CharaMain.cginc 主要用于衣服等材质
  2. CharaSkin.cginc 皮肤效果
  3. Hair 头发、眼睛、睫毛等部位的渲染

CharaMain.cginc

本篇先写第一部分body材质。CharaMain.cginc中包含漫反射、高光、反射、边缘光、阴影等效果的实现,接下来我们详细拆解

基础着色效果(模拟漫反射)

这里是用视角向量跟法线点积(但这样的做法就不会受光照角度变化),然后用结果采样一张类似这样的衰减纹理

    // Falloff. Convert the angle between the normal and the camera direction into a lookup for the gradient
    float_t normalDotEye = dot( normalVec, i.eyeDir.xyz );
    float_t falloffU = clamp( 1.0 - abs( normalDotEye ), 0.02, 0.98 );
    float4_t falloffSamplerColor = FALLOFF_POWER * tex2D( _FalloffSampler, float2( falloffU, 0.25f ) );
    float3_t shadowColor = diffSamplerColor.rgb * diffSamplerColor.rgb;
    float3_t combinedColor = lerp( diffSamplerColor.rgb, shadowColor, falloffSamplerColor.r );
    combinedColor *= ( 1.0 + falloffSamplerColor.rgb * falloffSamplerColor.a );
FalloffSampler

效果如下,边缘较白


漫反射

但我感觉加上采样颜色后效果不是很明显,边缘颜色会深一些。


加上采样颜色

高光效果

    // Use the eye vector as the light vector
    float4_t reflectionMaskColor = tex2D( _SpecularReflectionSampler, i.uv.xy );
    float_t specularDot = dot( normalVec, i.eyeDir.xyz );
    float4_t lighting = lit( normalDotEye, specularDot, _SpecularPower );
    float3_t specularColor = saturate( lighting.z ) * reflectionMaskColor.rgb * diffSamplerColor.rgb;
    combinedColor += specularColor;

这个高光的计算很奇葩,也是用法线跟视角向量的点积,最后的效果就是有一点淡淡的高光。也是跟真正的灯光角度无关的。

这里还用到了一张贴图,高光会用到这张图的rgb通道,后面要写的反射,会用到这张图的a通道。
大概就是描出来那些地方高光强一些

RGB通道
高光效果

反射

// Reflection
float3_t reflectVector = reflect( -i.eyeDir.xyz, normalVec ).xzy;
float2_t sphereMapCoords = 0.5 * ( float2_t( 1.0, 1.0 ) + reflectVector.xy );
float3_t reflectColor = tex2D( _EnvMapSampler, sphereMapCoords ).rgb;
reflectColor = GetOverlayColor( reflectColor, combinedColor );

combinedColor = lerp( combinedColor, reflectColor, reflectionMaskColor.a );
combinedColor *= _Color.rgb * _LightColor0.rgb;
float opacity = diffSamplerColor.a * _Color.a * _LightColor0.a;

这里是采样一张环境贴图,为啥用张这样的图呢?我觉得他主要是为了能反射出这种银色的色调罢了。你想要什么色调就换啥样的环境图。


GetOverlayColor这个函数是用来融合自身贴图颜色,跟反射环境贴图颜色的。里面用了很多小技巧

先来看看直接输出反射贴图是什么样

反射贴图

通过GetOverlayColor融合后的反射颜色


融合后

然后这里会用到高光反射贴图的A通道,来表示某些区域的反射的强度。


Alpha通道

用alpha通道做差值后会发现,大部分区域的反射颜色都不见了,因为大部分是黑色。只有少数白色区域,能看到一些反射效果


最终反射效果

接收阴影处理

这里是计算其他物体投射在身上的阴影,这里插入了一个自定义的阴影颜色,为了明显一点我直接调成纯黑,然后弄了一个物体挡住了unity酱~ 效果如图


使用LIGHT_ATTENUATION指令对阴影贴图采样并且返回数据供你使用。如果你想知道LIGHT_ATTENUATION指令具体做了些什么,检查 AutoLight.cginc文件

#ifdef ENABLE_CAST_SHADOWS
    // Cast shadows
    shadowColor = _ShadowColor.rgb * combinedColor;
    float_t attenuation = saturate( 2.0 * LIGHT_ATTENUATION( i ) - 1.0 );
    combinedColor = lerp( shadowColor, combinedColor, attenuation );
#endif

边缘高光

终于这里有一个跟着光照角度变换的效果了,哈哈

一般我们会使用菲尼尔效应来实现边缘光,而unitychan里面则是采用了一张边缘光贴图

RimLight

用N.L计算出来的值域在[-1,1]之间,*0.5+1后,转成[0,1]区间,然后对这张1维的rim图采样。

我们从右边打一盏平行灯,来看看采样的效果。跟光向量夹角越小的值越接近1,也就越白

边缘光贴图采样

但是边缘光效果要收到漫反射影响,所以他这里乘上了之前采样出来的漫反射渐变,可以看到高光被控制在了边缘

falloffU = saturate( rimlightDot * falloffU );
rim * 漫反射渐变

完整效果

完整效果

总结

CharaMain.cginc中用了很多的小技巧实现了漫反射、高光、反射、边缘光。她没有传统卡通渲染赛璐璐的阴影渐变,也没有油腻的高光。她的效果都有种欲出还收的感觉。

我还是觉得效果太淡了一些

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容