1. 项目概述为什么URP Toon Shader是当下卡通渲染的优选方案如果你正在用Unity做风格化项目无论是二次元、赛璐璐还是美式卡通大概率都绕不开“卡通渲染”这个核心需求。过去几年Unity内置渲染管线Built-in RP下的Toon Shader方案已经相当成熟但随着URPUniversal Render Pipeline成为官方主推的新一代轻量、高性能渲染管线很多开发者发现直接把老一套Shader搬过来效果要么不对要么性能开销巨大。这正是我写这篇指南的初衷——帮你把卡通渲染这套复杂的技术在URP管线里又快又稳地落地。卡通渲染或者说非真实感渲染NPR其核心目标不是模拟物理真实而是用简化的色彩、清晰的轮廓和风格化的光照来传递艺术感。在URP里做这件事优势很明显URP本身针对移动端和跨平台做了大量优化渲染架构更现代像Shader Graph这样的可视化工具链也更完善。但挑战同样存在URP的光照模型、渲染路径和Built-in管线有本质区别很多“祖传”的卡通Shader代码直接复制粘贴会报错或者渲染出奇怪的效果。所以这篇指南不会只给你一个现成的Shader文件了事。我会带你从零开始理解URP卡通渲染的核心模块——特别是如何用Shader Graph和少量手写HLSL代码搭建一个包含风格化光照、实时描边轮廓线、以及面部阴影贴图Face Ramp的完整解决方案。我会解释每一步背后的“为什么”比如为什么在URP里要用UniversalFragmentInputData而不是直接取世界法线以及如何平衡效果与性能确保你的项目在手机上也跑得流畅。无论你是从Built-in管线迁移过来的老手还是刚接触Shader的新人都能找到可复现的路径。2. 核心思路拆解构建URP卡通着色器的三大支柱在动手写代码或连节点之前我们必须把卡通渲染这个“黑盒”拆开看看它在URP这个新环境里由哪几个关键部分构成。理解了骨架填充血肉就不会迷路。2.1 支柱一风格化光照与色彩分层真实感渲染追求平滑的光照过渡平滑着色而卡通渲染要的恰恰是“阶跃式”的明暗变化。在URP中实现这一点核心在于改造光照计算函数。传统Lambert与阶跃化处理最基本的卡通光照模型基于兰伯特Lambert漫反射模型即表面颜色 光源颜色 * 表面基色 * max(0, dot(N, L))其中N是法线L是光线方向。卡通化的关键一步是对这个点积结果即光照强度进行“离散化”处理。我们不再使用连续的0到1的值而是通过一个阈值通常称为_RampThreshold和一个平滑度参数_RampSmooth将其映射为有限的几个色阶。在Shader Graph中你可以用一个Remap节点配合Smoothstep节点来实现。例如将点积结果从[-1, 1]重映射到[0, 1]然后通过Smoothstep当值低于阈值_RampThreshold时输出0阴影色高于_RampThreshold _RampSmooth时输出1亮部色在两者之间则进行平滑插值。这个平滑插值很重要完全硬切的边缘在动态光照下会显得很“跳”适当的平滑能让过渡更自然。URP光照数据获取这是与Built-in管线最大的不同点。在URP的Shader Graph中你不能直接拿到完整的光照向量。标准做法是使用Universal Fragment Input Data节点获取WorldSpaceNormal和WorldSpaceViewDirection再结合Lighting节点组如Main Light节点来获取主光源的方向和颜色。对于简单的卡通角色通常只计算主定向光如太阳就足够了这能极大降低计算量。如果需要多光源支持则需要启用URP Asset中的额外光源选项并在Shader中循环处理但这会显著增加性能开销移动端需谨慎。2.2 支柱二实时外轮廓描边Outlining轮廓线是卡通风格的灵魂。在URP中实现高质量实时描边的主流方法有两种各有优劣。方法一基于法线外扩的后处理描边Screen-Space Outline。这种方法在URP中通过一个全屏后处理Renderer Feature实现。其原理是在渲染完不透明物体后利用相机的深度和法线纹理检测相邻像素在深度或法线方向上的突变将这些边缘区域绘制为轮廓线颜色。它的优点是与场景复杂度无关无论模型多复杂开销相对固定并且能描出所有物体的轮廓包括场景物件。缺点是容易受到屏幕分辨率、抗锯齿和透明物体的影响线条粗细可能不均匀且难以实现“仅对特定角色描边”的需求。方法二基于几何体膨胀的描边Geometry Shader / Vertex Offset。这是更传统、也更可控的方法。其核心思想是渲染两遍模型第一遍用正常顶点和片元着色器渲染模型本体第二遍则专门渲染轮廓。在渲染轮廓时将模型的顶点沿着其顶点法线或观察空间下的法线方向向外挤出vertex.xyz vertexNormal * _OutlineWidth并使用纯色如黑色或渐变色的片元着色器进行渲染。为了确保轮廓线盖在模型本体后面通常会在挤出前将模型稍微推向相机增加一点深度偏移或者在渲染轮廓时使用ZTest Greater仅渲染被本体遮挡的部分。在URP中由于对几何着色器的支持有限且跨平台兼容性不佳更推荐使用顶点偏移Vertex Offset方案。我们可以通过一个单独的SubShader或Pass来实现这个第二遍渲染。关键技巧在于处理好挤出方向使其在模型各个角度下都保持均匀。一个常见的优化是使用normalize(mul((float3x3)UNITY_MATRIX_IT_MV, v.normal))来计算观察空间下的法线再进行挤出这样得到的轮廓线在透视下更稳定。2.3 支柱三面部阴影贴图Face Ramp Texture与细节控制对于角色面部、头发等需要精细阴影表现的部位单纯依靠光照计算是不够的。艺术家通常需要直接控制阴影的形状和渐变。这时就需要用到面部阴影贴图也叫Ramp贴图。Ramp贴图的工作原理这是一张一维或二维的渐变纹理。在着色器中我们使用之前计算出的光照强度即兰伯特点积结果作为UV的横坐标U去采样这张Ramp贴图。贴图的纵坐标V可以用来实现更多效果比如根据不同的表面区域脸颊、额头使用不同的渐变条。通过精心绘制Ramp贴图你可以实现非常风格化、带有笔触感的阴影这是程序化计算难以达到的。在URP Shader Graph中的集成创建一个Texture2D属性接收Ramp贴图然后使用Sample Texture 2D节点。将计算好的光照强度经过重映射和Smoothstep处理后的值作为UV的X分量输入Y分量可以固定为0或者链接另一个自定义参数如_RampV来控制使用哪一行渐变。采样得到的颜色将与基础色Albedo进行混合通常是相乘最终得到带有艺术化阴影的表面颜色。细节控制参数一个实用的卡通Shader必须提供丰富的参数供美术调整。除了基础的_BaseColor、_RampThreshold、_OutlineWidth、_OutlineColor还应包括_SpecularColor和_SpecularSize用于控制高光点的颜色和大小卡通高光通常是锐利的小圆点。_RimLightColor和_RimLightPower边缘光Rim Light用于在角色轮廓边缘添加一圈亮色增强体积感和戏剧效果。计算依赖于视角方向与法线的点积。_ShadowColor阴影区域的颜色通常不是纯黑而是带有环境光或冷色调的颜色让阴影更通透。3. 完整配置与实操从零搭建URP Toon Shader理论说得再多不如动手做一遍。接下来我将以使用Shader Graph为主辅以必要的自定义HLSL函数的方式带你一步步构建这个Shader。我假设你已经创建了一个URP项目并准备好了你的角色模型。3.1 第一步创建URP Asset与基础设置创建URP Asset在Project窗口右键 - Create - Rendering - URP Asset (with Universal Renderer)。将其命名为URP_Toon_Asset。配置Renderer Features在URP_Toon_Asset的Inspector面板中找到Renderer Features列表点击Add Renderer Feature。如果你计划使用后处理描边方案这里可以添加一个Full Screen Pass Renderer Feature并将其Material指向一个我们后续会创建的轮廓线后处理材质。但本篇我们以更通用的几何膨胀描边方案为主所以这一步可以稍后进行。配置管线设置在URP Asset中确保Depth Texture和Opaque Texture选项是开启的。这对于一些高级效果如软阴影、屏幕空间效果是必要的。根据你的目标平台尤其是移动端适当调整HDR、MSAA和Render Scale等质量设置。3.2 第二步使用Shader Graph构建卡通光照主体创建Unlit Shader Graph右键 - Create - Shader Graph - URP - Unlit Shader Graph。命名为ToonShader_Body。选择Unlit而不是Lit是因为我们要完全自定义光照计算不受URP复杂PBR光照模型的影响。构建主节点网络输入创建Texture2D属性_BaseMap主纹理和Color属性_BaseColor。用Sample Texture 2D节点采样纹理再与_BaseColor相乘得到基础色。法线与视角添加Fragment Input Data节点获取World Space Normal和World Space View Direction。对法线进行归一化Normalize节点。主光源添加Main Light节点。这个节点会输出主光源的颜色Color和方向Direction。方向需要取反Multiplyby -1才能得到指向光源的向量L。兰伯特计算计算dot(N, L)得到原始光照强度NdotL。阶跃化Ramp这是核心。创建两个Float属性_RampThreshold例如0.5和_RampSmooth例如0.05。使用公式smoothstep(_RampThreshold - _RampSmooth, _RampThreshold _RampSmooth, NdotL)。Smoothstep函数会在阈值附近产生平滑过渡_RampSmooth越小边缘越硬。应用光照将smoothstep的结果一个0到1的值作为混合因子在两个颜色之间进行线性插值Lerp。这两个颜色可以是属性_ShadowColor和_LightColor通常直接用主光源颜色Main Light Color。将插值结果与之前的基础色相乘得到最终的漫反射颜色。输出连接到Fragment节点的Base Color。将Alpha连接到Alpha如果需要透明则从纹理或属性取样。Alpha Clip Threshold可用于透明裁剪。添加高光与边缘光高光计算视角方向V与光线反射方向R的点积。反射方向R reflect(-L, N)。同样用smoothstep控制高光阈值和大小。将高光强度与_SpecularColor相乘然后加Add到最终的Base Color上。边缘光计算dot(N, V)。越靠近边缘法线与视角垂直这个值越接近0。用1 - saturate(dot(N, V))得到边缘因子再用pow(edgeFactor, _RimLightPower)控制衰减。最后与_RimLightColor相乘加到最终颜色上。3.3 第三步实现几何膨胀描边第二个PassShader Graph本身对多Pass的支持不直观因此描边Pass我们通常通过手写一个简单的HLSL Shader或在一个Shader Graph中通过Custom Function节点和渲染状态控制来实现更复杂的逻辑。这里介绍更清晰的手写HLSL方案。创建描边Shader创建一个新的Unlit Shader Graph或直接创建一个.shader文本文件。我们以手写Shader为例创建一个名为ToonShader_Outline的Shader。Shader结构Shader Custom/ToonOutline { Properties { _OutlineColor (Outline Color, Color) (0,0,0,1) _OutlineWidth (Outline Width, Range(0, 0.1)) 0.03 } SubShader { Tags { RenderTypeOpaque RenderPipelineUniversalPipeline QueueGeometry} // Pass 1: 渲染轮廓 Pass { Name Outline Cull Front // 只渲染背面挤出后变成的“外壳” ZWrite On // 使用一个简单的深度偏移确保轮廓在模型前面一点 Offset 0, -100 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; // 将法线转换到观察空间再进行挤出效果更均匀 float3 normalVS mul((float3x3)UNITY_MATRIX_IT_MV, IN.normalOS); normalVS normalize(normalVS); // 将顶点位置转换到观察空间 float3 posVS mul(UNITY_MATRIX_MV, IN.positionOS).xyz; // 沿观察空间法线挤出 posVS normalVS * _OutlineWidth; // 转换到齐次裁剪空间 OUT.positionHCS mul(UNITY_MATRIX_P, float4(posVS, 1.0)); return OUT; } half4 frag (Varyings IN) : SV_Target { return _OutlineColor; } ENDHLSL } } }与主体Shader结合最常用的方法不是将两个Shader写在一起而是使用材质球嵌套。即为模型主体创建一个材质Mat_Body使用我们之前用Shader Graph制作的ToonShader_Body。为描边创建一个材质Mat_Outline使用这个手写的ToonShader_Outline。在Unity中可以通过脚本动态地将Mat_Outline附加到角色GameObject上作为一个额外的渲染器或者更优雅地使用URP的Renderer Features中的Render Objects功能在渲染完不透明物体后用特定的Layer和覆盖材质Mat_Outline再渲染一遍角色模型。后一种方法不需要修改原有模型或材质结构。3.4 第四步集成面部阴影贴图Ramp Texture回到我们主体Shader的Shader Graph中。创建一个Texture2D属性命名为_FaceRampTex。在计算完smoothstep后的光照强度值我们称之为rampUV.x后可以再创建一个Float属性_RampV作为UV的Y坐标rampUV.y _RampV。如果你只有一条渐变带可以将Y固定为0。使用Sample Texture 2D节点以rampUV采样_FaceRampTex。采样结果是一个颜色。用这个Ramp颜色替代之前Lerp得到的阴影/亮部混合色。也就是说最终的漫反射颜色 BaseColor * RampColor。这样阴影的形状和颜色过渡就完全由贴图艺术家控制了。3.5 第五步材质调参与场景适配创建材质球将制作好的Shader赋给它。现在你可以开始快乐的调参了_RampThreshold和_RampSmooth控制阴影分界线的位置和硬度。配合旋转场景光源观察阴影变化是否符合预期。_OutlineWidth和_OutlineColor调整描边的粗细和颜色。注意_OutlineWidth值过大会导致轮廓线在模型凹处产生自相交的破碎效果。_FaceRampTex尝试不同的Ramp贴图。一张好的Ramp贴图应该能清晰地定义出亮部、中间调和暗部并且色彩过渡符合项目艺术风格。环境光与阴影接收确保场景中有Light组件方向光。为了让卡通角色能接收来自场景的实时阴影需要在URP Asset中启用阴影并在角色的材质Shader中添加对阴影贴图SHADOWS_SCREEN或MainLightShadows的采样支持。在Shader Graph中这通常通过Shadow Map和Shadow Coord节点来完成。4. 性能优化与移动端适配要点卡通Shader看着酷但一不小心就会成为性能杀手。尤其在移动端必须精打细算。精简计算光照模型坚持使用只计算主光源的简化兰伯特模型。避免使用复杂的BRDF或多光源循环。分支判断Shader中的if语句在GPU上可能造成性能波动。尽量用step、smoothstep或lerp等内置函数来实现条件逻辑。纹理采样控制纹理采样次数。将BaseColor、Ramp甚至Specular如果强度由一张灰度图控制尽可能合并到一张纹理的不同通道中如RGBA用一次采样读取多个参数。描边方案选择移动端首选后处理描边虽然效果有瑕疵但Screen-Space Outline的性能开销与场景中模型数量无关只与屏幕分辨率相关在角色众多的场景中往往比Geometry Outline更高效。可以通过降低采样分辨率、优化边缘检测算法来进一步提升性能。Geometry Outline的优化如果必须用几何膨胀确保描边Pass的Shader尽可能简单像上面示例一样只做顶点挤出和纯色输出。避免在描边Pass中进行任何复杂的光照计算或纹理采样。Shader变体与LODURP Shader Graph会自动生成很多Shader变体取决于你启用的关键字如_MAIN_LIGHT_SHADOWS。在Project Settings - Graphics - Shader Stripping中可以设置剥离未使用的变体减少包体大小和运行时内存。为不同性能档位的设备准备不同复杂度的Shader版本LOD在低端机上关闭边缘光、高光等次要效果。GPU Instancing确保你的Shader支持GPU Instancing。对于大量使用相同材质、相同模型的物体如一群小兵这能极大提升渲染效率。在Shader Graph的Graph Inspector中勾选GPU Instancing选项。5. 常见问题排查与实战心得在实际项目中踩坑是免不了的。这里记录几个我遇到的高频问题及其解决方案。问题1轮廓线在特定角度断裂或闪烁。原因顶点挤出时使用的法线信息不正确或不光滑。模型顶点法线本身有硬边或者挤出计算没有在观察空间进行导致透视变形。解决检查模型导入设置确保Normals计算模式是Calculate或Import并且没有不必要的光滑组Smoothing Groups断裂。使用上面代码示例中的方法将法线转换到观察空间mul((float3x3)UNITY_MATRIX_IT_MV, normalOS)后再进行挤出这能有效改善透视下的稳定性。适当增加一点点Offset值让轮廓线在深度测试中始终“赢过”本体避免Z-fighting。问题2卡通阴影在动态旋转下“抖动”或“跳变”。原因smoothstep的阈值_RampThreshold设置得过于敏感且_RampSmooth值太小导致光照强度的微小变化就引起颜色的阶跃。解决适当增大_RampSmooth的值例如从0.01调到0.05或0.1让阴影边界有一个柔和的过渡带。虽然这会损失一些“硬朗”的卡通感但能换来视觉上的稳定。也可以考虑对NdotL的值在时间上进行简单的平滑滤波Lerp但会引入延迟。问题3在URP中角色接收不到场景中其他物体的阴影。原因Shader Graph默认的Unlit Master节点不包含阴影接收功能。解决在Shader Graph中添加Shadow Map和Shadow Coord节点。使用Sample Screen Texture节点需要开启URP Asset中的Opaque Texture并选择Shadow纹理模式但这是一种屏幕空间阴影。更标准的方法是使用URP的MainLightShadows。这需要你的Shader Graph基于PBR Master或Lit Master节点修改或者通过Custom Function引入URP的阴影采样函数SampleShadowmap。这是一个相对高级的话题通常需要编写自定义HLSL代码块并连接到Shader Graph。问题4边缘光Rim Light在模型内部不该亮的地方也亮了。原因边缘光公式1 - saturate(dot(N, V))在模型正面法线朝向相机时值很小但在模型背面法线背向相机时值会很大导致模型内部如口腔也被照亮。解决在计算边缘光因子前先判断面是否朝向相机。float rimFactor 1 - saturate(dot(N, V)); rimFactor * step(0, dot(N, V));。step(0, dot(N, V))在面朝相机时为1背对相机时为0从而屏蔽掉背面的边缘光计算。个人心得不要追求“一步到位”的万能Shader。我曾试图做一个包含所有卡通效果漫反射、高光、边缘光、各向异性、Matcap、轮廓线的超级Shader结果就是参数巨多、难以调试、性能低下。最好的实践是模块化。为不同的角色类型主角、NPC、场景物件制作不同复杂度的Shader变体。主角用上所有特效远处的NPC可能只需要基础卡通光照加一个简单后处理描边。美术与程序的协作也很关键让美术同学理解RampThreshold、RampSmooth这些参数的意义他们才能调出想要的效果而不是总来问你“为什么影子不对”。最后多在不同设备上测试特别是低端安卓机一个在Editor里跑60帧的卡通Shader在真机上可能直接掉到20帧早发现早优化。
Unity URP卡通渲染实战：从Shader Graph到移动端优化全解析
1. 项目概述为什么URP Toon Shader是当下卡通渲染的优选方案如果你正在用Unity做风格化项目无论是二次元、赛璐璐还是美式卡通大概率都绕不开“卡通渲染”这个核心需求。过去几年Unity内置渲染管线Built-in RP下的Toon Shader方案已经相当成熟但随着URPUniversal Render Pipeline成为官方主推的新一代轻量、高性能渲染管线很多开发者发现直接把老一套Shader搬过来效果要么不对要么性能开销巨大。这正是我写这篇指南的初衷——帮你把卡通渲染这套复杂的技术在URP管线里又快又稳地落地。卡通渲染或者说非真实感渲染NPR其核心目标不是模拟物理真实而是用简化的色彩、清晰的轮廓和风格化的光照来传递艺术感。在URP里做这件事优势很明显URP本身针对移动端和跨平台做了大量优化渲染架构更现代像Shader Graph这样的可视化工具链也更完善。但挑战同样存在URP的光照模型、渲染路径和Built-in管线有本质区别很多“祖传”的卡通Shader代码直接复制粘贴会报错或者渲染出奇怪的效果。所以这篇指南不会只给你一个现成的Shader文件了事。我会带你从零开始理解URP卡通渲染的核心模块——特别是如何用Shader Graph和少量手写HLSL代码搭建一个包含风格化光照、实时描边轮廓线、以及面部阴影贴图Face Ramp的完整解决方案。我会解释每一步背后的“为什么”比如为什么在URP里要用UniversalFragmentInputData而不是直接取世界法线以及如何平衡效果与性能确保你的项目在手机上也跑得流畅。无论你是从Built-in管线迁移过来的老手还是刚接触Shader的新人都能找到可复现的路径。2. 核心思路拆解构建URP卡通着色器的三大支柱在动手写代码或连节点之前我们必须把卡通渲染这个“黑盒”拆开看看它在URP这个新环境里由哪几个关键部分构成。理解了骨架填充血肉就不会迷路。2.1 支柱一风格化光照与色彩分层真实感渲染追求平滑的光照过渡平滑着色而卡通渲染要的恰恰是“阶跃式”的明暗变化。在URP中实现这一点核心在于改造光照计算函数。传统Lambert与阶跃化处理最基本的卡通光照模型基于兰伯特Lambert漫反射模型即表面颜色 光源颜色 * 表面基色 * max(0, dot(N, L))其中N是法线L是光线方向。卡通化的关键一步是对这个点积结果即光照强度进行“离散化”处理。我们不再使用连续的0到1的值而是通过一个阈值通常称为_RampThreshold和一个平滑度参数_RampSmooth将其映射为有限的几个色阶。在Shader Graph中你可以用一个Remap节点配合Smoothstep节点来实现。例如将点积结果从[-1, 1]重映射到[0, 1]然后通过Smoothstep当值低于阈值_RampThreshold时输出0阴影色高于_RampThreshold _RampSmooth时输出1亮部色在两者之间则进行平滑插值。这个平滑插值很重要完全硬切的边缘在动态光照下会显得很“跳”适当的平滑能让过渡更自然。URP光照数据获取这是与Built-in管线最大的不同点。在URP的Shader Graph中你不能直接拿到完整的光照向量。标准做法是使用Universal Fragment Input Data节点获取WorldSpaceNormal和WorldSpaceViewDirection再结合Lighting节点组如Main Light节点来获取主光源的方向和颜色。对于简单的卡通角色通常只计算主定向光如太阳就足够了这能极大降低计算量。如果需要多光源支持则需要启用URP Asset中的额外光源选项并在Shader中循环处理但这会显著增加性能开销移动端需谨慎。2.2 支柱二实时外轮廓描边Outlining轮廓线是卡通风格的灵魂。在URP中实现高质量实时描边的主流方法有两种各有优劣。方法一基于法线外扩的后处理描边Screen-Space Outline。这种方法在URP中通过一个全屏后处理Renderer Feature实现。其原理是在渲染完不透明物体后利用相机的深度和法线纹理检测相邻像素在深度或法线方向上的突变将这些边缘区域绘制为轮廓线颜色。它的优点是与场景复杂度无关无论模型多复杂开销相对固定并且能描出所有物体的轮廓包括场景物件。缺点是容易受到屏幕分辨率、抗锯齿和透明物体的影响线条粗细可能不均匀且难以实现“仅对特定角色描边”的需求。方法二基于几何体膨胀的描边Geometry Shader / Vertex Offset。这是更传统、也更可控的方法。其核心思想是渲染两遍模型第一遍用正常顶点和片元着色器渲染模型本体第二遍则专门渲染轮廓。在渲染轮廓时将模型的顶点沿着其顶点法线或观察空间下的法线方向向外挤出vertex.xyz vertexNormal * _OutlineWidth并使用纯色如黑色或渐变色的片元着色器进行渲染。为了确保轮廓线盖在模型本体后面通常会在挤出前将模型稍微推向相机增加一点深度偏移或者在渲染轮廓时使用ZTest Greater仅渲染被本体遮挡的部分。在URP中由于对几何着色器的支持有限且跨平台兼容性不佳更推荐使用顶点偏移Vertex Offset方案。我们可以通过一个单独的SubShader或Pass来实现这个第二遍渲染。关键技巧在于处理好挤出方向使其在模型各个角度下都保持均匀。一个常见的优化是使用normalize(mul((float3x3)UNITY_MATRIX_IT_MV, v.normal))来计算观察空间下的法线再进行挤出这样得到的轮廓线在透视下更稳定。2.3 支柱三面部阴影贴图Face Ramp Texture与细节控制对于角色面部、头发等需要精细阴影表现的部位单纯依靠光照计算是不够的。艺术家通常需要直接控制阴影的形状和渐变。这时就需要用到面部阴影贴图也叫Ramp贴图。Ramp贴图的工作原理这是一张一维或二维的渐变纹理。在着色器中我们使用之前计算出的光照强度即兰伯特点积结果作为UV的横坐标U去采样这张Ramp贴图。贴图的纵坐标V可以用来实现更多效果比如根据不同的表面区域脸颊、额头使用不同的渐变条。通过精心绘制Ramp贴图你可以实现非常风格化、带有笔触感的阴影这是程序化计算难以达到的。在URP Shader Graph中的集成创建一个Texture2D属性接收Ramp贴图然后使用Sample Texture 2D节点。将计算好的光照强度经过重映射和Smoothstep处理后的值作为UV的X分量输入Y分量可以固定为0或者链接另一个自定义参数如_RampV来控制使用哪一行渐变。采样得到的颜色将与基础色Albedo进行混合通常是相乘最终得到带有艺术化阴影的表面颜色。细节控制参数一个实用的卡通Shader必须提供丰富的参数供美术调整。除了基础的_BaseColor、_RampThreshold、_OutlineWidth、_OutlineColor还应包括_SpecularColor和_SpecularSize用于控制高光点的颜色和大小卡通高光通常是锐利的小圆点。_RimLightColor和_RimLightPower边缘光Rim Light用于在角色轮廓边缘添加一圈亮色增强体积感和戏剧效果。计算依赖于视角方向与法线的点积。_ShadowColor阴影区域的颜色通常不是纯黑而是带有环境光或冷色调的颜色让阴影更通透。3. 完整配置与实操从零搭建URP Toon Shader理论说得再多不如动手做一遍。接下来我将以使用Shader Graph为主辅以必要的自定义HLSL函数的方式带你一步步构建这个Shader。我假设你已经创建了一个URP项目并准备好了你的角色模型。3.1 第一步创建URP Asset与基础设置创建URP Asset在Project窗口右键 - Create - Rendering - URP Asset (with Universal Renderer)。将其命名为URP_Toon_Asset。配置Renderer Features在URP_Toon_Asset的Inspector面板中找到Renderer Features列表点击Add Renderer Feature。如果你计划使用后处理描边方案这里可以添加一个Full Screen Pass Renderer Feature并将其Material指向一个我们后续会创建的轮廓线后处理材质。但本篇我们以更通用的几何膨胀描边方案为主所以这一步可以稍后进行。配置管线设置在URP Asset中确保Depth Texture和Opaque Texture选项是开启的。这对于一些高级效果如软阴影、屏幕空间效果是必要的。根据你的目标平台尤其是移动端适当调整HDR、MSAA和Render Scale等质量设置。3.2 第二步使用Shader Graph构建卡通光照主体创建Unlit Shader Graph右键 - Create - Shader Graph - URP - Unlit Shader Graph。命名为ToonShader_Body。选择Unlit而不是Lit是因为我们要完全自定义光照计算不受URP复杂PBR光照模型的影响。构建主节点网络输入创建Texture2D属性_BaseMap主纹理和Color属性_BaseColor。用Sample Texture 2D节点采样纹理再与_BaseColor相乘得到基础色。法线与视角添加Fragment Input Data节点获取World Space Normal和World Space View Direction。对法线进行归一化Normalize节点。主光源添加Main Light节点。这个节点会输出主光源的颜色Color和方向Direction。方向需要取反Multiplyby -1才能得到指向光源的向量L。兰伯特计算计算dot(N, L)得到原始光照强度NdotL。阶跃化Ramp这是核心。创建两个Float属性_RampThreshold例如0.5和_RampSmooth例如0.05。使用公式smoothstep(_RampThreshold - _RampSmooth, _RampThreshold _RampSmooth, NdotL)。Smoothstep函数会在阈值附近产生平滑过渡_RampSmooth越小边缘越硬。应用光照将smoothstep的结果一个0到1的值作为混合因子在两个颜色之间进行线性插值Lerp。这两个颜色可以是属性_ShadowColor和_LightColor通常直接用主光源颜色Main Light Color。将插值结果与之前的基础色相乘得到最终的漫反射颜色。输出连接到Fragment节点的Base Color。将Alpha连接到Alpha如果需要透明则从纹理或属性取样。Alpha Clip Threshold可用于透明裁剪。添加高光与边缘光高光计算视角方向V与光线反射方向R的点积。反射方向R reflect(-L, N)。同样用smoothstep控制高光阈值和大小。将高光强度与_SpecularColor相乘然后加Add到最终的Base Color上。边缘光计算dot(N, V)。越靠近边缘法线与视角垂直这个值越接近0。用1 - saturate(dot(N, V))得到边缘因子再用pow(edgeFactor, _RimLightPower)控制衰减。最后与_RimLightColor相乘加到最终颜色上。3.3 第三步实现几何膨胀描边第二个PassShader Graph本身对多Pass的支持不直观因此描边Pass我们通常通过手写一个简单的HLSL Shader或在一个Shader Graph中通过Custom Function节点和渲染状态控制来实现更复杂的逻辑。这里介绍更清晰的手写HLSL方案。创建描边Shader创建一个新的Unlit Shader Graph或直接创建一个.shader文本文件。我们以手写Shader为例创建一个名为ToonShader_Outline的Shader。Shader结构Shader Custom/ToonOutline { Properties { _OutlineColor (Outline Color, Color) (0,0,0,1) _OutlineWidth (Outline Width, Range(0, 0.1)) 0.03 } SubShader { Tags { RenderTypeOpaque RenderPipelineUniversalPipeline QueueGeometry} // Pass 1: 渲染轮廓 Pass { Name Outline Cull Front // 只渲染背面挤出后变成的“外壳” ZWrite On // 使用一个简单的深度偏移确保轮廓在模型前面一点 Offset 0, -100 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; // 将法线转换到观察空间再进行挤出效果更均匀 float3 normalVS mul((float3x3)UNITY_MATRIX_IT_MV, IN.normalOS); normalVS normalize(normalVS); // 将顶点位置转换到观察空间 float3 posVS mul(UNITY_MATRIX_MV, IN.positionOS).xyz; // 沿观察空间法线挤出 posVS normalVS * _OutlineWidth; // 转换到齐次裁剪空间 OUT.positionHCS mul(UNITY_MATRIX_P, float4(posVS, 1.0)); return OUT; } half4 frag (Varyings IN) : SV_Target { return _OutlineColor; } ENDHLSL } } }与主体Shader结合最常用的方法不是将两个Shader写在一起而是使用材质球嵌套。即为模型主体创建一个材质Mat_Body使用我们之前用Shader Graph制作的ToonShader_Body。为描边创建一个材质Mat_Outline使用这个手写的ToonShader_Outline。在Unity中可以通过脚本动态地将Mat_Outline附加到角色GameObject上作为一个额外的渲染器或者更优雅地使用URP的Renderer Features中的Render Objects功能在渲染完不透明物体后用特定的Layer和覆盖材质Mat_Outline再渲染一遍角色模型。后一种方法不需要修改原有模型或材质结构。3.4 第四步集成面部阴影贴图Ramp Texture回到我们主体Shader的Shader Graph中。创建一个Texture2D属性命名为_FaceRampTex。在计算完smoothstep后的光照强度值我们称之为rampUV.x后可以再创建一个Float属性_RampV作为UV的Y坐标rampUV.y _RampV。如果你只有一条渐变带可以将Y固定为0。使用Sample Texture 2D节点以rampUV采样_FaceRampTex。采样结果是一个颜色。用这个Ramp颜色替代之前Lerp得到的阴影/亮部混合色。也就是说最终的漫反射颜色 BaseColor * RampColor。这样阴影的形状和颜色过渡就完全由贴图艺术家控制了。3.5 第五步材质调参与场景适配创建材质球将制作好的Shader赋给它。现在你可以开始快乐的调参了_RampThreshold和_RampSmooth控制阴影分界线的位置和硬度。配合旋转场景光源观察阴影变化是否符合预期。_OutlineWidth和_OutlineColor调整描边的粗细和颜色。注意_OutlineWidth值过大会导致轮廓线在模型凹处产生自相交的破碎效果。_FaceRampTex尝试不同的Ramp贴图。一张好的Ramp贴图应该能清晰地定义出亮部、中间调和暗部并且色彩过渡符合项目艺术风格。环境光与阴影接收确保场景中有Light组件方向光。为了让卡通角色能接收来自场景的实时阴影需要在URP Asset中启用阴影并在角色的材质Shader中添加对阴影贴图SHADOWS_SCREEN或MainLightShadows的采样支持。在Shader Graph中这通常通过Shadow Map和Shadow Coord节点来完成。4. 性能优化与移动端适配要点卡通Shader看着酷但一不小心就会成为性能杀手。尤其在移动端必须精打细算。精简计算光照模型坚持使用只计算主光源的简化兰伯特模型。避免使用复杂的BRDF或多光源循环。分支判断Shader中的if语句在GPU上可能造成性能波动。尽量用step、smoothstep或lerp等内置函数来实现条件逻辑。纹理采样控制纹理采样次数。将BaseColor、Ramp甚至Specular如果强度由一张灰度图控制尽可能合并到一张纹理的不同通道中如RGBA用一次采样读取多个参数。描边方案选择移动端首选后处理描边虽然效果有瑕疵但Screen-Space Outline的性能开销与场景中模型数量无关只与屏幕分辨率相关在角色众多的场景中往往比Geometry Outline更高效。可以通过降低采样分辨率、优化边缘检测算法来进一步提升性能。Geometry Outline的优化如果必须用几何膨胀确保描边Pass的Shader尽可能简单像上面示例一样只做顶点挤出和纯色输出。避免在描边Pass中进行任何复杂的光照计算或纹理采样。Shader变体与LODURP Shader Graph会自动生成很多Shader变体取决于你启用的关键字如_MAIN_LIGHT_SHADOWS。在Project Settings - Graphics - Shader Stripping中可以设置剥离未使用的变体减少包体大小和运行时内存。为不同性能档位的设备准备不同复杂度的Shader版本LOD在低端机上关闭边缘光、高光等次要效果。GPU Instancing确保你的Shader支持GPU Instancing。对于大量使用相同材质、相同模型的物体如一群小兵这能极大提升渲染效率。在Shader Graph的Graph Inspector中勾选GPU Instancing选项。5. 常见问题排查与实战心得在实际项目中踩坑是免不了的。这里记录几个我遇到的高频问题及其解决方案。问题1轮廓线在特定角度断裂或闪烁。原因顶点挤出时使用的法线信息不正确或不光滑。模型顶点法线本身有硬边或者挤出计算没有在观察空间进行导致透视变形。解决检查模型导入设置确保Normals计算模式是Calculate或Import并且没有不必要的光滑组Smoothing Groups断裂。使用上面代码示例中的方法将法线转换到观察空间mul((float3x3)UNITY_MATRIX_IT_MV, normalOS)后再进行挤出这能有效改善透视下的稳定性。适当增加一点点Offset值让轮廓线在深度测试中始终“赢过”本体避免Z-fighting。问题2卡通阴影在动态旋转下“抖动”或“跳变”。原因smoothstep的阈值_RampThreshold设置得过于敏感且_RampSmooth值太小导致光照强度的微小变化就引起颜色的阶跃。解决适当增大_RampSmooth的值例如从0.01调到0.05或0.1让阴影边界有一个柔和的过渡带。虽然这会损失一些“硬朗”的卡通感但能换来视觉上的稳定。也可以考虑对NdotL的值在时间上进行简单的平滑滤波Lerp但会引入延迟。问题3在URP中角色接收不到场景中其他物体的阴影。原因Shader Graph默认的Unlit Master节点不包含阴影接收功能。解决在Shader Graph中添加Shadow Map和Shadow Coord节点。使用Sample Screen Texture节点需要开启URP Asset中的Opaque Texture并选择Shadow纹理模式但这是一种屏幕空间阴影。更标准的方法是使用URP的MainLightShadows。这需要你的Shader Graph基于PBR Master或Lit Master节点修改或者通过Custom Function引入URP的阴影采样函数SampleShadowmap。这是一个相对高级的话题通常需要编写自定义HLSL代码块并连接到Shader Graph。问题4边缘光Rim Light在模型内部不该亮的地方也亮了。原因边缘光公式1 - saturate(dot(N, V))在模型正面法线朝向相机时值很小但在模型背面法线背向相机时值会很大导致模型内部如口腔也被照亮。解决在计算边缘光因子前先判断面是否朝向相机。float rimFactor 1 - saturate(dot(N, V)); rimFactor * step(0, dot(N, V));。step(0, dot(N, V))在面朝相机时为1背对相机时为0从而屏蔽掉背面的边缘光计算。个人心得不要追求“一步到位”的万能Shader。我曾试图做一个包含所有卡通效果漫反射、高光、边缘光、各向异性、Matcap、轮廓线的超级Shader结果就是参数巨多、难以调试、性能低下。最好的实践是模块化。为不同的角色类型主角、NPC、场景物件制作不同复杂度的Shader变体。主角用上所有特效远处的NPC可能只需要基础卡通光照加一个简单后处理描边。美术与程序的协作也很关键让美术同学理解RampThreshold、RampSmooth这些参数的意义他们才能调出想要的效果而不是总来问你“为什么影子不对”。最后多在不同设备上测试特别是低端安卓机一个在Editor里跑60帧的卡通Shader在真机上可能直接掉到20帧早发现早优化。
