1. 项目概述为什么Toon Shader是Unity美术与程序员的必修课如果你在Unity里做过写实渲染可能会觉得卡通渲染Toon Shading看起来“简单”——不就是几个色块加上描边嘛。但真正上手后你会发现这完全是另一个世界。写实渲染追求的是物理正确光线怎么走材质怎么反射都有公式可循。而卡通渲染追求的是“风格化正确”它更像是在用代码画画每一道阴影的边界、每一处高光的形状都直接决定了角色的性格和画面的情绪。这就是为什么Unity的Toon Shader或称NPR非真实感渲染技术不仅是独立游戏、二次元项目的心头好也越来越多地出现在3A大作的风格化表达中。我见过太多项目美术画出了惊艳的概念图程序也写出了复杂的逻辑但最后卡在了渲染这一关。模型导进去默认的PBR材质一上瞬间从“心动角色”变成了“塑料玩具”。问题的核心就在于传统的渲染管线不理解什么是“卡通感”。Toon Shader就是来解决这个问题的它通过一系列数学技巧和美术可控的参数将连续的光照计算结果“离散化”、“平面化”从而模拟出手绘或动画的视觉效果。对于Unity开发者而言无论是想快速实现一个赛璐璐风格的独立游戏还是为写实项目增加一些风格化的过场动画掌握Toon Shader都是打通美术与技术壁垒的关键技能。这篇指南就是带你绕过我踩过的所有坑从原理到实践快速构建起属于自己的卡通渲染管线。2. Toon Shader核心原理拆解从连续光照到风格化色块要玩转Toon Shader不能只停留在调参数的层面必须理解其背后的核心思想。它的目标不是模拟物理而是模拟“绘画规则”。2.1 光照模型的重构兰伯特与阶跃函数在标准的兰伯特Lambert光照模型中漫反射光的强度计算公式是max(0, dot(N, L))其中N是法线L是光线方向。这个结果是一个从0到1的连续值对应着从暗部到亮部的平滑过渡。卡通渲染的第一步就是打破这种连续性。最经典的方法是使用“阶跃函数”Step Function或“平滑阶跃函数”Smoothstep。我们不再直接使用点积结果而是将其与一个或多个阈值Threshold进行比较。// 基础的一阶卡通着色 float ndotl dot(normalDir, lightDir); float ramp step(_RampThreshold, ndotl); // _RampThreshold 例如 0.5 float3 diffuse _LightColor0.rgb * _Color.rgb * ramp;这段代码意味着当法线和光线的点积大于0.5时我们将其视为“亮部”赋予亮部颜色小于等于0.5时视为“暗部”赋予暗部颜色。于是平滑的光照渐变瞬间变成了清晰的两色分界。这就是卡通渲染中最基础的“二分阴影”Cel Shading。但现实中的卡通片阴影往往不止一阶。我们可以引入多个阈值实现多阶的色块变化这被称为“色阶”Color Ramp。通常我们会使用一张一维纹理Ramp Texture来存储这些色阶。将计算出的ndotl从-1到1重新映射到0到1的UV坐标然后去采样这张Ramp贴图。// 使用Ramp贴图实现多阶阴影 float ndotl dot(normalDir, lightDir) * 0.5 0.5; // 映射到 [0, 1] float2 rampUV float2(ndotl, 0.5); // 假设Ramp贴图是竖条 float3 rampColor tex2D(_RampTex, rampUV).rgb; float3 diffuse _LightColor0.rgb * _Color.rgb * rampColor;通过精心绘制Ramp贴图你可以轻松实现从双色到多色、甚至带有色彩偏移如暗部偏冷、亮部偏暖的复杂卡通光照效果且完全由美术可控。2.2 描边Outline的常见实现方案与取舍描边是卡通风格的灵魂它能极大地增强物体的轮廓感和立体感。在Unity中实现描边主要有三种主流方案各有优劣。方案一后处理描边Post-processing Outline这种方法基于整个屏幕的深度Depth和法线Normal信息通过检测相邻像素间的深度或法线差异来勾勒边缘。在URP/HDRP中使用Renderer Features可以方便地添加。优点实现简单与场景复杂度无关对所有物体一次性生效。缺点描边质量受深度/法线纹理精度限制容易产生锯齿或漏边难以对特定物体进行差异化控制比如主角描边粗背景描边细性能开销固定但可能为不需要描边的物体也支付成本。适用场景快速原型风格化场景的整体轮廓强调。方案二基于几何扩边的描边Geometry Shader / Shell Outline这是在模型阶段进行的操作。最常见的是“背面膨胀法”在Shader中渲染两遍模型。第一遍用正面剔除Cull Front渲染一个沿着顶点法线方向轻微放大的模型并赋予纯色描边色第二遍正常渲染模型本身。// 简化版的背面膨胀顶点Shader v2f vert_outline (appdata v) { v2f o; float3 normal normalize(v.normal); float3 pos v.vertex.xyz normal * _OutlineWidth; // 沿法线外扩 o.pos UnityObjectToClipPos(float4(pos, 1.0)); o.color _OutlineColor; return o; }优点描边稳定、清晰粗细可通过_OutlineWidth精确控制且能基于顶点色或UV实现局部变粗变细等艺术效果。缺点在硬边棱角处由于顶点法线是共享的描边会在角落“断裂”。需要额外的技巧如使用平滑法线或单独一套描边网格来修复。几何复杂度翻倍对性能有影响。适用场景角色、主要道具等需要高质量、可定制化描边的物体。方案三基于屏幕空间距离场的描边SDF Outline这是一种较新的技术通过生成场景中物体的有向距离场SDF图然后在后处理中根据距离场信息生成描边。它能产生非常柔和、可动态变化的描边效果。优点效果极其艺术化可以实现水墨晕染、毛绒质感等特殊描边。缺点实现复杂性能开销大需要现代GPU支持。适用场景追求顶级艺术效果的高预算项目。实操心得对于大多数项目我推荐**方案二背面膨胀法**作为角色的标准描边方案。虽然需要处理硬边问题但其稳定性和可控性是无可替代的。处理硬边断裂的经典方法是使用“平滑法线”Smoothed Normal。你可以选择在建模软件中预先计算并存入顶点色或第二套UV或者在Shader中根据相邻三角面信息实时计算后者更灵活但更耗性能。一个折中的好办法是让美术在建模时对需要平滑描边的区域如角色的脸颊、手臂等手动标记顶点色然后在Shader中读取这个值来混合原始法线和平滑法线。2.3 高光与反射的风格化处理卡通风格的高光Specular绝不是写实渲染中那个圆润的光斑。它通常是锐利的、形状规则的亮块甚至是星形的。我们可以通过改造Phong或Blinn-Phong高光模型来实现。核心思路同样是“离散化”。计算高光强度因子后不是直接使用而是通过一个step或smoothstep函数将其转换为0或1的硬边或者一个平滑但范围有限的过渡。// 卡通风格高光 float3 viewDir normalize(_WorldSpaceCameraPos - worldPos); float3 halfDir normalize(lightDir viewDir); float ndoth dot(normalDir, halfDir); float specularIntensity pow(max(0, ndoth), _Gloss); // _Gloss控制高光锐度 float specular step(_SpecularThreshold, specularIntensity); // 阈值化 float3 specularColor _LightColor0.rgb * _SpecularColor.rgb * specular;更进一步我们可以采样一张高光形状贴图Specular Shape Map用ndoth和另一个方向因子如视角与法线的点积作为UV去采样从而得到月牙形、十字形等复杂的高光图案。反射Rim Light边缘光也是卡通渲染增色的一大法宝。它模拟光线在物体边缘的散射能极大地增强体积感和戏剧性。其基础是计算视角方向与法线方向的点积越接近边缘法线与视角垂直值越接近0。// 边缘光 float rim 1.0 - saturate(dot(viewDir, normalDir)); rim smoothstep(_RimMin, _RimMax, rim); // 控制边缘光范围 float3 rimColor _RimColor.rgb * pow(rim, _RimPower); // _RimPower控制衰减通过将rim进行幂运算可以控制边缘光的衰减曲线实现从硬边到柔和的过渡。3. 在URP中构建你的第一个Toon Shader理解了原理我们动手在Unity的通用渲染管线URP中从零搭建一个功能齐全的Toon Shader。URP的Shader编写方式和内置管线有所不同更模块化我们需要创建的是ShaderGraph或HLSL代码。3.1 项目设置与ShaderGraph基础首先确保你使用的是URP项目。在Package Manager中安装或更新Universal RP。然后通过Assets/Create/Shader/Universal Render Pipeline/Lit Shader Graph创建一个新的ShaderGraph。我们将以ShaderGraph为例因为它可视化更易于理解数据流。创建后你会看到一个空白的画布。关键的第一步是设置正确的Fragment Normal Space和Surface Type。在Graph Settings里将Fragment Normal Space设置为World这样我们之前讨论的所有基于世界空间的计算如dot(N, L)才能正确工作。将Surface Type设置为Transparent如果你需要透明度混合如头发或保持Opaque实体物体。接下来我们需要获取几个关键数据法线Normal使用Fragment上下文中的Normal Vector节点确保空间是World。光线方向Light Direction使用Lighting类别下的Main Light Direction节点。注意这是主要平行光的方向。视角方向View Direction使用Fragment上下文中的View Direction节点空间设为World。颜色与纹理使用Sample Texture 2D节点采样你的基础色贴图。3.2 实现核心的卡通光照与色阶现在用节点连接实现2.1节中的原理。连接Normal Vector和Main Light Direction到一个Dot Product节点得到ndotl。将ndotl输出到一个Remap节点将其从[-1, 1]映射到[0, 1]范围。将重映射后的值作为一个Float输入连接到Sample Texture 2D节点的UV的U通道V通道固定为0.5去采样一张你准备好的Ramp Texture。这张图通常是一个水平渐变从左到右由暗到亮或垂直渐变的纹理。将采样得到的Ramp Color与Base Color基础色贴图采样结果用一个Multiply节点相乘。将这个结果连接到主节点的Base Color输入口。至此一个最基础的、受光照影响的卡通色块效果就完成了。你可以通过调整Ramp贴图来改变阴影的色阶和颜色。3.3 集成描边与高光特效描边集成在URP中为ShaderGraph添加描边更推荐使用单独的Renderer Feature来实现后处理描边或者为角色使用一个专门的、包含背面膨胀Pass的Shader Variant。如果你想在ShaderGraph内部实现一个简单的屏幕空间边缘检测可以尝试以下步骤效果较基础创建一个Custom Function节点获取当前像素的屏幕空间深度。使用DDX和DDY节点计算深度的屏幕空间梯度。计算梯度幅度当幅度超过某个阈值时输出描边颜色。 不过对于质量要求高的项目我仍然建议将描边作为一个独立的渲染特性或Shader Pass来处理。高光集成按照3.1节获取normalDir,lightDir,viewDir。计算halfDir normalize(lightDir viewDir)。计算ndoth dot(normalDir, halfDir)。将ndoth通过一个Power节点指数为_Gloss进行幂运算提高对比度。将结果输入到一个Step节点与_SpecularThreshold参数比较得到0或1的高光遮罩。将高光遮罩与_SpecularColor相乘再通过一个Add节点叠加到最终的Base Color上。边缘光集成计算rim 1 - dot(normalDir, viewDir)。使用Smoothstep节点用_RimMin和_RimMax两个参数来控制rim值的有效范围。将结果通过Power节点指数为_RimPower控制衰减。与_RimColor相乘后用Add节点叠加到最终颜色。在ShaderGraph中合理使用Branch和Lerp节点可以让这些特效根据参数开关使Shader更整洁、高效。3.4 材质参数化与美术控制一个优秀的Toon Shader必须对美术友好。在ShaderGraph中你需要暴露关键参数到材质面板_BaseMap基础颜色贴图。_RampMap色阶贴图。_RampOffset一个用于微调阴影明暗的偏移值可以加在ndotl重映射之前实现整体提亮或压暗。_SpecularThreshold和_Gloss控制高光出现阈值和形状锐度。_SpecularColor高光颜色。_RimColor,_RimPower,_RimMin,_RimMax边缘光相关参数。_OutlineWidth和_OutlineColor如果实现了描边Pass。将这些变量设置为Property并赋予合适的默认值。美术师通过调整这些滑块和颜色框就能快速调出差异化的角色材质比如一个热血主角可能需要对比强烈的阴影和锐利的高光而一个温柔的角色可能需要更柔和的色阶和淡淡的边缘光。4. 高级技巧与性能优化实战当基础功能实现后要做出令人眼前一亮的卡通效果就需要一些“魔法”了。同时确保性能也是项目上线的关键。4.1 提升表现力的关键技巧1. 基于法线朝向的着色Normal-oriented Shading这是日式卡通渲染如《原神》、《崩坏星穹铁道》中的常见技巧。它不受光照方向影响而是根据模型顶点法线在世界空间中的朝向通常是Y轴方向来赋予颜色。常用于表现角色脸部的“化妆”效果如脸颊红晕或衣物的固有明暗。实现在Shader中计算世界空间法线的Y分量用smoothstep划分区域然后与一个自定义颜色混合。可以存储在一张遮罩贴图的特定通道中实现更精细的控制。2. 分离的一号影与二号影在高级卡通渲染中阴影往往被分为两层“一号影”是主阴影范围大、颜色深“二号影”是辅助阴影通常出现在闭塞区域颜色更深且常带有色彩倾向如偏蓝或紫。这能极大地增强体积感和层次感。实现通常需要两张Ramp贴图或者在一张Ramp贴图上规划两个区域。通过一个额外的阴影遮罩贴图通常存储在顶点色或另一张纹理的通道中来控制二号影的出现区域和强度。计算时先采样一号影Ramp再根据遮罩和第二个阈值采样二号影Ramp最后叠加。3. 动态的Ramp与光照静态的Ramp贴图有时会显得呆板。我们可以引入一些动态变化基于光照颜色的Ramp偏移根据场景主光源的颜色轻微调整Ramp采样的UV让阴影色温随环境光变化。基于视角的阴影淡化当相机看向物体的背光面时适当提高阴影阈值让暗部不那么死黑模拟全局光照的微弱影响。4.2 性能瓶颈分析与优化策略卡通Shader的计算量通常低于复杂的PBR Shader但在移动平台或大量角色同屏时仍需优化。1. 渲染状态优化减少Texture采样尽可能合并贴图。将基础色、自发光、阴影遮罩等信息打包到一张贴图的RGBA通道中。例如R通道存高光遮罩G通道存边缘光强度B通道存二号影遮罩。简化计算在片段着色器Fragment Shader中进行的dot、pow、normalize等操作是性能杀手。能移到顶点着色器Vertex Shader计算的就尽量上移。例如normalDir、viewDir可以在顶点着色器计算后插值到片元虽然精度略有损失但性能提升显著。慎用透明混合Transparent渲染类型会导致overdraw严重消耗性能。对于卡通头发等必须透明的部分尽量使用Alpha TestClip而不是Alpha Blend或者使用预乘Alpha等更高效的混合模式。2. 针对URP的优化使用Shader变体Shader Variants和关键字Keywords将高光、边缘光等特效通过#pragma shader_feature编译成不同的变体。在材质中关闭不需要的特性时该部分代码不会被编译和执行从而节省GPU指令和运行时分支开销。利用SRP Batcher确保你的Shader符合SRP Batcher的条件。主要检查点包括使用CBUFFER_START(UnityPerMaterial)包裹材质属性并尽量使用紧凑的数据类型如用float2代替两个float。这能大幅提升使用同一Shader的不同材质的渲染合批效率。LODLevel of Detail为你的Toon Shader制作多个LOD版本。对于远处的角色使用简化版Shader例如去掉边缘光、使用更简单的Ramp计算。3. 描边的性能考量背面膨胀法描边会使顶点数翻倍。对于复杂模型这是主要性能瓶颈。优化方法层级细节LOD描边为远处的模型使用更细的描边宽度甚至关闭描边。简化描边网格专门为描边Pass准备一个简化版的模型减面只用于外扩渲染。这需要额外的资产管理工作但效果最好。后处理描边的优化如果使用后处理描边确保深度/法线纹理的采样次数降到最低并使用降分辨率渲染等技巧。4.3 与引擎其他系统的协作卡通渲染不是孤立的它需要和Unity的其他系统良好配合。阴影接收卡通角色也需要接收来自场景的动态阴影。在URP中确保你的Shader包含了阴影接收的相关HLSL代码和ShadowCasterPass。卡通角色接收的阴影通常也需要风格化处理你可以选择让阴影保持写实的软阴影或者对阴影贴图采样结果也进行一次阈值化使其变成硬边阴影。后期处理Post-processing卡通画面常搭配特定的后期效果如色彩查找表LUT用于统一和风格化整个屏幕的色彩基调。泛光Bloom增强高光和自发光区域的“光晕”效果让画面更梦幻。注意控制阈值避免让大面积色块也产生泛光。屏幕空间环境光遮蔽SSAO可以谨慎使用增强角色与场景接触处的闭塞感但强度不宜过高以免破坏干净的色块。动画与材质参数驱动可以通过动画系统或代码动态控制Shader参数。例如角色受伤时让_RampOffset短暂变负使整体色调变暗施放技能时增强_RimColor和_RimPower让角色边缘发光。5. 常见问题排查与艺术调试指南即使按照教程一步步来你也可能会遇到各种奇怪的问题。这里记录了一些高频问题和我的解决思路。5.1 渲染问题速查表问题现象可能原因排查与解决思路模型一片漆黑或全亮光照计算错误法线数据有问题。1. 检查模型导入设置中的“法线”选项是否为“Calculate”或“Import”。2. 在Shader中可视化输出法线return float4(normalDir*0.50.5, 1.0)检查是否异常。3. 检查顶点着色器中法线从物体到世界空间的变换矩阵是否正确是否使用了逆转置矩阵transpose(inverse(worldMatrix))处理非均匀缩放。阴影边缘有锯齿或闪烁描边实现方式问题或深度/法线纹理精度不足。1. 对于背面膨胀法检查硬边处的顶点法线是否平滑。尝试使用平滑法线。2. 对于后处理描边尝试增加深度/法线纹理的采样偏移offset或使用Roberts、Sobel等更抗锯齿的边缘检测算子。3. 检查相机和模型的Clipping Planes设置避免近裁面过近导致深度精度问题。高光或边缘光位置不对视角方向或半角向量计算错误。1. 确保viewDir和halfDir的计算都在世界空间下进行并且已经归一化normalize。2. 可视化输出viewDir或rim值检查其变化是否符合预期越靠近边缘值越大。Ramp贴图采样出现带状色块Ramp贴图过滤模式或UV计算问题。1. 将Ramp贴图的过滤模式Filter Mode设置为“Bilinear”或“Trilinear”避免“Point”模式导致的硬过渡。2. 检查用于采样Ramp的UV值是否被正确地限制在[0,1]范围内使用saturate函数。3. 确保Ramp贴图本身是无缝的渐变。透明渲染排序错乱半透明物体渲染顺序问题。1. 确保使用Transparent渲染队列并正确设置Render Queue。2. 对于复杂的半透明物体如头发可能需要手动拆分渲染顺序或使用Alpha Test代替Alpha Blend。3. 考虑使用Unity的Camera Depth Texture参与排序计算。在移动设备上帧率过低Shader计算过于复杂或Draw Call过高。1. 使用Unity Profiler的GPU模块定位是Fragment Shader开销大还是顶点处理开销大。2. 实施4.2节的优化策略减少纹理采样、简化计算、使用Shader变体。3. 检查静态合批Static Batching、动态合批Dynamic Batching和GPU Instancing是否启用并生效。对于大量相同材质的卡通角色GPU Instancing是救星。5.2 艺术效果调试心法调试卡通渲染一半是技术一半是艺术感觉。以下是一些调试心得1. 从黑白关系开始关掉所有颜色只调试明暗关系。确保你的Ramp在不同光照角度下都能产生令人满意的、动态的剪影和体积感。亮部、暗部、闭塞区的比例要舒服。这是画面的骨架。2. 分层叠加特效不要一次性打开所有特效高光、边缘光、描边。先做好基础光照和色阶然后逐一添加高光、边缘光等。每加一层观察它带来了什么又破坏了什么。确保每一层都有其存在的意义而不是堆砌。3. 善用参考图找一张你理想中的卡通渲染截图放在屏幕一旁。不断对比别人的阴影边界在哪里高光是什么形状边缘光有多宽颜色倾向如何有目的的调试远比盲目调参高效。4. 场景光照是导演你的Shader参数是为特定光照环境服务的。在最终的游戏场景灯光下调试材质而不是在中性的默认灯光下。一个在测试场景里好看的材质放到游戏的实际昼夜循环或室内灯光中可能会完全变味。5. 接受“不完美”卡通渲染的魅力之一在于其手绘感和风格化。有时一些“错误”——比如略微不对称的阴影、在高光处故意留下的纹理细节——反而能让画面更生动。不要用写实渲染的“物理正确”标准来苛求卡通渲染它的标准是“视觉正确”和“风格统一”。最后别忘了版本管理。每次调出一个满意的参数组合及时保存为材质预设.mat文件或脚本化的配置ScriptableObject。建立一个可复用的卡通材质库能极大提升团队的生产效率。卡通渲染的世界没有唯一解它是一片充满创意的试验田。掌握了这些基础工具和方法后大胆地去混合、去创造属于你自己的视觉语言吧。