做了几年Unity下的风格化渲染经常有新入行的朋友问我想要日式卡通渲染的效果是不是把Standard Shader的阴影调硬一点就行了每次听到这个我都想把对方按在椅子上看一遍渲染结果看着是“一块阴影”实际上日式卡通着色的逻辑跟PBR完全是两个思路硬调参数只会得到一张脏兮兮、灰蒙蒙的脸。这篇是“着色篇”的第一篇重点解决日式卡通渲染里最核心的三块内容漫反射的色阶化、高光的风格化、面部阴影的处理。我会从原理讲到完整Shader再给实际的参数调节经验适合刚接触Unity NPR的开发者也适合想弄清楚材质参数背后逻辑的美术同学。代码用Built-in管线写URP下稍微改一下引用就能用文中会提差异点。1. 日式卡通着色的底层逻辑先搞清楚“硬阴影”为什么不够1.1 卡通渲染的目标是信息压缩而不是降低画质PBR渲染的目标是“物理正确”光线怎么反射、能量怎么衰减一切都有现实依据。但日式卡通渲染不一样它做的是信息压缩把复杂的光影关系简化成几档明确的明暗层级让观众在一眼扫过去的时候能快速读取模型的体积、结构和材质倾向。这个区别非常关键。PBR里物体暗部来自光照衰减、环境遮挡、间接光反弹颜色随光源变化有丰富的中间过渡。而日式卡通里阴影往往是一个“设计过的形状”它不追求真实而是为了分割画面、表达体积甚至承载情感。这也是为什么“把PBR阴影调硬”行不通因为你保留了PBR的明暗算法只是把过渡压窄了结果该脏的地方还是脏该碎的地方还是碎只是变得更难看而已。提示判断一个NPR着色器是否合格不要看它在纯色球上好不好看要看它在角色脸上、衣服褶皱上、头发上是不是还干净利落。1.2 从PBR到Toon的思维切换光照不再是一堆连续值用一句话概括PBR到Toon的切换PBR把光照计算成连续的灰度或颜色Toon把光照量化成离散的档位。这个想法看起来简单实际操作里牵扯到一个核心变量NdotL也就是法线方向与光照方向的点积。PBR里NdotL直接参与漫反射计算出连续亮度Toon里NdotL通常需要先做一次映射再经过阈值判断或者Ramp贴图采样变成两到三档的颜色。为了避免模型背光面完全黑死我们一般会把NdotL映射成Half Lamberthalf halfLambert dot(normalWS, lightDirWS) * 0.5 0.5;Half Lambert的好处是把原本范围在-1到1的点积映射到0到1暗部的信息也被保留下来方便后续用阈值去切分。这也是很多日式卡通Shader的地基后面所有漫反射分级都建立在它上面。注意阈值判断和Ramp采样本质都是把连续量变成离散量这一步就是“卡通感”的来源。如果这一步做不好后面加多少描边和高光都救不回来。2. 漫反射色阶化Ramp贴图与阈值控制的完整实现2.1 Step、Ramp贴图、半兰伯特怎么选很多教程会直接给你看Step硬切的效果half diffuse step(0.5, halfLambert);这确实能产生赛璐璐式的大色块但在真实项目里我几乎不用纯Step原因有两个。第一模型上的法线是连续的但屏幕像素是离散的纯Step会在明暗交界处产生严重的锯齿或者闪烁。第二纯Step只产生两档颜色遇到需要三档、四档明暗的材质比如衣服有固有色、阴影色、还有环境反光色Step写起来会非常痛苦。所以实践中更推荐Ramp贴图。Ramp本质上是一张1D渐变图横轴是Half Lambert值纵轴是最终亮度或者颜色Shader在运行时根据halfLambert去采样这张图。美术可以直接在Photoshop里画过渡想要硬边就画一个台阶想要柔和就画一段斜坡完全不需要改代码。提示Unity Shader里用tex1D采样有时会遇到平台兼容性问题最稳妥的做法是把Ramp图做成宽N、高1的2D纹理采样时固定y坐标为0.5。2.2 一个可运行的Toon漫反射Shader这里给出一个最精简但完整的Shader结构包含ShadowCaster和ForwardBase两个Pass可以放进Unity里直接用Shader Custom/ToonDiffuse { Properties { _BaseMap (Base Texture, 2D) white {} _BaseColor (Base Color, Color) (1, 1, 1, 1) _RampTex (Ramp Texture, 2D) white {} _ShadowColor (Shadow Color, Color) (0.6, 0.65, 0.7, 1) _ToonThreshold (Toon Threshold, Range(0, 1)) 0.5 _ToonSoftness (Toon Softness, Range(0, 0.2)) 0.05 _ShadowIntensity (Shadow Atten Intensity, Range(0, 1)) 0.6 } SubShader { Tags { RenderTypeOpaque } LOD 100 Pass { Name ShadowCaster Tags { LightModeShadowCaster } CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma multi_compile_shadowcaster #include UnityCG.cginc struct v2f { V2F_SHADOW_CASTER; }; v2f vert(appdata_base v) { v2f o; TRANSFER_SHADOW_CASTER_NORMALOFFSET(o) return o; } float4 frag(v2f i) : SV_Target { SHADOW_CASTER_FRAGMENT(i) } ENDCG } Pass { Name ForwardBase Tags { LightModeForwardBase } CGPROGRAM #pragma vertex vert #pragma fragment frag #include UnityCG.cginc #include Lighting.cginc struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; float3 normal : NORMAL; }; struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; float3 worldNormal : TEXCOORD1; float3 worldPos : TEXCOORD2; }; sampler2D _BaseMap; float4 _BaseMap_ST; fixed4 _BaseColor; sampler2D _RampTex; fixed4 _ShadowColor; float _ToonThreshold; float _ToonSoftness; float _ShadowIntensity; v2f vert(appdata v) { v2f o; o.pos UnityObjectToClipPos(v.vertex); o.uv TRANSFORM_TEX(v.uv, _BaseMap); o.worldNormal UnityObjectToWorldNormal(v.normal); o.worldPos mul(unity_ObjectToWorld, v.vertex).xyz; return o; } fixed4 frag(v2f i) : SV_Target { fixed4 albedo tex2D(_BaseMap, i.uv) * _BaseColor; float3 lightDir normalize(_WorldSpaceLightPos0.xyz); float3 normalWS normalize(i.worldNormal); half halfLambert dot(normalWS, lightDir) * 0.5 0.5; // 通过阈值和柔边构造色阶化漫反射 half diffuse smoothstep( _ToonThreshold - _ToonSoftness * 0.5, _ToonThreshold _ToonSoftness * 0.5, halfLambert); // 采样Ramp贴图这里用diffuse作为横坐标 half rampCoord saturate(diffuse); fixed3 rampColor tex2D(_RampTex, float2(rampCoord, 0.5)).rgb; // 阴影色在亮部和暗部之间做渐变 fixed3 shadowColor _ShadowColor.rgb * albedo.rgb; fixed3 diffuseColor lerp(shadowColor, albedo.rgb, rampColor); // 主光源阴影衰减统一成一个宽度可控的软化层 fixed shadowAtten LIGHT_ATTENUATION(i); shadowAtten lerp(_ShadowIntensity, 1.0, saturate(shadowAtten)); fixed3 finalColor diffuseColor * _LightColor0.rgb * shadowAtten; finalColor UNITY_LIGHTMODEL_AMBIENT * albedo.rgb * 0.3; return fixed4(finalColor, 1.0); } ENDCG } } Fallback VertexLit }这里有几个重点要解释清楚。第一_ToonThreshold是明暗分界线在Half Lambert空间的位置。默认0.5意味着光线与法线夹角约60度时切换阴影这时阴影面积通常比较好看。想要阴影面积更大就提高阈值比如0.6想要更亮就降低阈值。第二_ToonSoftness不是“模糊阴影”它只是控制threshold两边的过渡带宽度这个宽度决定了明暗交界线是锐利还是柔和。0.05到0.1之间是比较稳的太小容易锯齿太大就没有卡通味了。第三Ramp图的横坐标我直接用了diffuse而非halfLambert这样Ramp图实际控制的是“明暗分级后的渐变”Artists画图时更直观左边是阴影色右边是固有色中间画几个台阶就是几档过渡。2.3 阴影色选择与Unity阴影系统的衔接日式卡通的阴影色千万不要用“固有色乘以0.6”这么偷懒的做法。因为乘法只能降低亮度会让阴影发灰、发闷动画里看起来非常“脏”。正确的日式阴影往往选择比固有色更深但饱和度更高一点的偏色。比如红色衣服的阴影色可以往紫红偏移白色衣服的阴影色可以往冷灰偏移。上面的Shader里_ShadowColor给了独立的颜色并直接与albedo相乘美术在调材质时就可以针对每个部位配不同的阴影色这一条对最终观感的影响比很多人想象的大。Unity自带的阴影系统也就是Shadow Map那套在NPR里也必须处理。我这里没有直接拿shadowAtten去乘diffuse而是先做了一次lerp当shadowAtten为0时光照最多衰减到_ShadowIntensity而不是全黑。这是非常关键的一步避免阴影和阴影叠加后出现脏斑。如果整个暗部被压成纯黑那日式卡通里最常说的“通透感”就没了。注意ShadowCaster Pass一定要写。很多新手偷懒不写ShadowCaster结果角色无法投射阴影整个画面立刻失去立体感。另外如果阴影边缘有严重的锯齿或者痤疮优先检查这个Pass是否用了正常的偏移其次再调Shadow Near Plane和Bias。3. 高光与质感让材质“活”起来3.1 卡通高光的两种常见做法漫反射解决的是大形和明暗关系高光解决的是材质质感。同样一块头发有高光和没高光的观感差距很大。日式卡通里常见的高光做法有两类。第一类是基于Blinn-Phong的高光再阈值化这也是最容易理解、最容易控制的方案。先算出高光能量再用smoothstep切出锐利边缘这样能模拟出动画赛璐璐质感里的“塑料高光”和“头发高光”。第二类是程序化高光比如头发的片状高光沿U方向做幂运算或者眼睛高光用独立的贴图和UV控制。这类高光通常占据特定区域效果更细腻但需要额外贴图和美术资源。这节先讲第一类第二类放到后面的材质篇继续展开。3.2 高光形状与边缘光的控制参数把Blinn-Phong高光改造成卡通高光核心代码很短float3 halfDir normalize(lightDir viewDir); half spec pow(saturate(dot(normalWS, halfDir)), _Shininess); half toonSpec smoothstep( _SpecThreshold - _SpecSmooth * 0.5, _SpecThreshold _SpecSmooth * 0.5, spec); fixed3 specColor toonSpec * _SpecColor.rgb; finalColor specColor;参数含义如下。_Shininess控制高光面积数值越大高光越集中日式头发高光一般给到100到500之间皮肤和衣服给到30到100之间。_SpecThreshold控制高光能量阈值太高会让高光消失太低会让高光糊成一片。我的经验值是0.5到0.7之间具体根据环境光强弱微调。_SpecSmooth控制高光边缘软硬0.02到0.08之间比较合适。有一点需要特别提醒卡通高光不要做得太亮、太白。日式动画里的高光更多是一种“形状提示”不是真实的镜面反射。很多新手把_SpecColor调成纯白还加一个很大的强度结果角色看起来像涂了一层油。更日式的做法是让高光颜色接近固有色只是在明度上明显高出一档。边缘光在NHPR里也很常用用来给暗部增加透气感。一个轻量实现half fresnel pow(1.0 - saturate(dot(normalWS, viewDir)), _FresnelPower); finalColor fresnel * _FresnelColor * _FresnelIntensity;注意边缘光不能太强否则会盖过漫反射的主体明暗关系。一般_FresnelPower取3到5_FresnelIntensity取0.2到0.4颜色可以微微偏暖或者偏冷用来帮角色从背景里“跳”出来。4. 面部阴影日式卡通最难也最关键的细节4.1 通用NPR阴影在脸上失效的原因如果直接把上面的漫反射Shader套用到角色头部你会看到特别惊悚的一幕鼻翼两侧、眼窝、下巴这些地方出现细碎的阴影甚至半边脸像被人揍了一样。道理很简单头部模型在五官附近法线变化剧烈通用Toon计算是根据每个像素的法线方向来判定明暗的局部细微的法线波动会被放大成一块块小阴影。日式卡通角色脸部阴影的设计逻辑是“整体的大阴影块”刘海挡住眼睛时阴影从刘海的形状往外切而不是顺着颧骨和眼窝乱跑。所以脸部阴影必须限定在极少数可控的边界上不能交给通用算法自由发挥。第一版最快速的修法是把脸部分离成单独材质然后关掉法线对阴影的过强影响用固定阈值或者一张脸颊阴影贴图去控制。这也是为什么很多日式项目里角色的脸和身体分开用两套材质的原因。4.2 基于法线与遮罩的脸部阴影实现我们先从可接受的第一版做法说起脸部仍然参与NdotL计算但阴影边界只在Half Lambert空间里取一个很小的范围然后通过一张脸颊阴影遮罩图把鼻子、眼睛、嘴巴这些需要保护的区域的阴影盖掉。核心思路是准备一张_FaceShadowMapR通道记录“脸部允许出现阴影”的遮罩越黑代表越保护。在Shader中half faceHalfLambert dot(normalWS, lightDirWS) * 0.5 0.5; half faceLight smoothstep( _FaceShadowThreshold - _FaceShadowSoftness * 0.5, _FaceShadowThreshold _FaceShadowSoftness * 0.5, faceHalfLambert); // faceMask黑色区域强制保持亮部 half faceMask tex2D(_FaceShadowMap, i.uv).r; half shadowEnabled 1.0 - faceMask; faceLight lerp(faceLight, 1.0, shadowEnabled * _FaceShadowInfluence);这里需要注意_FaceShadowThreshold建议直接取0.5左右并且脸部的smoothness要比身体更大一些否则转脸时阴影会突然跳动。_FaceShadowInfluence用来控制遮罩的保护力度0表示不保护1表示完全保护一般给0.5到0.8保留一点点细微阴影会更有立体感。当然真正的日式脸阴影还需要处理“阴影随角色转脸平滑移动”的问题这通常靠SDF脸阴影数据来实现。但SDF需要额外烘焙工具并不适合所有项目。作为着色篇的一部分先用“阈值遮罩”方案把脸部控干净等之后写数据篇再展开SDF烘焙的完整流程。提示脸部法线在建模软件里尽量做平滑不要在旁边面保留硬边法线。如果导入Unity后发现脸部阴影还是碎的先检查模型的法线平滑组别急着改Shader。4.3 眼睛、眉毛的单独保护眼睛和眉毛也需要区别对待。瞳孔通常要始终高亮眉毛要清晰显示形状如果它们也参与统一脸部阴影很容易视觉上“糊成一片”。完整项目里常见做法是脸部贴图提供一张脸的细节遮罩G通道保护眼睛B通道保护眉毛。在上面的Shader基础上前向增加一段half protectEye tex2D(_FaceShadowMap, i.uv).g; faceLight lerp(faceLight, 1.0, protectEye * _EyeProtectStrength); half protectBrow tex2D(_FaceShadowMap, i.uv).b; faceLight lerp(faceLight, 1.0, protectBrow * _BrowProtectStrength);这样保护强度都可以在材质面板上微调不用专门为眼睛和眉毛写两套Pass性能和复杂度都可控。后续如果还要给眼睛加高光可以直接用眼睛UV区域采样一张Mask叠加在发光区域上。5. 实操调优与常见问题排查5.1 材质参数初始值参考不同的模型、不同的光照环境参数肯定不一样但可以先给一组实测下来比较稳的初始值参数推荐范围说明Toon Threshold0.45 ~ 0.55控制阴影面积越大阴影越多Toon Softness0.03 ~ 0.08控制明暗交界线锐利度Shadow Intensity0.5 ~ 0.8控制Shadow Map对明暗的压暗程度Shininess30 ~ 300高光越集中数值越大Spec Threshold0.5 ~ 0.7高光形状主控参数Spec Smooth0.02 ~ 0.08高光边缘软硬Fresnel Power3 ~ 5边缘光衰减速度Fresnel Intensity0.1 ~ 0.4边缘光强度Face Shadow Threshold0.48 ~ 0.55脸部阴影边界Face Shadow Softness0.08 ~ 0.15脸部过渡需要更柔和这套参数适用于大多数日式角色配合Directional Light为主光的场景。天光或环境光的强度如果太高需要同步调整_ShadowColor和_BaseColor的关系避免角色被环境光“漂白”。5.2 用Frame Debugger和可视化方式排查遇到效果不对我一般按这个顺序排查。先在Scene视图里把灯光方向旋转观察模型表面的明暗分界是否随灯光稳定移动。如果分界跳动、闪烁问题多半在Shadow Map参数或者smoothness设置上。再用Frame Debugger确认Shader实际执行了几个Pass有没有意外多一个额外光源的Pass导致明暗叠加异常。最后把材质里的Ramp图临时换成纯黑白台阶确认色阶化结果是否符合预期。法线问题也是重灾区。做法是在材质的Debug模式下把normalWS输出成颜色观察面部和身体是否平滑。如果看到硬接缝就回到建模软件重做法线平滑通常Blender里的“平滑着色”加上“自动光滑”就能解决大部分问题。5.3 常见问题速查表现象常见原因处理办法阴影边缘锯齿严重Toon Softness过小适当提高Softness或在后处理开MSAA背光面死黑Shadow Color和环境光不够调高_ShadowColor明度、增加环境光系数脸部阴影破碎模型法线不平滑修正平滑组或加强脸部遮罩保护高光像油腻塑料感SpecColor过白或Shininess过低降低高光颜色明度提高Shininess明暗分界随镜头闪烁ShadowMap开启硬阴影且Bias过小调整阴影Bias或用柔和阴影与同屏其他PBR角色不协调明暗层级差异太大用Ramp图的三档过渡兼容PBR亮度感知5.4 光照与渲染管线的几点经验如果是URP项目上面的Shader需要把CGPROGRAM改成HLSLPROGRAM并显式引用Lighting.hlsl和Shadow.hlsl光照函数名也要换成URP对应的接口。核心的阈值和Ramp思路不变只是底层函数不同。另外URP下启用SRP Batcher时要注意Shader里的Properties数量不要太多有些参数可以合并到纹理通道里否则会打断合批。多光源场景要注意很多Toon Shader只考虑主方向光一旦来了多个实时光每个光源都走一次光照后明暗档位就会被破坏。最稳妥的方案是只在ForwardBase里计算主光其他光源一律用SH或者不参与。这一点在移动端尤其重要毕竟是每像素的多Pass光照性能开销也不小。说到性能卡通渲染其实比PBR更容易优化因为光照计算简单。但对于移动端VR和微信小游戏这类环境仍然要控制贴图大小和Overdraw尤其Ramp贴图和脸部遮罩图建议压缩成ETC2或者ASTC格式采样精度要求不高可以适当压一压。最后说两句个人体会我在实际项目里踩过最大的坑就是在视网膜上追求“赛璐璐感”却忽略了整体色调统一。漫反射、高光、边缘光、脸影遮罩每一块单独看都没问题合在一起却容易变成“花脸”。后来我把所有材质参数全部暴露成美术可控的Property然后用一组统一的预设让全角色保持同样的Threshold和Softness基准这才慢慢找到协调感。着色只是日式卡通渲染的第一步描边、阴影偏移、头发片状高光、眼睛高光这些内容在每一帧画面里都是半壁江山。下一篇会专门讲描边和轮廓线的实现以及它在不同风格下的取舍到时候我会把“内描边”和“外描边”两种方案放在一起对比方便你直接按项目需求选型。