1. 项目概述二次元角色渲染的挑战与核心思路做二次元风格的角色渲染尤其是用Unity听起来挺酷但真上手了就会发现到处都是坑。从模型导入那一刻起光照不对、描边穿帮、阴影生硬、高光诡异……各种问题层出不穷最后做出来的角色怎么看都像“塑料小人”离原画那种灵动、通透的质感差了十万八千里。我自己在项目里摸爬滚打了好几年从最初对着网上的零散教程照猫画虎到后来能稳定输出符合项目需求的角色渲染效果中间踩过的坑不计其数。今天我就想把这些经验系统地梳理一下围绕“ILM贴图”和“描边融合”这两个核心难点分享一套从贴图准备到Shader实现的完整流程。这不是一个简单的“抄代码”教程而是会重点讲清楚每一步“为什么”要这么做以及在实际项目中可能遇到的“坑”和“解法”。二次元渲染或者说卡通渲染Cel-Shading其核心目标不是追求物理真实而是通过高度风格化的手段模拟出手绘动画的视觉特征。这包括清晰锐利的明暗分界色阶化、非真实感的高光通常是点状或线状、以及标志性的轮廓描边。Unity的默认PBR渲染管线是为写实风格设计的直接用它来做二次元就像用炒菜的锅去煮咖啡工具不对味道自然不对。因此我们需要一套定制化的Shader和配套的资源制作流程。其中ILM贴图Illumination Map和高质量的描边是实现高级卡通渲染效果的两大基石。前者决定了角色在复杂光照下的色彩与光影表现后者则定义了角色的形体感和存在感。很多人做不好二次元角色问题往往就出在这两个环节的理解不到位或实现有瑕疵。2. 核心资产准备深入理解ILM贴图在开始写Shader之前我们必须把“原料”准备好。对于二次元角色渲染除了基础的漫反射贴图Diffuse/Albedo最重要的就是ILM贴图。很多人对它一知半解导致后续的Shader效果怎么调都别扭。2.1 ILM贴图的本质与通道解析ILM贴图本质上是一张多通道的、编码了多种材质信息的工具贴图。它通常是一张RGB三通道的贴图每个通道存储着不同的信息供Shader在运行时解码使用。最常见的通道分配方案如下R通道高光遮罩Specular Mask。这个通道控制角色表面哪些区域会产生高光以及高光的强度。例如头发、金属饰品、皮革、湿润的眼睛等区域需要较强的高光而布料、皮肤等区域的高光则较弱或更柔和。白色值1.0表示完全接受高光黑色值0.0表示无高光。你可以在这里绘制精细的图案比如在头发上画出丝状的高光区域。G通道描边宽度Outline Width或次级高光遮罩。这个通道的用法比较多样取决于你的Shader设计。一种主流用法是控制轮廓描边的粗细。例如角色脸颊边缘、发梢等需要较细的描边以体现柔和感而武器、盔甲边缘则需要较粗的描边来强调轮廓。另一种用法是作为第二层高光例如金属的锐利高光和布料的柔和高光的遮罩。B通道光照遮罩Lighting Mask或色调分离遮罩。这是实现卡通渲染“色阶化”Cel-Shading效果的关键。它决定了漫反射光照如何被“量化”成几个固定的色阶。通常这个通道会绘制出角色受光面的区域划分。例如在脸颊、鼻梁、手臂外侧等通常更亮的地方绘制较浅的灰度在腋下、下巴下方等背光区域绘制较深的灰度。Shader会根据这个通道的值将连续的光照计算结果映射到几个离散的色阶上从而形成卡通片里那种清晰的明暗交界线。注意通道的具体分配并非绝对你可以根据项目需求自定义。但必须在美术制作规范和Shader代码中保持严格一致。一个常见的错误是美术提供的ILM贴图通道含义和Shader读取的通道含义对不上导致渲染结果完全错误。2.2 ILM贴图的制作流程与避坑要点ILM贴图通常由角色原画师或技术美术TA在Photoshop等软件中基于角色的漫反射贴图和法线贴图进行绘制。基础准备准备好角色的漫反射贴图Diffuse和法线贴图Normal Map。法线贴图能提供模型的凹凸细节帮助判断受光区域。分层绘制R通道高光新建一个灰度图层用白色画笔在需要高光的区域如头发高光、金属反光点、眼睛高光进行绘制。注意边缘的过渡硬边高光金属和软边高光皮肤需要用不同硬度的笔刷来处理。G通道描边/次级高光如果是用于控制描边宽度可以新建一个灰度图层用不同深度的灰色来绘制。例如默认描边宽度对应50%灰0.5需要加粗的地方用更浅的灰如0.7需要变细的地方用更深的灰如0.3。这里有个大坑如果模型不同部位的网格密度三角面数差异巨大单纯靠贴图控制描边宽度可能无法获得均匀的效果可能需要结合顶点色或额外的控制贴图来调整这个我们后面在描边部分详细说。B通道光照遮罩这是最需要美术功底的一步。通常可以复制漫反射贴图去色后作为基底然后根据角色结构和光影规律用加深/减淡工具或画笔手动绘制出理想的明暗区域分布。目标是模拟一个理想化的、风格化的主光源通常是顶光照射效果。关键点这个通道绘制的不是真实的阴影而是“美学阴影”。它决定了角色即使处在复杂或多变的光照环境中其基本的明暗构成也是稳定且好看的。合并与输出将绘制好的三个灰度图层分别放入一个PSD文件的R、G、B通道中然后导出为一张RGB格式的贴图如PNG或TGA。在Unity中导入时需要确保Texture Type设置为“Default”并关闭sRGBColor Texture选项因为ILM贴图是数据贴图不是颜色贴图。同时根据平台选择合适的压缩格式如Android用ASTCiOS用PVRTC但要注意压缩不能破坏灰度数据的精度。实操心得在项目初期一定要和美术同学制定好严格的ILM贴图制作规范并提供一个带有注释的范例PSD文件。最好能开发一个简单的Unity编辑器工具用来预览ILM贴图各通道在模型上的效果这样可以快速发现通道错位、绘制错误等问题避免问题留到Shader调试阶段那会非常耗时。3. 核心Shader实现光照与色阶化有了ILM贴图我们就可以开始构建核心的片元着色器Fragment Shader了。这里我们使用Unity的URPUniversal Render Pipeline为例因为它是目前和未来Unity开发的主流选择。3.1 基础光照计算与ILM采样首先我们需要在Shader中获取基础的光照信息。在URP中我们可以使用Lighting.hlsl库中提供的函数。// 在Shader Properties中定义贴图 _Tex (Diffuse, 2D) white {} _ILMTex (ILM Map, 2D) white {} // 可能还需要一些控制参数 _ShadowColor (Shadow Color, Color) (0.5,0.5,0.5,1) _HighlightColor (Highlight Color, Color) (1,1,1,1) _RampOffset (Ramp Offset, Range(-1,1)) 0在片元着色器中// 采样贴图 half4 diffuse SAMPLE_TEXTURE2D(_Tex, sampler_Tex, uv); half4 ilm SAMPLE_TEXTURE2D(_ILMTex, sampler_ILMTex, uv); // 获取主光源信息URP方式 Light mainLight GetMainLight(); float3 lightDir mainLight.direction; float3 lightColor mainLight.color; float attenuation mainLight.distanceAttenuation * mainLight.shadowAttenuation; // 计算兰伯特光照N·L float3 normalWS normalize(input.normalWS); float NdotL dot(normalWS, lightDir); // 将NdotL从[-1,1]映射到[0,1]范围并考虑光照衰减 float lambert saturate(NdotL) * attenuation;现在lambert是一个连续的光照值0到1。接下来我们要用ILM贴图的B通道光照遮罩对它进行“色阶化”处理。3.2 基于ILM的色阶化Cel-Shading实现核心思想是将连续的lambert光照强度与ILM的B通道值我们称之为ilmLightMask相结合通过一个阈值函数输出离散的色阶。一种简单而有效的实现是使用阶梯函数Step或平滑阶梯函数Smoothstep// 从ILM贴图中解码光照遮罩值 float ilmLightMask ilm.b; // 假设B通道是光照遮罩 // 方法1硬边色阶经典卡通 float shadowThreshold ilmLightMask _RampOffset; // _RampOffset用于整体调节明暗 float cel step(shadowThreshold, lambert); // lambert threshold 则为1亮部否则为0暗部 // 方法2软边色阶更柔和 // float cel smoothstep(shadowThreshold - _RampSmooth, shadowThreshold _RampSmooth, lambert); // 混合颜色 float3 finalColor lerp(_ShadowColor * diffuse.rgb, diffuse.rgb * lightColor, cel);这里的关键在于ilmLightMask的运用它为模型表面的不同区域提供了不同的阴影阈值。例如脸颊区域在ILM中画得较亮的shadowThreshold值较高意味着需要更强的光照lambert值更大才能进入亮部而腋下区域在ILM中画得较暗的shadowThreshold值较低即使光照较弱也可能保持在亮部。这样我们就实现了基于绘制的、稳定的明暗分布不受场景光源方向和强度的剧烈影响保证了角色视觉风格的统一性。进阶技巧你可以引入多级色阶。例如除了亮部和暗部再增加一个中间调。这可以通过多个step函数或使用一张一维的渐变纹理Ramp Texture作为查找表来实现将(lambert - ilmLightMask)的结果作为UV的x坐标去采样渐变纹理从而得到更丰富的色彩过渡。3.3 高光与特殊效果集成接下来处理ILM的R通道高光遮罩。// 解码高光遮罩 float specularMask ilm.r; // 计算高光强度这里使用简单的高光模型如Blinn-Phong float3 viewDir normalize(_WorldSpaceCameraPos - input.positionWS); float3 halfDir normalize(lightDir viewDir); float NdotH dot(normalWS, halfDir); float specularIntensity pow(saturate(NdotH), _SpecularGloss); // _SpecularGloss控制高光大小 // 应用高光遮罩和颜色 float3 specular specularIntensity * specularMask * _HighlightColor.rgb * lightColor; // 最终颜色叠加高光 finalColor specular;通过specularMask你可以精确控制高光出现的部位和形状。例如在头发上画出月牙形的高光在眼睛上画出星形高光这些都是通过这张遮罩贴图来实现的。常见问题高光在动画中闪烁或抖动。这通常是因为模型法线在关节弯曲处变化剧烈导致的。解决方法可以是使用一套平滑的法线可能是基于骨骼动画计算的或者在高光计算中引入屏幕空间的导数来平滑处理。4. 描边技术的深度剖析与融合方案轮廓描边是二次元角色的灵魂。一个糟糕的描边会瞬间破坏角色的整体感。描边技术有很多种如基于法线外扩Backface、基于屏幕后处理Sobel Filter、基于几何着色器Geometry Shader等。对于移动端或性能敏感的项目基于法线外扩的背面渲染Backface Outline是目前最主流且性价比最高的方案但它也有其固有的问题需要精心处理才能达到“融合”的完美效果。4.1 基础背面描边原理与实现原理很简单用两个Pass渲染角色。第一个PassOutline Pass渲染稍微放大的背面Cull Front并输出纯色描边色。第二个PassBase Pass正常渲染正面Cull Back。这样背面就会在正面周围形成一圈轮廓。// Outline Pass Pass { Name Outline Tags { LightModeSRPDefaultUnlit } // 描边Pass通常不需要复杂光照 Cull Front // 渲染背面 HLSLPROGRAM struct Attributes { ... }; struct Varyings { ... }; Varyings vert(Attributes input) { Varyings output; // 关键步骤将顶点沿法线方向外扩 float3 normalOS input.normal; float3 viewNormalOS mul((float3x3)UNITY_MATRIX_IT_MV, normalOS); // 将法线变换到视空间 float2 extendDirection normalize(viewNormalOS.xy); // 取xy分量在屏幕平面外扩 float4 clipPos TransformObjectToHClip(input.positionOS.xyz); // 根据外扩方向和设定的宽度偏移裁剪空间坐标 clipPos.xy extendDirection * _OutlineWidth * clipPos.w; // _OutlineWidth受屏幕分辨率影响 output.positionCS clipPos; output.color _OutlineColor; return output; } half4 frag(Varyings input) : SV_Target { return input.color; } ENDHLSL }4.2 描边的核心问题与“融合”解决方案基础实现问题很多会导致描边效果很“糙”宽度不均由于是在视空间沿法线外扩模型表面曲率大的地方如鼻子尖、指尖描边会变细平坦的地方描边会变粗。这不符合绘画中“轮廓线粗细一致”的审美。遮挡错误当角色的一部分被自身另一部分遮挡时如手臂放在身体前本该被身体遮挡的手臂描边依然会显示出来造成视觉错误。与ILM的融合我们之前用ILM的G通道控制了描边宽度但如何应用到顶点着色器里直接乘上去可能效果不佳。解决方案深度与法线缓冲辅助的融合描边为了解决问题1和2我们需要更聪明的外扩方法并利用相机的深度信息。均匀宽度一个改进方案是不在视空间做法线外扩而是在裁剪空间Clip Space做屏幕空间的外扩。我们可以将顶点变换到裁剪空间后直接对其xy坐标即屏幕坐标进行固定像素值的偏移这样描边宽度在屏幕上是均匀的。但这样会丢失3D透视感。一个折中方案是将法线变换到NDCNormalized Device Coordinates空间后再外扩效果会均衡很多。// 改进的均匀外扩思路在顶点着色器中 Varyings vert(Attributes input) { Varyings output; float4 clipPos TransformObjectToHClip(input.positionOS.xyz); // 将法线变换到NDC空间 float3 normalWS TransformObjectToWorldNormal(input.normal); float3 normalVS TransformWorldToViewDir(normalWS); // 到视空间 float3 normalNDC mul((float3x3)UNITY_MATRIX_P, normalVS).xyz; // 通过投影矩阵到NDC空间近似 // 使用NDC空间法线的xy分量进行外扩并考虑ILM控制 float outlineWidth _OutlineWidth * (1.0 - ilm.g); // 假设ILM.g0.5是默认宽度值越大描边越细 clipPos.xy normalize(normalNDC.xy) * outlineWidth * clipPos.w; output.positionCS clipPos; return output; }解决遮挡要解决自身遮挡问题需要用到深度测试Depth Test。思路是在描边Pass中我们让外扩后的顶点深度值Z值比原始正面模型的深度值稍微靠后一点。这样当角色自身有前后重叠时后面的描边就会被前面的正面像素正确遮挡。这通常通过手动输出一个比实际深度稍大的深度值到SV_Depth来实现但需要小心处理深度写入和测试的配置。// 在片元着色器中输出调整后的深度 float4 frag(Varyings input) : SV_Target { // 计算并输出一个比当前片段深度稍大的值 float adjustedDepth input.positionCS.z _OutlineDepthOffset; // 一个很小的正数 return float4(_OutlineColor.rgb, 1); // 注意直接修改SV_Depth在某些移动平台有性能开销或限制需测试。 }更通用的方案是依赖渲染顺序和深度缓冲确保描边Pass在Base Pass之前渲染并使用ZTest Less默认或ZTest LEqual。这样后续渲染的正面像素如果深度更小更近就会覆盖掉对应位置的描边像素。但这只能解决不同物体间的遮挡对自遮挡问题改善有限。对于高质量需求通常需要结合后处理或更复杂的模板缓冲Stencil Buffer方案例如先渲染一次正面写入模板描边Pass只渲染模板未覆盖的区域。4.3 高级融合可编程的描边风格真正的“融合”不仅仅是技术上的正确更是艺术上的可控。我们可以通过ILM贴图的G通道甚至额外的顶点色或贴图来实现风格化的描边。宽度控制如上代码所示用ilm.g来调制_OutlineWidth。你可以在建模时在需要描边变细或消失的地方如角色内侧、头发丝将顶点色涂成特定颜色在Shader中读取这个顶点色来动态关闭或减小描边。颜色与透明度描边颜色不一定是纯黑色。可以根据角色所处的环境光、或角色本身的材质如金属边缘发亮来动态调整描边颜色。甚至可以实现渐变描边或半透明描边。内部描边除了外轮廓有时需要在角色内部如衣服褶皱、五官也添加强调线。这通常无法用背面渲染实现需要借助视差偏移Parallax Offset或距离场Distance Field等更复杂的技术或者直接由美术在Diffuse贴图中绘制。实操心得在移动平台上性能是首要考虑。背面描边方案虽然有两个Draw Call但顶点计算简单通常是可接受的。务必在真机上测试不同分辨率下的描边宽度表现确保在高清屏上不会过细在低清屏上不会过粗。_OutlineWidth参数最好能根据屏幕分辨率进行动态计算如_OutlineWidth / _ScreenParams.y。5. 完整Shader组装与性能优化将光照模型和描边技术整合到一个完整的Shader中并考虑URP的渲染管线兼容性。5.1 Shader结构设计与属性定义Shader Custom/ToonCharacter { Properties { [MainTexture] _BaseMap(Diffuse, 2D) white {} [MainColor] _BaseColor(Base Color, Color) (1,1,1,1) _ILMMap(ILM Map (R:Spec G:Outline B:Light), 2D) white {} _NormalMap(Normal Map, 2D) bump {} // 光照 _ShadowColor(Shadow Color, Color) (0.5,0.5,0.5,1) _RampOffset(Ramp Offset, Range(-1, 1)) 0 _RampSmooth(Ramp Smoothness, Range(0, 0.5)) 0.05 // 高光 _SpecularColor(Specular Color, Color) (1,1,1,1) _SpecularGloss(Specular Gloss, Range(1, 256)) 32 _SpecularIntensity(Specular Intensity, Range(0, 2)) 1 // 描边 _OutlineColor(Outline Color, Color) (0,0,0,1) _OutlineWidth(Outline Width, Range(0, 0.1)) 0.03 _OutlineDepthOffset(Outline Depth Offset, Range(0, 0.01)) 0.0005 } SubShader { Tags { RenderTypeOpaque RenderPipelineUniversalPipeline QueueGeometry } // Pass 0: Outline Pass Pass { Name Outline Tags { LightModeSRPDefaultUnlit } Cull Front ZWrite On // ZTest LEqual // 根据需求调整 ... // 顶点/片元着色器代码 } // Pass 1: Base Pass (Main Lighting) Pass { Name ForwardLit Tags { LightModeUniversalForward } Cull Back ZWrite On ZTest LEqual HLSLPROGRAM #pragma vertex vert #pragma fragment frag #pragma multi_compile _ _MAIN_LIGHT_SHADOWS #pragma multi_compile _ _MAIN_LIGHT_SHADOWS_CASCADE #pragma multi_compile_fog ... // 包含必要的HLSL文件定义结构体和光照计算函数 // 顶点着色器计算世界空间位置、法线、UV等 // 片元着色器整合前面章节的光照和ILM计算 ENDHLSL } // 可以添加额外的Pass如投射阴影的Pass、DepthOnly Pass等 UsePass Universal Render Pipeline/Lit/ShadowCaster } }5.2 URP兼容性与渲染状态设置在URP中需要确保Shader与URP的灯光、阴影系统正确交互。这意味着在Base Pass中我们需要使用URP提供的Lighting.hlsl和Shadow.hlsl中的函数来获取光源和阴影数据而不是自己写一套。同时要正确处理前向渲染路径下的多光源通常卡通角色只受一个主光源显著影响但可能需要简单的附加光。性能优化要点贴图压缩与格式ILM贴图作为数据贴图可以使用更节省带宽的压缩格式如BC4单通道或BC5双通道如果分开存储的话。在移动端可以考虑将ILM信息打包到Diffuse贴图的Alpha通道或其他通道中减少贴图采样次数。Shader变体管理#pragma multi_compile指令会产生大量Shader变体。仔细评估哪些功能是必需的。例如如果角色不需要实时阴影就不要编译阴影相关的变体。计算优化在片元着色器中尽量避免复杂的数学运算如pow、sin、cos。色阶化使用step或lerp比smoothstep更快。考虑将一些计算如世界空间法线移到顶点着色器。批处理与GPU Instancing确保Shader支持GPU Instancing添加#pragma multi_compile_instancing并对使用相同材质、相同网格的角色启用动态合批或静态合批以减少Draw Call。LOD细节层次为远距离的角色准备一个简化版的Shader例如关闭描边、使用更简单的光照计算、甚至降低ILM贴图的分辨率。6. 常见问题排查与调试技巧即使按照流程做了在实际项目中还是会遇到各种诡异的问题。这里记录一些典型的“坑”和解决方法。6.1 渲染问题速查表问题现象可能原因排查步骤与解决方案角色整体发黑或过亮1. 主光源方向或强度异常。2._RampOffset参数设置极端。3. ILM贴图B通道光照遮罩全黑或全白。1. 检查场景光源确保主光源Directional Light启用且强度正常。2. 将_RampOffset重置为0。3. 在材质球预览窗口或Frame Debugger中单独查看ILM贴图B通道的采样结果是否正确。明暗分界处出现锯齿或闪烁1. 色阶化使用的step函数导致硬边且模型面数不足。2. 光照计算在相邻像素间变化剧烈。1. 改用smoothstep并设置一个很小的_RampSmooth值进行抗锯齿。2. 确保法线贴图已正确导入并设置为Normal Map格式法线信息平滑。检查顶点法线是否因模型导出设置错误而有问题。高光位置错误或形状怪异1. ILM贴图R通道高光遮罩绘制错误。2. 高光计算使用的法线有误可能是切线空间错误。3._SpecularGloss值不合适。1. 检查ILM贴图R通道确保高光区域绘制在正确的UV位置。2. 确认Normal Map是否正确连接并在Shader中正确从切线空间转换到世界空间。3. 调整_SpecularGloss值越大高光点越小越锐利。描边时有时无或宽度不一致1. 描边Pass的顶点外扩计算有误特别是法线变换部分。2. 模型某些部位法线信息不连续或错误。3. 深度测试ZTest设置导致描边被自身或背景遮挡。1. 在顶点着色器中输出外扩偏移量到颜色可视化检查偏移方向是否正确、均匀。2. 在3D软件中检查模型法线确保是统一的软硬边设置。3. 尝试调整描边Pass的ZTest为Always或LEqual并微调_OutlineDepthOffset。描边在特定角度断裂或消失1. 背面剔除Cull Front导致在特定视角下某些面的“背面”定义发生变化。2. 顶点外扩方向计算在屏幕边缘或特定角度失效。1. 这是一个背面描边的固有限制。可考虑切换到基于屏幕空间法线的后处理描边方案但性能开销更大。2. 确保外扩计算时对法线进行了正确的归一化normalize并处理法线为零向量的边界情况。Shader在真机上变粉红色1. Shader编译错误Fallback到了Unity的错误着色器粉色。2. 使用了目标平台不支持的Shader语法或特性。1. 在Unity编辑器的Shader编译日志中查看错误信息。2. 检查是否使用了ES2.0不支持的函数如ddx/ddy或纹理采样指令超出限制。简化Shader或为移动平台编写一个简化版本。性能开销过大1. Shader计算过于复杂片元着色器指令数过高。2. 贴图采样次数过多或分辨率过高。3. 没有启用合批Draw Call过高。1. 使用Unity的Shader Profiler或Frame Debugger分析瓶颈。简化光照模型减少纹理采样如合并贴图。2. 为不同档位的设备设置不同的ILM贴图分辨率。3. 确保材质球尽可能共享并满足SRP Batcher或动态合批的条件。6.2 实用调试技巧可视化调试在Shader开发中临时将中间变量如lambert,ilmLightMask,cel, 外扩方向等输出为片元颜色是定位问题最快的方法。例如return float4(ilmLightMask, ilmLightMask, ilmLightMask, 1);可以查看光照遮罩的分布。使用Frame DebuggerUnity的Frame Debugger是神器。你可以一步步查看每个Draw Call的渲染状态、使用的Shader、传入的参数和渲染结果精确找到是哪个Pass、哪个参数导致了问题。分离测试当效果异常时先注释掉描边Pass只测试基础光照是否正确。或者将ILM贴图换成纯灰色测试图排除贴图本身的问题。平台差异PC上正常Android/iOS上不正常的情况太常见了。尽早进行真机测试注意不同GPU架构如Mali, Adreno, PowerVR对精度、纹理压缩、Shader语法的支持差异。 Unity二次元角色渲染实战：ILM贴图与描边融合技术详解
1. 项目概述二次元角色渲染的挑战与核心思路做二次元风格的角色渲染尤其是用Unity听起来挺酷但真上手了就会发现到处都是坑。从模型导入那一刻起光照不对、描边穿帮、阴影生硬、高光诡异……各种问题层出不穷最后做出来的角色怎么看都像“塑料小人”离原画那种灵动、通透的质感差了十万八千里。我自己在项目里摸爬滚打了好几年从最初对着网上的零散教程照猫画虎到后来能稳定输出符合项目需求的角色渲染效果中间踩过的坑不计其数。今天我就想把这些经验系统地梳理一下围绕“ILM贴图”和“描边融合”这两个核心难点分享一套从贴图准备到Shader实现的完整流程。这不是一个简单的“抄代码”教程而是会重点讲清楚每一步“为什么”要这么做以及在实际项目中可能遇到的“坑”和“解法”。二次元渲染或者说卡通渲染Cel-Shading其核心目标不是追求物理真实而是通过高度风格化的手段模拟出手绘动画的视觉特征。这包括清晰锐利的明暗分界色阶化、非真实感的高光通常是点状或线状、以及标志性的轮廓描边。Unity的默认PBR渲染管线是为写实风格设计的直接用它来做二次元就像用炒菜的锅去煮咖啡工具不对味道自然不对。因此我们需要一套定制化的Shader和配套的资源制作流程。其中ILM贴图Illumination Map和高质量的描边是实现高级卡通渲染效果的两大基石。前者决定了角色在复杂光照下的色彩与光影表现后者则定义了角色的形体感和存在感。很多人做不好二次元角色问题往往就出在这两个环节的理解不到位或实现有瑕疵。2. 核心资产准备深入理解ILM贴图在开始写Shader之前我们必须把“原料”准备好。对于二次元角色渲染除了基础的漫反射贴图Diffuse/Albedo最重要的就是ILM贴图。很多人对它一知半解导致后续的Shader效果怎么调都别扭。2.1 ILM贴图的本质与通道解析ILM贴图本质上是一张多通道的、编码了多种材质信息的工具贴图。它通常是一张RGB三通道的贴图每个通道存储着不同的信息供Shader在运行时解码使用。最常见的通道分配方案如下R通道高光遮罩Specular Mask。这个通道控制角色表面哪些区域会产生高光以及高光的强度。例如头发、金属饰品、皮革、湿润的眼睛等区域需要较强的高光而布料、皮肤等区域的高光则较弱或更柔和。白色值1.0表示完全接受高光黑色值0.0表示无高光。你可以在这里绘制精细的图案比如在头发上画出丝状的高光区域。G通道描边宽度Outline Width或次级高光遮罩。这个通道的用法比较多样取决于你的Shader设计。一种主流用法是控制轮廓描边的粗细。例如角色脸颊边缘、发梢等需要较细的描边以体现柔和感而武器、盔甲边缘则需要较粗的描边来强调轮廓。另一种用法是作为第二层高光例如金属的锐利高光和布料的柔和高光的遮罩。B通道光照遮罩Lighting Mask或色调分离遮罩。这是实现卡通渲染“色阶化”Cel-Shading效果的关键。它决定了漫反射光照如何被“量化”成几个固定的色阶。通常这个通道会绘制出角色受光面的区域划分。例如在脸颊、鼻梁、手臂外侧等通常更亮的地方绘制较浅的灰度在腋下、下巴下方等背光区域绘制较深的灰度。Shader会根据这个通道的值将连续的光照计算结果映射到几个离散的色阶上从而形成卡通片里那种清晰的明暗交界线。注意通道的具体分配并非绝对你可以根据项目需求自定义。但必须在美术制作规范和Shader代码中保持严格一致。一个常见的错误是美术提供的ILM贴图通道含义和Shader读取的通道含义对不上导致渲染结果完全错误。2.2 ILM贴图的制作流程与避坑要点ILM贴图通常由角色原画师或技术美术TA在Photoshop等软件中基于角色的漫反射贴图和法线贴图进行绘制。基础准备准备好角色的漫反射贴图Diffuse和法线贴图Normal Map。法线贴图能提供模型的凹凸细节帮助判断受光区域。分层绘制R通道高光新建一个灰度图层用白色画笔在需要高光的区域如头发高光、金属反光点、眼睛高光进行绘制。注意边缘的过渡硬边高光金属和软边高光皮肤需要用不同硬度的笔刷来处理。G通道描边/次级高光如果是用于控制描边宽度可以新建一个灰度图层用不同深度的灰色来绘制。例如默认描边宽度对应50%灰0.5需要加粗的地方用更浅的灰如0.7需要变细的地方用更深的灰如0.3。这里有个大坑如果模型不同部位的网格密度三角面数差异巨大单纯靠贴图控制描边宽度可能无法获得均匀的效果可能需要结合顶点色或额外的控制贴图来调整这个我们后面在描边部分详细说。B通道光照遮罩这是最需要美术功底的一步。通常可以复制漫反射贴图去色后作为基底然后根据角色结构和光影规律用加深/减淡工具或画笔手动绘制出理想的明暗区域分布。目标是模拟一个理想化的、风格化的主光源通常是顶光照射效果。关键点这个通道绘制的不是真实的阴影而是“美学阴影”。它决定了角色即使处在复杂或多变的光照环境中其基本的明暗构成也是稳定且好看的。合并与输出将绘制好的三个灰度图层分别放入一个PSD文件的R、G、B通道中然后导出为一张RGB格式的贴图如PNG或TGA。在Unity中导入时需要确保Texture Type设置为“Default”并关闭sRGBColor Texture选项因为ILM贴图是数据贴图不是颜色贴图。同时根据平台选择合适的压缩格式如Android用ASTCiOS用PVRTC但要注意压缩不能破坏灰度数据的精度。实操心得在项目初期一定要和美术同学制定好严格的ILM贴图制作规范并提供一个带有注释的范例PSD文件。最好能开发一个简单的Unity编辑器工具用来预览ILM贴图各通道在模型上的效果这样可以快速发现通道错位、绘制错误等问题避免问题留到Shader调试阶段那会非常耗时。3. 核心Shader实现光照与色阶化有了ILM贴图我们就可以开始构建核心的片元着色器Fragment Shader了。这里我们使用Unity的URPUniversal Render Pipeline为例因为它是目前和未来Unity开发的主流选择。3.1 基础光照计算与ILM采样首先我们需要在Shader中获取基础的光照信息。在URP中我们可以使用Lighting.hlsl库中提供的函数。// 在Shader Properties中定义贴图 _Tex (Diffuse, 2D) white {} _ILMTex (ILM Map, 2D) white {} // 可能还需要一些控制参数 _ShadowColor (Shadow Color, Color) (0.5,0.5,0.5,1) _HighlightColor (Highlight Color, Color) (1,1,1,1) _RampOffset (Ramp Offset, Range(-1,1)) 0在片元着色器中// 采样贴图 half4 diffuse SAMPLE_TEXTURE2D(_Tex, sampler_Tex, uv); half4 ilm SAMPLE_TEXTURE2D(_ILMTex, sampler_ILMTex, uv); // 获取主光源信息URP方式 Light mainLight GetMainLight(); float3 lightDir mainLight.direction; float3 lightColor mainLight.color; float attenuation mainLight.distanceAttenuation * mainLight.shadowAttenuation; // 计算兰伯特光照N·L float3 normalWS normalize(input.normalWS); float NdotL dot(normalWS, lightDir); // 将NdotL从[-1,1]映射到[0,1]范围并考虑光照衰减 float lambert saturate(NdotL) * attenuation;现在lambert是一个连续的光照值0到1。接下来我们要用ILM贴图的B通道光照遮罩对它进行“色阶化”处理。3.2 基于ILM的色阶化Cel-Shading实现核心思想是将连续的lambert光照强度与ILM的B通道值我们称之为ilmLightMask相结合通过一个阈值函数输出离散的色阶。一种简单而有效的实现是使用阶梯函数Step或平滑阶梯函数Smoothstep// 从ILM贴图中解码光照遮罩值 float ilmLightMask ilm.b; // 假设B通道是光照遮罩 // 方法1硬边色阶经典卡通 float shadowThreshold ilmLightMask _RampOffset; // _RampOffset用于整体调节明暗 float cel step(shadowThreshold, lambert); // lambert threshold 则为1亮部否则为0暗部 // 方法2软边色阶更柔和 // float cel smoothstep(shadowThreshold - _RampSmooth, shadowThreshold _RampSmooth, lambert); // 混合颜色 float3 finalColor lerp(_ShadowColor * diffuse.rgb, diffuse.rgb * lightColor, cel);这里的关键在于ilmLightMask的运用它为模型表面的不同区域提供了不同的阴影阈值。例如脸颊区域在ILM中画得较亮的shadowThreshold值较高意味着需要更强的光照lambert值更大才能进入亮部而腋下区域在ILM中画得较暗的shadowThreshold值较低即使光照较弱也可能保持在亮部。这样我们就实现了基于绘制的、稳定的明暗分布不受场景光源方向和强度的剧烈影响保证了角色视觉风格的统一性。进阶技巧你可以引入多级色阶。例如除了亮部和暗部再增加一个中间调。这可以通过多个step函数或使用一张一维的渐变纹理Ramp Texture作为查找表来实现将(lambert - ilmLightMask)的结果作为UV的x坐标去采样渐变纹理从而得到更丰富的色彩过渡。3.3 高光与特殊效果集成接下来处理ILM的R通道高光遮罩。// 解码高光遮罩 float specularMask ilm.r; // 计算高光强度这里使用简单的高光模型如Blinn-Phong float3 viewDir normalize(_WorldSpaceCameraPos - input.positionWS); float3 halfDir normalize(lightDir viewDir); float NdotH dot(normalWS, halfDir); float specularIntensity pow(saturate(NdotH), _SpecularGloss); // _SpecularGloss控制高光大小 // 应用高光遮罩和颜色 float3 specular specularIntensity * specularMask * _HighlightColor.rgb * lightColor; // 最终颜色叠加高光 finalColor specular;通过specularMask你可以精确控制高光出现的部位和形状。例如在头发上画出月牙形的高光在眼睛上画出星形高光这些都是通过这张遮罩贴图来实现的。常见问题高光在动画中闪烁或抖动。这通常是因为模型法线在关节弯曲处变化剧烈导致的。解决方法可以是使用一套平滑的法线可能是基于骨骼动画计算的或者在高光计算中引入屏幕空间的导数来平滑处理。4. 描边技术的深度剖析与融合方案轮廓描边是二次元角色的灵魂。一个糟糕的描边会瞬间破坏角色的整体感。描边技术有很多种如基于法线外扩Backface、基于屏幕后处理Sobel Filter、基于几何着色器Geometry Shader等。对于移动端或性能敏感的项目基于法线外扩的背面渲染Backface Outline是目前最主流且性价比最高的方案但它也有其固有的问题需要精心处理才能达到“融合”的完美效果。4.1 基础背面描边原理与实现原理很简单用两个Pass渲染角色。第一个PassOutline Pass渲染稍微放大的背面Cull Front并输出纯色描边色。第二个PassBase Pass正常渲染正面Cull Back。这样背面就会在正面周围形成一圈轮廓。// Outline Pass Pass { Name Outline Tags { LightModeSRPDefaultUnlit } // 描边Pass通常不需要复杂光照 Cull Front // 渲染背面 HLSLPROGRAM struct Attributes { ... }; struct Varyings { ... }; Varyings vert(Attributes input) { Varyings output; // 关键步骤将顶点沿法线方向外扩 float3 normalOS input.normal; float3 viewNormalOS mul((float3x3)UNITY_MATRIX_IT_MV, normalOS); // 将法线变换到视空间 float2 extendDirection normalize(viewNormalOS.xy); // 取xy分量在屏幕平面外扩 float4 clipPos TransformObjectToHClip(input.positionOS.xyz); // 根据外扩方向和设定的宽度偏移裁剪空间坐标 clipPos.xy extendDirection * _OutlineWidth * clipPos.w; // _OutlineWidth受屏幕分辨率影响 output.positionCS clipPos; output.color _OutlineColor; return output; } half4 frag(Varyings input) : SV_Target { return input.color; } ENDHLSL }4.2 描边的核心问题与“融合”解决方案基础实现问题很多会导致描边效果很“糙”宽度不均由于是在视空间沿法线外扩模型表面曲率大的地方如鼻子尖、指尖描边会变细平坦的地方描边会变粗。这不符合绘画中“轮廓线粗细一致”的审美。遮挡错误当角色的一部分被自身另一部分遮挡时如手臂放在身体前本该被身体遮挡的手臂描边依然会显示出来造成视觉错误。与ILM的融合我们之前用ILM的G通道控制了描边宽度但如何应用到顶点着色器里直接乘上去可能效果不佳。解决方案深度与法线缓冲辅助的融合描边为了解决问题1和2我们需要更聪明的外扩方法并利用相机的深度信息。均匀宽度一个改进方案是不在视空间做法线外扩而是在裁剪空间Clip Space做屏幕空间的外扩。我们可以将顶点变换到裁剪空间后直接对其xy坐标即屏幕坐标进行固定像素值的偏移这样描边宽度在屏幕上是均匀的。但这样会丢失3D透视感。一个折中方案是将法线变换到NDCNormalized Device Coordinates空间后再外扩效果会均衡很多。// 改进的均匀外扩思路在顶点着色器中 Varyings vert(Attributes input) { Varyings output; float4 clipPos TransformObjectToHClip(input.positionOS.xyz); // 将法线变换到NDC空间 float3 normalWS TransformObjectToWorldNormal(input.normal); float3 normalVS TransformWorldToViewDir(normalWS); // 到视空间 float3 normalNDC mul((float3x3)UNITY_MATRIX_P, normalVS).xyz; // 通过投影矩阵到NDC空间近似 // 使用NDC空间法线的xy分量进行外扩并考虑ILM控制 float outlineWidth _OutlineWidth * (1.0 - ilm.g); // 假设ILM.g0.5是默认宽度值越大描边越细 clipPos.xy normalize(normalNDC.xy) * outlineWidth * clipPos.w; output.positionCS clipPos; return output; }解决遮挡要解决自身遮挡问题需要用到深度测试Depth Test。思路是在描边Pass中我们让外扩后的顶点深度值Z值比原始正面模型的深度值稍微靠后一点。这样当角色自身有前后重叠时后面的描边就会被前面的正面像素正确遮挡。这通常通过手动输出一个比实际深度稍大的深度值到SV_Depth来实现但需要小心处理深度写入和测试的配置。// 在片元着色器中输出调整后的深度 float4 frag(Varyings input) : SV_Target { // 计算并输出一个比当前片段深度稍大的值 float adjustedDepth input.positionCS.z _OutlineDepthOffset; // 一个很小的正数 return float4(_OutlineColor.rgb, 1); // 注意直接修改SV_Depth在某些移动平台有性能开销或限制需测试。 }更通用的方案是依赖渲染顺序和深度缓冲确保描边Pass在Base Pass之前渲染并使用ZTest Less默认或ZTest LEqual。这样后续渲染的正面像素如果深度更小更近就会覆盖掉对应位置的描边像素。但这只能解决不同物体间的遮挡对自遮挡问题改善有限。对于高质量需求通常需要结合后处理或更复杂的模板缓冲Stencil Buffer方案例如先渲染一次正面写入模板描边Pass只渲染模板未覆盖的区域。4.3 高级融合可编程的描边风格真正的“融合”不仅仅是技术上的正确更是艺术上的可控。我们可以通过ILM贴图的G通道甚至额外的顶点色或贴图来实现风格化的描边。宽度控制如上代码所示用ilm.g来调制_OutlineWidth。你可以在建模时在需要描边变细或消失的地方如角色内侧、头发丝将顶点色涂成特定颜色在Shader中读取这个顶点色来动态关闭或减小描边。颜色与透明度描边颜色不一定是纯黑色。可以根据角色所处的环境光、或角色本身的材质如金属边缘发亮来动态调整描边颜色。甚至可以实现渐变描边或半透明描边。内部描边除了外轮廓有时需要在角色内部如衣服褶皱、五官也添加强调线。这通常无法用背面渲染实现需要借助视差偏移Parallax Offset或距离场Distance Field等更复杂的技术或者直接由美术在Diffuse贴图中绘制。实操心得在移动平台上性能是首要考虑。背面描边方案虽然有两个Draw Call但顶点计算简单通常是可接受的。务必在真机上测试不同分辨率下的描边宽度表现确保在高清屏上不会过细在低清屏上不会过粗。_OutlineWidth参数最好能根据屏幕分辨率进行动态计算如_OutlineWidth / _ScreenParams.y。5. 完整Shader组装与性能优化将光照模型和描边技术整合到一个完整的Shader中并考虑URP的渲染管线兼容性。5.1 Shader结构设计与属性定义Shader Custom/ToonCharacter { Properties { [MainTexture] _BaseMap(Diffuse, 2D) white {} [MainColor] _BaseColor(Base Color, Color) (1,1,1,1) _ILMMap(ILM Map (R:Spec G:Outline B:Light), 2D) white {} _NormalMap(Normal Map, 2D) bump {} // 光照 _ShadowColor(Shadow Color, Color) (0.5,0.5,0.5,1) _RampOffset(Ramp Offset, Range(-1, 1)) 0 _RampSmooth(Ramp Smoothness, Range(0, 0.5)) 0.05 // 高光 _SpecularColor(Specular Color, Color) (1,1,1,1) _SpecularGloss(Specular Gloss, Range(1, 256)) 32 _SpecularIntensity(Specular Intensity, Range(0, 2)) 1 // 描边 _OutlineColor(Outline Color, Color) (0,0,0,1) _OutlineWidth(Outline Width, Range(0, 0.1)) 0.03 _OutlineDepthOffset(Outline Depth Offset, Range(0, 0.01)) 0.0005 } SubShader { Tags { RenderTypeOpaque RenderPipelineUniversalPipeline QueueGeometry } // Pass 0: Outline Pass Pass { Name Outline Tags { LightModeSRPDefaultUnlit } Cull Front ZWrite On // ZTest LEqual // 根据需求调整 ... // 顶点/片元着色器代码 } // Pass 1: Base Pass (Main Lighting) Pass { Name ForwardLit Tags { LightModeUniversalForward } Cull Back ZWrite On ZTest LEqual HLSLPROGRAM #pragma vertex vert #pragma fragment frag #pragma multi_compile _ _MAIN_LIGHT_SHADOWS #pragma multi_compile _ _MAIN_LIGHT_SHADOWS_CASCADE #pragma multi_compile_fog ... // 包含必要的HLSL文件定义结构体和光照计算函数 // 顶点着色器计算世界空间位置、法线、UV等 // 片元着色器整合前面章节的光照和ILM计算 ENDHLSL } // 可以添加额外的Pass如投射阴影的Pass、DepthOnly Pass等 UsePass Universal Render Pipeline/Lit/ShadowCaster } }5.2 URP兼容性与渲染状态设置在URP中需要确保Shader与URP的灯光、阴影系统正确交互。这意味着在Base Pass中我们需要使用URP提供的Lighting.hlsl和Shadow.hlsl中的函数来获取光源和阴影数据而不是自己写一套。同时要正确处理前向渲染路径下的多光源通常卡通角色只受一个主光源显著影响但可能需要简单的附加光。性能优化要点贴图压缩与格式ILM贴图作为数据贴图可以使用更节省带宽的压缩格式如BC4单通道或BC5双通道如果分开存储的话。在移动端可以考虑将ILM信息打包到Diffuse贴图的Alpha通道或其他通道中减少贴图采样次数。Shader变体管理#pragma multi_compile指令会产生大量Shader变体。仔细评估哪些功能是必需的。例如如果角色不需要实时阴影就不要编译阴影相关的变体。计算优化在片元着色器中尽量避免复杂的数学运算如pow、sin、cos。色阶化使用step或lerp比smoothstep更快。考虑将一些计算如世界空间法线移到顶点着色器。批处理与GPU Instancing确保Shader支持GPU Instancing添加#pragma multi_compile_instancing并对使用相同材质、相同网格的角色启用动态合批或静态合批以减少Draw Call。LOD细节层次为远距离的角色准备一个简化版的Shader例如关闭描边、使用更简单的光照计算、甚至降低ILM贴图的分辨率。6. 常见问题排查与调试技巧即使按照流程做了在实际项目中还是会遇到各种诡异的问题。这里记录一些典型的“坑”和解决方法。6.1 渲染问题速查表问题现象可能原因排查步骤与解决方案角色整体发黑或过亮1. 主光源方向或强度异常。2._RampOffset参数设置极端。3. ILM贴图B通道光照遮罩全黑或全白。1. 检查场景光源确保主光源Directional Light启用且强度正常。2. 将_RampOffset重置为0。3. 在材质球预览窗口或Frame Debugger中单独查看ILM贴图B通道的采样结果是否正确。明暗分界处出现锯齿或闪烁1. 色阶化使用的step函数导致硬边且模型面数不足。2. 光照计算在相邻像素间变化剧烈。1. 改用smoothstep并设置一个很小的_RampSmooth值进行抗锯齿。2. 确保法线贴图已正确导入并设置为Normal Map格式法线信息平滑。检查顶点法线是否因模型导出设置错误而有问题。高光位置错误或形状怪异1. ILM贴图R通道高光遮罩绘制错误。2. 高光计算使用的法线有误可能是切线空间错误。3._SpecularGloss值不合适。1. 检查ILM贴图R通道确保高光区域绘制在正确的UV位置。2. 确认Normal Map是否正确连接并在Shader中正确从切线空间转换到世界空间。3. 调整_SpecularGloss值越大高光点越小越锐利。描边时有时无或宽度不一致1. 描边Pass的顶点外扩计算有误特别是法线变换部分。2. 模型某些部位法线信息不连续或错误。3. 深度测试ZTest设置导致描边被自身或背景遮挡。1. 在顶点着色器中输出外扩偏移量到颜色可视化检查偏移方向是否正确、均匀。2. 在3D软件中检查模型法线确保是统一的软硬边设置。3. 尝试调整描边Pass的ZTest为Always或LEqual并微调_OutlineDepthOffset。描边在特定角度断裂或消失1. 背面剔除Cull Front导致在特定视角下某些面的“背面”定义发生变化。2. 顶点外扩方向计算在屏幕边缘或特定角度失效。1. 这是一个背面描边的固有限制。可考虑切换到基于屏幕空间法线的后处理描边方案但性能开销更大。2. 确保外扩计算时对法线进行了正确的归一化normalize并处理法线为零向量的边界情况。Shader在真机上变粉红色1. Shader编译错误Fallback到了Unity的错误着色器粉色。2. 使用了目标平台不支持的Shader语法或特性。1. 在Unity编辑器的Shader编译日志中查看错误信息。2. 检查是否使用了ES2.0不支持的函数如ddx/ddy或纹理采样指令超出限制。简化Shader或为移动平台编写一个简化版本。性能开销过大1. Shader计算过于复杂片元着色器指令数过高。2. 贴图采样次数过多或分辨率过高。3. 没有启用合批Draw Call过高。1. 使用Unity的Shader Profiler或Frame Debugger分析瓶颈。简化光照模型减少纹理采样如合并贴图。2. 为不同档位的设备设置不同的ILM贴图分辨率。3. 确保材质球尽可能共享并满足SRP Batcher或动态合批的条件。6.2 实用调试技巧可视化调试在Shader开发中临时将中间变量如lambert,ilmLightMask,cel, 外扩方向等输出为片元颜色是定位问题最快的方法。例如return float4(ilmLightMask, ilmLightMask, ilmLightMask, 1);可以查看光照遮罩的分布。使用Frame DebuggerUnity的Frame Debugger是神器。你可以一步步查看每个Draw Call的渲染状态、使用的Shader、传入的参数和渲染结果精确找到是哪个Pass、哪个参数导致了问题。分离测试当效果异常时先注释掉描边Pass只测试基础光照是否正确。或者将ILM贴图换成纯灰色测试图排除贴图本身的问题。平台差异PC上正常Android/iOS上不正常的情况太常见了。尽早进行真机测试注意不同GPU架构如Mali, Adreno, PowerVR对精度、纹理压缩、Shader语法的支持差异。