Unity卡通渲染(Toon Shader)核心原理与URP实战指南

2026/8/11 1:45:20

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 Test（Clip）而不是Alpha Blend，或者使用预乘Alpha等更高效的混合模式。

2. 针对URP的优化

使用Shader变体（Shader Variants）和关键字（Keywords）：将高光、边缘光等特效通过#pragma shader_feature编译成不同的变体。在材质中关闭不需要的特性时，该部分代码不会被编译和执行，从而节省GPU指令和运行时分支开销。
利用SRP Batcher：确保你的Shader符合SRP Batcher的条件。主要检查点包括：使用CBUFFER_START(UnityPerMaterial)包裹材质属性，并尽量使用紧凑的数据类型（如用float2代替两个float）。这能大幅提升使用同一Shader的不同材质的渲染合批效率。
LOD（Level 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.5+0.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）。建立一个可复用的卡通材质库，能极大提升团队的生产效率。卡通渲染的世界没有唯一解，它是一片充满创意的试验田。掌握了这些基础工具和方法后，大胆地去混合、去创造属于你自己的视觉语言吧。