三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

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

发布时间：2026/8/11 1:45:20 三亩地 编程学习日记
Unity卡通渲染(Toon Shader)核心原理与URP实战指南

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（实体物体）。

接下来，我们需要获取几个关键数据：

  1. 法线（Normal）：使用Fragment上下文中的Normal Vector节点，确保空间是World。
  2. 光线方向（Light Direction）：使用Lighting类别下的Main Light Direction节点。注意，这是主要平行光的方向。
  3. 视角方向（View Direction）：使用Fragment上下文中的View Direction节点，空间设为World。
  4. 颜色与纹理：使用Sample Texture 2D节点采样你的基础色贴图。

3.2 实现核心的卡通光照与色阶

现在，用节点连接实现2.1节中的原理。

  1. 连接Normal Vector和Main Light Direction到一个Dot Product节点，得到ndotl。
  2. 将ndotl输出到一个Remap节点，将其从[-1, 1]映射到[0, 1]范围。
  3. 将重映射后的值作为一个Float输入，连接到Sample Texture 2D节点的UV的U通道（V通道固定为0.5），去采样一张你准备好的Ramp Texture。这张图通常是一个水平渐变（从左到右由暗到亮）或垂直渐变的纹理。
  4. 将采样得到的Ramp Color与Base Color（基础色贴图采样结果）用一个Multiply节点相乘。
  5. 将这个结果连接到主节点的Base Color输入口。

至此，一个最基础的、受光照影响的卡通色块效果就完成了。你可以通过调整Ramp贴图来改变阴影的色阶和颜色。

3.3 集成描边与高光特效

描边集成：在URP中，为ShaderGraph添加描边，更推荐使用单独的Renderer Feature来实现后处理描边，或者为角色使用一个专门的、包含背面膨胀Pass的Shader Variant。如果你想在ShaderGraph内部实现一个简单的屏幕空间边缘检测，可以尝试以下步骤（效果较基础）：

  1. 创建一个Custom Function节点，获取当前像素的屏幕空间深度。
  2. 使用DDX和DDY节点计算深度的屏幕空间梯度。
  3. 计算梯度幅度，当幅度超过某个阈值时，输出描边颜色。 不过，对于质量要求高的项目，我仍然建议将描边作为一个独立的渲染特性或Shader Pass来处理。

高光集成：

  1. 按照3.1节获取normalDir,lightDir,viewDir。
  2. 计算halfDir = normalize(lightDir + viewDir)。
  3. 计算ndoth = dot(normalDir, halfDir)。
  4. 将ndoth通过一个Power节点（指数为_Gloss）进行幂运算，提高对比度。
  5. 将结果输入到一个Step节点，与_SpecularThreshold参数比较，得到0或1的高光遮罩。
  6. 将高光遮罩与_SpecularColor相乘，再通过一个Add节点叠加到最终的Base Color上。

边缘光集成：

  1. 计算rim = 1 - dot(normalDir, viewDir)。
  2. 使用Smoothstep节点，用_RimMin和_RimMax两个参数来控制rim值的有效范围。
  3. 将结果通过Power节点（指数为_RimPower）控制衰减。
  4. 与_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）。建立一个可复用的卡通材质库，能极大提升团队的生产效率。卡通渲染的世界没有唯一解，它是一片充满创意的试验田。掌握了这些基础工具和方法后，大胆地去混合、去创造属于你自己的视觉语言吧。

编程学习 学习日记 实战经验
← 返回列表