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

日记详情

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

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

Unity卡通渲染核心：Toon Shader原理、实现与优化全解析

发布时间：2026/8/9 17:46:02 三亩地 编程学习日记
Unity卡通渲染核心：Toon Shader原理、实现与优化全解析

1. 项目概述：为什么Toon Shader是Unity风格化渲染的基石

如果你在Unity里做过风格化项目，尤其是二次元、卡通或者低多边形风格，那你一定绕不开Toon Shader。这东西听起来挺玄乎，好像是什么高级图形学黑魔法，但其实它的核心思想特别直观：用简单的色块和清晰的明暗边界，来模拟传统手绘动画的视觉感受，而不是追求物理真实的光影。我最早接触它是因为一个独立游戏项目，美术同学丢过来一堆日式动漫风格的角色原画，要求游戏里的效果“得像从动画片里走出来一样”。当时用Unity的标准PBR（基于物理的渲染）管线怎么调都感觉不对，油腻、写实，跟想要的干净、扁平感完全不搭边。直到开始折腾Toon Shader，才算是真正找到了门路。

简单来说，Toon Shader（也叫卡通着色器或NPR，非真实感渲染着色器）不是某一个具体的Shader，而是一类着色技术的统称。它的目标不是模拟光在现实世界中的复杂行为（如次表面散射、菲涅尔效应），而是对光照结果进行“风格化处理”。最经典的标志就是色阶化（Ramp）和硬边描边（Outline）。色阶化就是把连续平滑的光照渐变，变成几个界限分明的色阶，比如从暗部到亮部，可能就只有“阴影色”、“中间色”、“高光色”两到三个色块。硬边描边则是在模型轮廓外勾上一圈均匀的黑线，这是卡通形象最具辨识度的特征之一。

为什么它这么重要？因为对于移动平台、独立游戏或者特定艺术风格的项目，Toon Shader往往是性能和风格表现的最佳平衡点。它计算量通常比复杂的PBR Shader小，又能极具表现力地传达美术意图。无论是《原神》那种融合了卡通与写实的风格，还是《哈迪斯》那种粗犷的美漫画风，亦或是经典的日式二次元渲染，底层都离不开Toon Shading技术的变体。接下来，我会从一个实践者的角度，拆解它的核心原理、在Unity中的实现路径，以及那些只有踩过坑才知道的调参技巧。

2. Toon Shader核心原理拆解：从连续光影到卡通色块

要自己写或者调好一个Toon Shader，不能光靠感觉去拖参数，得先弄明白它到底对传统的光照计算做了什么“手脚”。理解了这些，你才能知道每个参数滑块背后控制的究竟是什么，出了问题也知道该从哪儿下手调试。

2.1 光照计算的“简化”与“重构”

标准的光照模型（比如兰伯特Lambert、冯氏Phong）会计算出一个在0到1之间连续变化的漫反射强度值。这个值再乘以光源颜色和材质底色，就得到了最终像素的颜色。这个过程是连续的，所以渲染出来是平滑的光影过渡。

Toon Shader的第一步，就是打断这种连续性。最常见的方法就是使用一张一维纹理，我们叫它Ramp贴图或者渐变纹理。这张图通常就是一条从左到右的色带。我们的漫反射强度值（比如经过半兰伯特处理后的dot(N, L)），不再直接用于颜色混合，而是作为UV坐标的U值（横坐标），去这张Ramp贴图上采样颜色。

举个例子，假设你的Ramp贴图从左到右是深蓝、中蓝、浅蓝。当漫反射强度为0.3（较暗）时，采样点就在贴图靠左的位置，取到深蓝色；强度为0.7（较亮）时，采样点靠右，取到浅蓝色。通过精心设计Ramp贴图上的颜色分布，你就可以定义出清晰的色块边界。比如，你可以让贴图中间一大段都是同一种中蓝色，只在两端很短的距离内快速过渡到深蓝和浅蓝，这样渲染出来的效果就是大面积的平涂色块，只有明暗交界线附近有一点渐变，卡通感立刻就出来了。

注意：这里有个关键技巧，采样前通常会对漫反射强度值做一个重映射（Remap）。因为原始的dot(N, L)范围是[-1, 1]，我们需要把它映射到[0, 1]的纹理坐标范围。更高级的做法还会加入一个阈值（Threshold）和平滑度（Smoothness）参数，用来控制色阶交界处的硬边程度和过渡范围，这能让你更精细地控制阴影的“软硬”。

2.2 “灵魂描边”的几种实现方案

描边是卡通渲染的灵魂，但它在实时渲染里是个经典的难题——因为3D模型本身并没有“轮廓”这个概念。Unity里常见的描边实现思路主要有以下几种，各有优劣：

  1. 背面挤出法（Backface Extrusion）：这是最经典、性能也相对较好的方法。原理很简单：用两个Pass渲染模型。第一个Pass只渲染稍微放大了的模型背面（通常沿着顶点法线方向挤出），并且只输出一个固定的描边颜色（比如黑色）。第二个Pass再正常渲染模型正面。这样，从视角看，模型轮廓外就会多出一圈“边”。它的优点是实现简单，速度快。缺点是描边宽度不均匀，在模型褶皱复杂的地方会变形，而且无法处理内部轮廓（比如衣服和身体之间的缝隙）。

  2. 基于屏幕后处理的描边（Post-processing Outline）：这种不依赖于模型，而是在整个图像处理阶段进行。常见的方法是使用Sobel等边缘检测算子，对场景的深度图（Depth Buffer）或法线图（Normal Buffer）进行卷积计算，识别出画面中深度或法线变化剧烈的地方，然后在这些地方绘制线条。它的优点是描边效果稳定，不受模型复杂度影响，还能勾勒出内部轮廓。缺点是性能开销大（全屏处理），并且对透明物体的处理比较麻烦，容易产生错误的描边。

  3. 基于几何着色器的描边：在几何着色器（Geometry Shader）阶段，沿着顶点法线生成新的三角形条带（Triangle Strip）来形成描边。这种方法控制力最强，可以做出渐变、纹理化等高级描边效果。但几何着色器在部分移动平台支持不佳，且容易成为性能瓶颈，一般用于PC或主机平台的高质量渲染。

对于大多数Unity项目，尤其是移动端或风格化要求明确的，背面挤出法仍然是首选。它的问题可以通过一些“黑科技”来缓解，比如用第二套UV或顶点色来存储描边宽度信息，实现可控的、不均匀的描边。

2.3 高光与反射的风格化处理

卡通风格的高光同样不是写实的。我们不要那种柔和、扩散的高光，而是要那种锐利、明亮、甚至可能是星星形状的“卡通高光”。

实现思路也是“阶跃化”。传统的Blinn-Phong高光模型会计算一个高光强度值。我们可以对这个值应用一个阶跃函数：低于某个阈值，高光强度为0；高于阈值，直接给一个固定强度值。这样高光就是一个清晰的亮斑。更进一步，我们可以用一张特殊的高光遮罩贴图（Specular Mask Map）来定义高光出现的形状和区域。比如，在眼睛、鼻尖、头发等特定部位，使用圆形、十字形或自定义形状的高光，这是日式二次元渲染中让角色“bling bling”有神的关键。

对于环境反射，通常也会进行简化。可能直接用一张Cubemap采样，然后乘以一个固定的强度，或者同样进行色阶化处理，避免出现过于真实、复杂的反射细节，以保持画面风格的统一。

3. Unity URP管线下的Toon Shader实战构建

理论懂了，我们动手在Unity的URP（通用渲染管线）里搭一个基础的Toon Shader。URP现在是Unity的主流推荐，它模块化程度高，自己写Shader也相对清晰。我会基于Shader Graph（可视化着色器编辑工具）和手写HLSL代码两种方式来讲解，因为实际项目中两者常常结合使用。

3.1 基于Shader Graph搭建基础卡通光照

对于不常写代码的美术或快速原型，Shader Graph是神器。我们一步步来：

  1. 创建Unlit Graph并设置PBR输入：在Project窗口右键 -> Create -> Shader Graph -> URP -> Unlit Graph。虽然叫Unlit，但我们可以自己搭建光照。首先，在Graph的Blackboard（参数面板）里，添加必要的材质属性：Base Color（基础色），Base Map（基础贴图），Ramp Map（一维渐变纹理），Shadow Threshold（阴影阈值），Shadow Smoothness（阴影平滑度）。

  2. 构建自定义光照函数：这是核心。我们需要一个自定义函数节点（Custom Function Node）。虽然Shader Graph提供了PBR Master节点，但为了完全控制卡通化流程，我们最好自己计算光照。在这个自定义函数里，我们需要：

    • 获取世界空间法线（Normal Vector）和光照方向（Light Direction，可以从Main Light节点获取）。
    • 计算半兰伯特漫反射：halfLambert = dot(N, L) * 0.5 + 0.5。这比标准兰伯特有更好的亮度分布。
    • 应用阈值和平滑度：使用smoothstep函数。smoothstep(Threshold - Smoothness*0.5, Threshold + Smoothness*0.5, halfLambert)。这个函数会在阈值附近产生一个平滑过渡，Smoothness为0时就是硬切边。
    • 将处理后的值作为UV的x，去采样Ramp Map。Ramp Map的V坐标（纵坐标）可以固定为0.5，或者用来做其他控制（比如不同部位用不同的Ramp条带）。

  3. 连接主颜色输出：将采样Ramp得到的颜色，与Base Color和Base Map采样结果相乘，输出给Master节点的Color。别忘了设置正确的渲染队列（比如Geometry）和混合模式（Opaque）。

  4. 添加描边Pass：在Graph的Graph Settings里，可以添加第二个Pass。在这个Pass的设置中，开启Cull Front（剔除正面，渲染背面），并将顶点位置沿法线方向挤出：Position = TransformObjectToHClip(vertex.vertex + vertex.normal * _OutlineWidth)。_OutlineWidth是一个可调节的属性。这个Pass的输出颜色固定为描边色（如黑色）。

这样一个最基础的、包含色阶化漫反射和背面挤出描边的Toon Shader Graph就完成了。你可以把它保存成一个SubGraph（子图），方便在其他Shader中复用这个光照模型。

3.2 手写HLSL代码实现更精细的控制

当你的需求超出Shader Graph的便捷范围，或者需要极致性能时，手写代码是必须的。在URP中，我们通常通过编写自定义的Lit或Unlit着色器来实现，核心是覆写URP的光照计算函数。

  1. 创建自定义URP Lit着色器：在Unity中，复制一份URP自带的Lit.shader作为起点是个好习惯。我们主要修改光照部分。

  2. 修改光照函数（Lighting.hlsl）：URP的光照计算主要在Lighting.hlsl中定义。我们需要编写自己的ToonLighting函数。以下是一个简化版的伪代码逻辑，你可以放在自定义的HLSL文件中：

    // 自定义的卡通漫反射计算 half3 ToonDiffuse(half3 lightColor, half3 normalWS, half3 lightDirWS, half threshold, half smoothness, TEXTURE2D_PARAM(rampTex, sampler_rampTex)) { half NdotL = dot(normalize(normalWS), normalize(lightDirWS)); half halfLambert = NdotL * 0.5 + 0.5; // 转换为[0,1]范围 // 应用平滑阶跃 half rampUV = smoothstep(threshold - smoothness*0.5, threshold + smoothness*0.5, halfLambert); // 采样Ramp贴图，假设是一维纹理 half3 rampColor = SAMPLE_TEXTURE2D(rampTex, sampler_rampTex, float2(rampUV, 0.5)).rgb; return lightColor * rampColor; } // 在主要的片元着色器中，替换掉标准的漫反射计算 half3 diffuse = ToonDiffuse(light.color, input.normalWS, light.direction, _Threshold, _Smoothness, TEXTURE2D_ARGS(_RampMap, sampler_RampMap));

  3. 实现描边Pass：在Shader中添加第二个Pass。这个Pass的顶点着色器负责挤出，片元着色器直接返回固定颜色。关键代码：

    // 在Properties中定义 _OutlineWidth("Outline Width", Range(0, 0.1)) = 0.03 _OutlineColor("Outline Color", Color) = (0, 0, 0, 1) // 在Outline Pass的顶点着色器中 VertexOutput OutlineVertex(VertexInput v) { VertexOutput o; // 将顶点沿法线方向挤出（注意在观察空间或裁剪空间处理会更稳定） float3 posWorld = mul(unity_ObjectToWorld, v.vertex).xyz; float3 normalWorld = normalize(mul(v.normal, (float3x3)unity_WorldToObject)); // 逆转置矩阵处理法线 posWorld += normalWorld * _OutlineWidth; o.pos = mul(unity_MatrixVP, float4(posWorld, 1.0)); return o; } // 片元着色器 half4 OutlineFragment(VertexOutput i) : SV_Target { return _OutlineColor; }

  4. 处理多光源：URP是前向渲染，支持多个逐像素光。你需要在一个循环中，对每个额外的光源（Additional Lights）都应用你的ToonDiffuse计算，并把结果叠加起来。注意处理好光源的衰减（Attenuation）。

手写代码的优势在于，你可以轻松集成更复杂的功能，比如基于视角的描边宽度调整、各向异性高光、头发各向异性渲染等，这些在Shader Graph中实现起来可能比较繁琐。

3.3 材质参数配置与视觉调试技巧

Shader写好了，更磨人的是调材质参数。一个好的卡通Shader应该提供直观且强大的参数控制。

  • Ramp贴图制作：不要在PS里随便拉个渐变。建议用一张512x2或1024x2的纹理，在Unity中导入时设置Wrap Mode为Clamp，Filter Mode为Point（无过滤）来获得最硬的色阶，或者Bilinear（双线性过滤）来获得平滑过渡。你可以制作多套Ramp贴图对应不同的光照氛围（如白天、夜晚、室内）。
  • 阈值与平滑度联动：Threshold控制阴影区域的大小，值越大，阴影范围越大。Smoothness控制明暗交界线的模糊程度。通常这两个参数需要联动调节。一个技巧是：先调Threshold确定大致的阴影形状，再用一个很小的Smoothness（如0.05）让边界稍微柔和一点，避免锯齿感。
  • 描边宽度控制：直接在世界空间或观察空间挤出会导致透视问题（近大远小）。更专业的做法是在观察空间（View Space）进行挤出，这样描边宽度在屏幕空间上看起来是均匀的。计算会稍微复杂一点，但效果更稳定。
  • 利用顶点色或UV2：这是高级技巧。你可以用模型的顶点颜色（Vertex Color）的R通道来存储每根顶点想要的描边宽度乘数。这样美术可以在建模软件里（如Blender、Maya）直接绘制，实现比如头发梢描边细、根部描边粗的效果。同样，也可以用第二套UV（UV2）来存储一些遮罩信息，控制哪里该有高光，哪里不该有阴影。

调试时，善用Unity的Frame Debugger和材质预览窗口的不同光照条件。拖动场景中的平行光方向，观察阴影变化是否自然。创建一个纯色背景和不同明度的背景球，检查描边在不同背景下的可见度。

4. 进阶特性与性能优化策略

一个基础的Toon Shader只能算入门。要让角色真正“活”起来，充满细节和表现力，还需要加入一些进阶特性。同时，移动端项目必须时刻关注性能。

4.1 提升表现力的关键特性

  1. 面部渲染（Face Shading）：人脸是视觉焦点。简单的Ramp着色在人脸上会很平。常见的做法是使用一张面部阴影贴图（Face Shadow Map）。这是一张烘焙好的灰度图，标定了人脸特定区域（如眼窝、鼻翼两侧、下巴下方）的固有阴影。在Shader中，我们将计算出的动态阴影与这张贴图进行混合（比如相乘或屏幕混合），这样就能在动态光照下依然保持面部结构的稳定阴影，这是日式游戏角色看起来“好看”的秘诀之一。

  2. 各向异性高光与头发渲染：头发的高光不是圆形的。我们需要模拟发丝的反光特性，即沿着发丝方向的一条亮带。实现方法通常是用一张流向图（Flow Map）来定义头发的切线方向，然后基于此计算各向异性的高光。高光形状可以用一张噪声图或自定义形状纹理来控制。

  3. 边缘光（Rim Light）或“天使环”：在物体轮廓边缘添加一圈背光效果，能极大地增强立体感和戏剧效果。计算很简单：rim = 1.0 - dot(N, V)，其中N是法线，V是视角方向。这个值越大，说明该点越靠近轮廓边缘。然后对这个值进行幂运算（pow(rim, _RimPower)）来控制边缘光的宽度，再乘以一个颜色和强度。这个效果可以叠加在最终颜色上。

  4. 基于深度的描边改进：单纯的背面挤出描边在物体交叉时会有问题（比如手放在身体前，描边会穿透）。一个改进方案是结合深度差。在描边Pass中，除了挤出，还可以在片元着色器里采样当前像素的深度，与挤出前原始位置的深度进行比较。如果两者差值过大（说明可能遮挡了其他物体），则淡化或丢弃该片元的描边。这需要访问深度纹理，会稍微增加一些开销，但能解决很多视觉错误。

4.2 移动端性能优化要点

卡通渲染虽然比顶级PBR简单，但在低端手机上仍需精打细算。

  1. 精简Shader变体（Shader Variants）：这是URP/Shader Graph项目性能的头号杀手。每个启用的关键字（如_NORMALMAP,_SPECULAR_SETUP）都会让Unity编译一个变体。仔细检查你的Toon Shader，用不到的特性（比如细节法线、视差遮挡）坚决关闭。在Shader Graph中，谨慎使用分支节点和关键字切换。可以编写一个自定义的Shader变体收集和剥离工具，或者在Project Settings -> Graphics -> Shader Stripping中设置。

  2. 纹理压缩与尺寸：Ramp贴图用很小的尺寸（如128x2）就足够了，格式可以用RGB24甚至RGB Compressed。面部阴影贴图、高光遮罩贴图等控制贴图，也尽量用低分辨率（如256x256）和压缩格式（ASTC 4x4或5x5）。基础色贴图（Base Map）是视觉质量的核心，可以适当用高一点的分辨率，但也要遵循美术规范，避免滥用4096x4096的贴图。

  3. 减少渲染Pass和Draw Call：两个Pass（描边+主体）是基础开销。如果角色数量非常多，可以考虑是否真的每个都需要描边？或者能否通过合批（Batching）来减少Draw Call。静态的、不需要描边的场景物体，使用单Pass的简化版Toon Shader。

  4. 慎用屏幕后处理：基于后处理的描边方案虽然效果全面，但对移动端极不友好。除非是PC或主机项目，否则尽量避免。如果非要用，确保只在需要的高优先级角色上使用，并且严格控制采样次数和分辨率（可以降采样处理）。

  5. 利用Shader LOD（细节层次）：为你的Toon Shader设置不同的LOD级别。在远处，使用简化版本（比如去掉边缘光、使用更简单的光照计算、关闭描边）。这需要在Shader中编写多个SubShader或Pass，并通过LOD指令控制。

5. 常见问题排查与实战心得

最后这部分，是我和同事们在实际项目中用血泪换来的经验，很多问题官方文档不会告诉你。

5.1 典型问题与解决方案速查表

问题现象可能原因排查与解决思路
描边断裂或不连贯1. 模型顶点法线不连续或错误。
2. 描边挤出在裁剪空间计算有精度问题。
3. 模型本身有硬边，法线在硬边处突变。		1. 在3D软件中检查并平滑顶点法线（Smooth Normals）。在Unity中导入模型时，检查“Normals”导入设置是否为“Calculate”或“Import”。
2. 尝试在观察空间（View Space）进行顶点挤出和变换，而非裁剪空间。
3. 对于硬边模型，考虑使用**轮廓边检测（Silhouette Edge Detection）**的后处理方案，或者接受这种“硬边描边”的风格。
阴影边缘有锯齿（Aliasing）1. Ramp贴图Filter Mode为Point，且色阶对比强烈。
2.smoothstep的平滑范围设置过小。		1. 将Ramp贴图的Filter Mode改为Bilinear，让色阶之间有轻微渐变。
2. 适当增加_Smoothness参数的值，让明暗交界处有一个像素左右的过渡带。
3. 如果使用屏幕空间阴影，可以尝试开启轻微的阴影过滤。
角色移动时，阴影或高光闪烁1. 光照计算中使用了step等非连续函数，且阈值参数对微小变化敏感。
2. 逐顶点计算和逐像素计算不一致。		1. 用smoothstep替代step，即使平滑度设得很小，也能提供连续性，避免闪烁。
2. 确保所有关键光照计算（如NdotL）都在片元着色器中进行，而不是在顶点着色器中计算然后插值。顶点着色器只做几何变换。
在URP中，附加光源（Additional Lights）无效1. Shader中没有处理AdditionalLights。
2. 物体的Renderer组件上未启用“Receive Shadows”或相关光照层。
3. URP Asset中限制了每物体的逐像素光数量。		1. 在手写Shader中，确保包含AdditionalLights.hlsl并在片元着色器中循环处理GetAdditionalLight。
2. 在Shader Graph中，使用Additional Light节点，并确保其配置正确。
3. 检查URP Asset -> Lighting -> Per Object Light数量限制，确保足够。
透明物体描边错误背面挤出法渲染描边时，透明物体的背面可能被提前剔除，或者描边与透明混合顺序错误。1. 为透明物体使用独立的、经过排序的渲染队列（如Transparent）。
2. 考虑使用基于屏幕空间法线/深度的边缘检测后处理来实现透明物体描边，但这开销较大。
3. 一个取巧的办法：让透明物体的描边Pass使用不透明（Opaque）队列先渲染，然后再渲染透明部分。但这需要仔细管理渲染顺序。
打包后材质变紫（Missing Shader）1. Shader没有正确包含在构建中。
2. Shader变体没有被正确打包。		1. 确保Shader所在的ShaderVariantCollection被添加到Graphics Settings的Preloaded Shaders中，或者被场景直接引用。
2. 如果使用了#pragma multi_compile或shader_feature，确保所有用到的变体组合都在场景中被实际使用过一次，否则它们可能在打包时被剥离。可以使用Project Settings -> Graphics -> Shader Stripping进行更精细的控制。

5.2 来自生产环境的实操心得

  1. 与美术的协作流程至关重要：Toon Shader的参数（尤其是Ramp图、阈值）需要美术同学深度参与调整。最好能开发一个简单的材质参数调节面板，或者将关键参数（如Threshold,Ramp Selector）暴露给Animator或Timeline，以便动画师在特定镜头下微调角色的光影表现。建立一套标准的Ramp贴图库和面部阴影贴图规范，能极大提升团队效率。

  2. 不要忽视光照环境：Toon Shader虽然对光照做了风格化处理，但光源本身的方向、颜色、强度依然至关重要。一个常见的误区是只调Shader不布光。实际上，你需要精心布置场景光源（主光、补光、背光）来引导观众的视线，塑造角色的体积感。对于卡通风格，补光（Fill Light）经常被用来提亮暗部，减少过强的对比。

  3. 性能测试要覆盖低端机：在Unity Editor里跑得流畅，不代表在千元安卓机上也能60帧。一定要准备最低支持型号的真机进行测试。使用Unity Profiler的GPU模块，重点关注Shader的耗时、渲染Pass的数量、Overdraw（过度绘制）情况。对于Toon Shader，Overdraw可能因为描边Pass而加倍，需要关注。

  4. 考虑艺术风格的统一：Toon Shader不是孤立的。角色的材质、场景的着色、特效的渲染风格都需要统一。如果角色是卡通渲染，场景却是写实PBR，会非常割裂。通常需要为场景物体也开发一套简化版的Toon Shader，或者使用相同的Ramp贴图色彩体系来保持视觉协调。

  5. 善用现有资源与插件：如果你不是图形程序，或者项目时间紧迫，完全可以从Asset Store寻找成熟的Toon Shader解决方案。像Unity日本团队官方推出的Unity Toon Shader（UTS）、社区流行的Flat Kit、Stylized Shader等，都是经过验证的、功能全面的选择。它们提供了丰富的控制参数和效果，可以作为你项目的基础或参考。但即使是使用插件，理解其背后的原理，也能帮助你更好地使用和调试。

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