Unity酱~ 卡通渲染技术分析（一）

时间：2023-01-06 14:56:24

Unity酱~ 卡通渲染技术分析（一）

前面的话

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

Unity酱~ 卡通渲染技术分析（一）

上图是我整理出来的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 );

Unity酱~ 卡通渲染技术分析（一）

效果如下，边缘较白

Unity酱~ 卡通渲染技术分析（一）

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

Unity酱~ 卡通渲染技术分析（一）

高光效果

	// 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通道。

大概就是描出来那些地方高光强一些

Unity酱~ 卡通渲染技术分析（一）

Unity酱~ 卡通渲染技术分析（一）

反射

// 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;

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

Unity酱~ 卡通渲染技术分析（一）

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

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

Unity酱~ 卡通渲染技术分析（一）

通过GetOverlayColor融合后的反射颜色

Unity酱~ 卡通渲染技术分析（一）

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

Unity酱~ 卡通渲染技术分析（一）

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

Unity酱~ 卡通渲染技术分析（一）

接收阴影处理

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

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里面则是采用了一张边缘光贴图

Unity酱~ 卡通渲染技术分析（一）

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

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

Unity酱~ 卡通渲染技术分析（一）

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

falloffU = saturate( rimlightDot * falloffU );

Unity酱~ 卡通渲染技术分析（一）

完整效果

Unity酱~ 卡通渲染技术分析（一）

总结

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

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

相关文章