Unity卡通渲染终极指南：从Shader原理到URP/HDRP实战优化

1. 项目概述：为什么我们需要一个“终极指南”？

在Unity社区里，Toon Shader（卡通着色器）一直是个热度不减的话题。无论是想做独立游戏的开发者，还是想为项目增添独特美术风格的技术美术，几乎都绕不开它。但说实话，很多朋友一上手就懵了：网上教程要么是零散的代码片段，要么是过于理论化的图形学论文，照着做出来的效果要么是“五彩斑斓的黑”，要么是“塑料感十足”的奇怪模型，离心中那种惊艳的、有呼吸感的卡通风格总差那么一口气。

我自己在项目里踩过无数坑，从最初生硬的三色调（固有色、暗部、高光）到后来能模拟出《塞尔达传说：旷野之息》那种带点手绘质感的角色，中间经历了漫长的试错。我发现，要做出真正“惊艳”的卡通效果，绝不仅仅是套用一个现成的Shader那么简单。它涉及到对光照模型的深刻理解、对美术需求的精准翻译，以及对性能的精细把控。市面上很多教程只告诉你“怎么做”，却很少说清楚“为什么这么做”，以及“这么做可能会遇到什么坑”。

所以，这个“终极指南”的目标很明确：不止给你一个能跑的Shader，更要给你一套完整的、从原理到实践、从美术到性能的卡通渲染知识体系。无论你是刚接触Shader编程的新手，还是想深化理解的技术美术，我希望这篇指南能成为你手边最实用的参考手册。我们会从最基础的卡通光照原理讲起，一步步拆解如何用Shader Graph和手写HLSL两种方式实现核心效果，并深入探讨那些让卡通风格“活”起来的高级技巧，比如风格化高光、动态描边、以及如何与URP/HDRP管线深度集成。最后，我们还会直面那些最让人头疼的实战问题，比如性能优化、跨平台适配，以及如何与美术流程协作。

2. 卡通渲染的核心原理：超越“赛璐璐”

在深入代码之前，我们必须先统一思想：卡通渲染（Non-Photorealistic Rendering, NPR）的目标不是物理真实，而是风格化的表达。最经典的卡通风格源于“赛璐璐”动画，其核心特征是色块分明、阴影锐利、高光点缀。但现代游戏中的卡通渲染早已超越了这个范畴。

2.1 光照模型的重构：从连续到离散

真实感渲染（PBR）使用连续的光照计算（如Lambert, Blinn-Phong），结果是一个平滑的光影渐变。而卡通渲染的第一步，就是将连续的光照结果“离散化”或“分层化”。

核心思路：Ramp贴图（渐变纹理）与阈值化这是实现色块化光影最核心、最经典的方法。其本质是将计算出的漫反射光照强度（通常是一个介于0到1之间的值，记为dot(N, L)，即法线与光方向的点积）作为一个查找表的索引（UV的U坐标），去采样一张一维或二维的纹理。

• 一维Ramp贴图：横轴代表光照强度（从0到1），纵轴是固定的颜色。Shader根据当前像素的光照强度，横向采样这张贴图，得到对应的颜色。通过精心设计这张贴图上的颜色分布，你可以轻松定义出亮部、中间调、暗部等多个色阶，并且色阶之间的过渡可以是硬边，也可以是柔和的渐变。
• 二维Ramp贴图：横轴同样是光照强度，而纵轴可以用来混合不同的色调风格（例如，根据角色血量混合健康与受伤的色调），或者根据表面法线与视角的关系（菲涅尔效应）来添加边缘光效果。

实操心得：不要直接使用引擎内置的dot(N, L)。这个值在背光面（点积小于0）时为负，直接用作UV会导致采样错误。标准的做法是clamp(dot(N, L), 0, 1)，或者使用saturate函数。更高级的做法是引入一个“偏移”和“缩放”参数，让美术可以动态调整光影分界线的位置。

2.2 描边的艺术：不止是轮廓

描边是卡通风格的灵魂。但很多人以为描边就是在模型外再套一层放大的模型（背面剔除法），这其实只是最基础的一种。一个优秀的卡通渲染系统，应该提供多种描边方案以适应不同需求。

1. 基于法线扩展的背面渲染（Backface）：

   • 原理：用两个Pass。第一个Pass正常渲染模型正面。第二个Pass只渲染背面（Cull Front），并将顶点沿法线方向挤出一定距离，同时赋予一个纯色（通常是黑色）。
   • 优点：实现简单，效果稳定，轮廓准确。
   • 缺点：在模型复杂或法线不均匀时，挤出厚度难以保持一致，容易产生断线或缝隙；无法处理内部轮廓（如衣服褶皱、五官内部的线条）。

2. 基于后处理的屏幕空间描边（Post-processing）：

   • 原理：在全部场景渲染完成后，对屏幕图像进行处理。通过比较相邻像素的深度值（Depth）或法线（Normal）的差异，来检测并绘制边缘。
   • 优点：能画出所有物体的轮廓，包括内部轮廓，且不增加模型复杂度。
   • 缺点：依赖深度/法线纹理，有额外的GPU开销；边缘检测的“灵敏度”参数需要仔细调校，否则容易产生杂讯或漏检；无法区分不同物体想要的描边颜色（比如主角描黑边，敌人描红边）。

3. 基于几何着色器的边缘检测：

   • 原理：在几何着色器中，根据三角面片的邻接信息，找出属于轮廓边的边，并生成新的四边形几何体来绘制描边。
   • 优点：非常精确，可以获取到模型级别的轮廓信息。
   • 缺点：实现复杂，对硬件和驱动支持有要求，且在现代渲染管线中（如URP的Shader Graph）支持不完善，不推荐新手使用。

对于大多数项目，我的建议是：主轮廓用背面渲染法保证稳定性和性能，对于需要强调的内部结构（如盔甲缝隙、面部特征），可以让美术在模型上单独绘制一条颜色较深的“内描边”贴图通道，在Shader中混合使用。这样在性能和效果上能达到很好的平衡。

2.3 风格化高光：点睛之笔

卡通风格的高光绝不是PBR里那个圆润的光斑。它通常是一个形状可控的、锐利的亮块。

• 实现方法：同样使用阈值化。先计算高光强度（可以用Blinn-Phong模型：pow(max(0, dot(N, H)), _Gloss)，其中H是半角向量）。然后，不是让它平滑衰减，而是用一个step或smoothstep函数，将高光强度与一个阈值比较，高于阈值就显示高光色，否则不显示。
• 高级技巧：为了让高光更有“手绘感”，可以不用纯色，而是用一张专门的高光形状贴图（比如星形、十字形）来采样。计算出的高光强度作为这张贴图的透明度控制，就能得到非常风格化的高光效果。

3. 两种实现路径：Shader Graph vs 手写HLSL

现在我们来点实在的，怎么在Unity里把上述原理实现出来？你有两条主要路径，它们各有优劣。

3.1 可视化之路：使用Shader Graph

对于不熟悉代码的美术或初学者，Shader Graph是福音。它让你通过连节点的方式构建Shader，直观且迭代快。

构建一个基础的三色调卡通Shader：

1. 创建节点：新建一个Unlit Graph（卡通渲染通常不需要复杂的物理光照，从Unlit开始更清晰）。
2. 计算兰伯特光照：
   • 获取Normal Vector和Light Direction节点。
   • 使用Dot Product节点计算点积。
   • 使用Saturate节点将结果限制在[0,1]。
3. 应用Ramp贴图：
   • 引入一个Sample Texture 2D节点，加载你的一维Ramp贴图。
   • 将Saturate后的点积结果（一个标量）作为UV的X输入，Y可以固定为0或由其他参数控制。
   • 采样得到的颜色就是你的漫反射颜色。
4. 添加高光：
   • 计算View Direction和Light Direction的半角向量Half Vector（相加后归一化）。
   • 计算法线与半角向量的点积，并用Power节点施加光泽度控制。
   • 使用Step或Smoothstep节点，并连接一个阈值参数_SpecularThreshold。
   • 将阈值化后的结果与一个高光颜色_SpecularColor相乘，再叠加到漫反射颜色上。
5. 添加背面描边：
   • 这需要用到Subgraph或自定义函数节点。原理是复制主Master Stack的配置到一个Subgraph中，然后在这个Subgraph的顶点阶段，将顶点位置沿顶点法线（需要转换到视图空间）方向挤出。
   • 在URP中，更常见的做法是创建两个Material，一个用于渲染主体，一个用于渲染描边（使用只渲染背面的Shader）。然后通过脚本或Render Feature控制渲染顺序。虽然管理上稍麻烦，但更清晰、灵活。

注意事项：Shader Graph的Light Direction节点在URP下默认获取的是主平行光方向。如果你的场景有多个动态光，需要启用“Additional Lights”选项并仔细处理光照混合，否则卡通角色在点光源下会“失灵”。对于风格化项目，我经常建议美术将主要光影效果烘焙到Ramp贴图中，动态光仅用作补光或特效光，这样风格更统一，性能也更好。

3.2 代码掌控之路：手写HLSL Shader

如果你追求极致的性能、完全的控制力，或者需要实现非常特殊的效果，手写Shader是必经之路。这里给出一个URP下，结合了Ramp着色和背面描边的简化Shader框架核心代码。

关键代码结构（URP Unlit Shader 框架）：

Shader "Custom/ToonURP" { Properties { _BaseMap ("Base Texture", 2D) = "white" {} _BaseColor ("Base Color", Color) = (1,1,1,1) _RampMap ("Ramp Texture", 2D) = "white" {} // 一维Ramp贴图 _SpecularThreshold ("Specular Threshold", Range(0, 1)) = 0.9 _SpecularColor ("Specular Color", Color) = (1,1,1,1) _Gloss ("Gloss", Range(1, 256)) = 20 _OutlineColor ("Outline Color", Color) = (0,0,0,1) _OutlineWidth ("Outline Width", Range(0, 0.1)) = 0.03 } SubShader { Tags { "RenderPipeline"="UniversalPipeline" "RenderType"="Opaque" } // -------------------- 第一个Pass：渲染描边 -------------------- Pass { Name "Outline" Tags { "LightMode"="SRPDefaultUnlit" } // 描边Pass通常用不受光模式 Cull Front // 只渲染背面 HLSLPROGRAM #pragma vertex vert #pragma fragment frag #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl" struct Attributes { float4 positionOS : POSITION; float3 normalOS : NORMAL; }; struct Varyings { float4 positionHCS : SV_POSITION; }; float _OutlineWidth; float4 _OutlineColor; Varyings vert(Attributes IN) { Varyings OUT; VertexPositionInputs vertexInput = GetVertexPositionInputs(IN.positionOS.xyz); // 将法线从模型空间转换到观察空间（View Space） VertexNormalInputs normalInput = GetVertexNormalInputs(IN.normalOS); float3 normalVS = normalInput.normalWS; // 注意：这里简化了，严谨做法是转换到观察空间 // 在齐次裁剪空间（Clip Space）沿法线方向挤出 float3 outlineOffset = normalize(normalVS) * _OutlineWidth; // 将偏移加到裁剪空间坐标上（更稳定的做法是在观察空间或世界空间计算偏移） OUT.positionHCS = vertexInput.positionCS + float4(outlineOffset, 0); return OUT; } half4 frag(Varyings IN) : SV_Target { return _OutlineColor; } ENDHLSL } // -------------------- 第二个Pass：渲染主体 -------------------- Pass { Name "ForwardLit" Tags { "LightMode"="UniversalForward" } HLSLPROGRAM #pragma vertex vert #pragma fragment frag #pragma multi_compile _ _MAIN_LIGHT_SHADOWS #pragma multi_compile _ _MAIN_LIGHT_SHADOWS_CASCADE #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl" #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl" struct Attributes { float4 positionOS : POSITION; float3 normalOS : NORMAL; float2 uv : TEXCOORD0; }; struct Varyings { float4 positionHCS : SV_POSITION; float2 uv : TEXCOORD0; float3 normalWS : TEXCOORD1; float3 viewDirWS : TEXCOORD2; }; TEXTURE2D(_BaseMap); SAMPLER(sampler_BaseMap); TEXTURE2D(_RampMap); SAMPLER(sampler_RampMap); CBUFFER_START(UnityPerMaterial) float4 _BaseMap_ST; half4 _BaseColor; half _SpecularThreshold; half4 _SpecularColor; half _Gloss; CBUFFER_END Varyings vert(Attributes IN) { Varyings OUT; VertexPositionInputs vertexInput = GetVertexPositionInputs(IN.positionOS.xyz); OUT.positionHCS = vertexInput.positionCS; OUT.uv = TRANSFORM_TEX(IN.uv, _BaseMap); VertexNormalInputs normalInput = GetVertexNormalInputs(IN.normalOS); OUT.normalWS = normalInput.normalWS; OUT.viewDirWS = GetWorldSpaceNormalizeViewDir(vertexInput.positionWS); return OUT; } half4 frag(Varyings IN) : SV_Target { // 1. 采样基础贴图和颜色 half4 baseColor = SAMPLE_TEXTURE2D(_BaseMap, sampler_BaseMap, IN.uv) * _BaseColor; // 2. 获取主光源信息 Light mainLight = GetMainLight(); float3 lightDir = mainLight.direction; float3 normalWS = normalize(IN.normalWS); float3 viewDirWS = normalize(IN.viewDirWS); // 3. 计算兰伯特光照强度，并应用Ramp贴图 float lambert = dot(normalWS, lightDir); lambert = saturate(lambert); // 确保在[0,1]范围 // 将lambert作为UV的X坐标去采样一维Ramp贴图 float2 rampUV = float2(lambert, 0.5); // Y坐标固定为0.5（贴图中心） half3 rampColor = SAMPLE_TEXTURE2D(_RampMap, sampler_RampMap, rampUV).rgb; // 4. 计算风格化高光 float3 halfDir = normalize(lightDir + viewDirWS); float specularIntensity = pow(max(0, dot(normalWS, halfDir)), _Gloss); half3 specular = _SpecularColor.rgb * step(_SpecularThreshold, specularIntensity); // 5. 合并颜色 half3 finalColor = baseColor.rgb * rampColor + specular; // 可以在此处叠加阴影（GetMainLightShadowParams）或其他效果 return half4(finalColor, baseColor.a); } ENDHLSL } } }

代码解析与避坑指南：

• 描边Pass的稳定性：上面代码中的描边偏移计算是在裁剪空间进行的，这是一种简化。更稳定的做法是在观察空间（View Space）进行偏移。因为透视投影下，在裁剪空间或NDC空间的偏移量不是线性的，会导致描边在屏幕边缘变粗或变细。正确的做法是在顶点着色器中将顶点和法线转换到观察空间，在观察空间进行挤出，然后再投影到裁剪空间。
• Ramp采样：我们使用lambert作为一维纹理的U坐标。这里0.5是假设你的Ramp贴图是竖直条纹，且有效颜色在中间一行。最好让美术提供标准的水平一维贴图，然后使用float2(lambert, 0.0)。
• 光源处理：这个示例只处理了主平行光。对于点光源或聚光灯，你需要使用AdditionalLights循环，并考虑光照衰减。对于卡通渲染，通常建议将附加光的影响也“卡通化”，即用同样的Ramp方式处理其贡献，而不是简单叠加，以保持风格统一。
• 性能：每个Pass都是一次Draw Call。这个Shader有两个Pass，意味着每个使用它的物体会被绘制两次。对于大量重复的物体（如草丛、小兵），这会成为性能瓶颈。优化方法包括：将描边功能剥离为单独的、更简化的Shader，并只对主角或重要物体使用；或者探索使用单个Pass的几何着色器方案（如果目标平台支持）。

4. 进阶技巧：让卡通世界“活”起来

基础的三色调+描边只是起点。要让角色和场景真正拥有个性和生命力，还需要下面这些“魔法”。

4.1 动态光影与情绪表达

固定的Ramp贴图可能显得呆板。我们可以引入动态参数来控制它。

• 可调节的阴影边界：不要将lambert直接用作UV，而是先进行一个简单的变换：float adjustedLambert = (lambert + _ShadowOffset) * _ShadowScale;。这样，美术或程序可以通过_ShadowOffset整体平移明暗交界线（模拟环境光变化），用_ShadowScale控制阴影的软硬程度。
• 基于角色状态的Ramp：将Ramp贴图改为二维的。U坐标依然是光照强度，V坐标则可以由脚本控制的参数驱动，比如角色的“血量”（0到1）。在Ramp贴图的不同行绘制健康状态和受伤状态的颜色映射，通过V坐标进行混合，就能实现角色受伤时整体色调变暗或变红的效果。

4.2 屏幕空间特效的融合

纯Shader的效果有时会受限于模型本身。结合后处理可以突破这个限制。

• 全局色调映射：使用一个全屏的Color Lookup Table（LUT）或简单的颜色分级（Color Grading）后处理，可以为整个卡通世界赋予统一的色调滤镜，快速营造出夕阳、阴森、回忆等不同氛围。
• 数字绘景（Matte Painting）风格：在后处理中，对深度纹理进行边缘检测，强化场景中物体的轮廓线。这可以作为对背面描边的补充，尤其适合表现建筑、山石等硬表面物体的硬朗线条。
• Bloom（泛光）的妙用：卡通风格的高光和某些自发光区域（如魔法特效）配合一个阈值较高的Bloom后处理，可以产生非常梦幻、类似动画片中“光晕”的效果。注意控制Bloom的强度和范围，避免画面“糊”掉。

4.3 与URP/HDRP渲染管线的深度集成

现代项目大多使用URP或HDRP。要让自定义Toon Shader在其中发挥最大效能，需要了解管线特性。

• URP中的Renderer Features：这是URP的超级武器。你可以编写自定义的Renderer Feature来实现：
  • 全屏卡通化后处理：将整个场景渲染到一个临时RT，然后对其应用色彩量化、边缘增强等全屏Shader，实现一种统一的“滤镜”效果。
  • 更智能的屏幕空间描边：编写一个Feature，在渲染不透明物体之后，透明物体之前，执行一次屏幕边缘检测，并将描边绘制到另一个RT，最后混合。这样可以更好地控制描边与透明物体的叠加关系。
  • 自定义阴影投射：卡通风格的阴影往往也需要是硬边或带有颜色的。你可以通过覆写ShadowCasterPass，或者使用Renderer Feature在阴影映射阶段应用自定义的阴影处理逻辑。
• HDRP中的Custom Pass：HDRP中的Custom Pass与URP的Renderer Feature类似，但功能更强大，可以在渲染流程的各个特定注入点（如Before Rendering, After Post-process）执行自定义绘制，非常适合插入卡通渲染所需的特殊效果。
• Shader变体管理：卡通Shader为了适配不同情况（有无阴影、有无附加光、不同质量等级），会产生很多Shader变体。在URP/HDRP中，要善用#pragma multi_compile和#pragma shader_feature来精确控制需要的变体，避免生成臃肿的Shader库，导致游戏包体变大和运行时内存占用过高。

5. 实战问题排查与性能优化指南

理论再美，落地时总会遇到各种妖魔鬼怪。下面是我在项目中总结出的最常见问题及其解决方案。

5.1 常见视觉问题与修复

5.2 性能优化关键点

卡通渲染效果虽好，但不能以牺牲帧率为代价。

1. Draw Call与Pass数量：这是首要敌人。如前所述，每个Pass的描边方案会使Draw Call翻倍。

   • 优化策略：使用GPU Instancing合并相同材质的物体。对于大量次要物体，直接禁用描边。考虑使用屏幕空间后处理描边作为全局方案，只对少数主角使用高质量的模型描边。

2. Shader复杂度与变体：功能丰富的卡通Shader往往包含很多分支和纹理采样。

   • 优化策略：使用shader_feature而不是multi_compile来关闭不需要的功能（如关闭高光、关闭法线贴图）。将频繁变化的参数（如颜色）放在CBUFFER中，将不常变化的参数（如Ramp贴图）作为全局常量。避免在Fragment Shader中进行复杂的循环或条件判断。

3. 带宽与纹理：使用多张高精度纹理（基础色、法线、Ramp、高光遮罩等）会带来带宽压力。

   • 优化策略：将基础色、粗糙度、金属度等信息打包到一张纹理的不同通道（RGBA）。使用低分辨率的Ramp贴图（如64x64或128x128），因为一维渐变对精度要求不高。对于移动平台，考虑使用半精度浮点数（half）。

4. 实时阴影：卡通角色投射的阴影如果是柔边阴影，会破坏风格。

   • 优化策略：为卡通角色使用单独的、分辨率较低的阴影贴图（通过URP的Renderer Features配置）。在阴影接收Shader中，对阴影进行“硬化”处理，例如使用step函数将软阴影二值化。

5.3 与美术工作流的协作

技术最终服务于艺术。一个友好的卡通渲染系统，必须让美术同学用得顺手。

• 提供直观的参数：不要暴露_Gloss=32.5这种数字。提供像“高光大小”、“高光锐度”、“阴影浓度”、“边缘光强度”这样美术能直观理解的参数，并在Inspector面板上用[Range(0,1)]或[Header(“Stylization”)]等Attribute进行美化分组。
• 制作材质预设（Material Presets）：为不同的角色类型（主角、NPC、怪物）、场景物体（植被、建筑）制作好调校完成的材质球预设。美术可以直接拖用，再微调颜色即可。
• Ramp贴图库：建立一套不同光照氛围下的Ramp贴图库（如“晴朗白天”、“阴天”、“室内暖光”、“反派紫光”），让美术可以快速切换整体色调。
• 后处理配置文件：将色调映射、Bloom、边缘增强等后处理参数保存为URP的Volume Profile配置文件。场景美术可以通过放置不同的Volume来快速切换场景的整体视觉效果。

走到这里，你已经从一个卡通渲染的旁观者，变成了能构建自己卡通世界的创造者。回顾整个过程，从理解色块化光照的原理，到用Shader Graph或代码将其实现；从实现基础的描边，到探索动态Ramp、屏幕空间融合等进阶技巧；最后再到解决实战中的各种“坑”并做好性能优化。这条路径上没有银弹，最惊艳的效果往往来自于对细节的反复打磨和对艺术风格的坚持。

我个人最深的体会是，卡通渲染是技术与艺术结合最紧密的领域之一。技术方案没有绝对的对错，只有是否适合项目风格和性能预算。有时，一个简单的参数调整（比如把阴影分界线稍微模糊那么一点点），带来的视觉提升可能比实现一个复杂的新特效还要大。多和美术沟通，多看优秀的动画和游戏作品，分析它们的光影和色彩运用，把这些感受融入到你的Shader参数里，这才是做出“惊艳”效果的终极秘诀。最后，别忘了分享和迭代，社区里总有令人惊喜的新思路，而你踩过的坑，也很可能正是别人需要的路标。