风格化渲染系统实战：色阶光照、手绘贴图与混合描边方案

做风格化渲染系统，最尴尬的往往不是技术实现，而是目标模糊：想做得像吉卜力，又想要卡通渲染的干净轮廓，还想保留一点点手绘质感，最后出来的东西四不像。我在定这个项目目标的时候，直接把风格收敛成一个非常具体的锚点——低饱和手绘贴图配合色阶化光照，再叠加轻量的画面后处理。整套系统的核心目标是：让非写实美术资产在不同光线下都能保持稳定、干净的画面表现，同时把渲染性能控制在中端移动设备可跑的范围内。

这个项目不是一个完整的商业引擎，也不是某个特定游戏的渲染管线，而是一套可以嵌入现有引擎的风格化渲染方案。它解决的核心问题有三个：第一，如何用有限的Shader和后处理组合，把PBR生产流程产生的资产，转化成带有明确手绘感的非写实画面；第二，如何在角色和场景之间保持风格统一；第三，如何在风格化之后，依旧保留足够的画面层次和体积感，而不是变成一片色块。

做这套系统之前，可以先判断一下自己是否真的需要它。如果你的项目只是临时做个风格化Demo，那一个轮廓描边Shader加一个色阶光照基本就够了；但如果你的项目有多个角色、多套场景、要跨不同时间段反复调效果，那么一套有统一参数约束的渲染系统，比单Shader散装方案要省心得多。这套系统适合的人群也比较明确：技术美术、渲染程序员、独立游戏开发者，以及需要把非写实风格落地到实际项目里的团队。

1. 项目定位与风格化渲染的核心矛盾

风格化渲染，也就是常说的NPR渲染，想做好绝不比PBR简单。PBR有物理规律做指引，灯光的响应、材质的反射都有一堆成熟模型支撑；但风格化渲染没有“标准答案”，它的合格线完全由美术审美和项目调性决定。这个项目从立项开始，我给自己定了一条硬规矩：先定画面标准，再决定技术方案，顺序不能反。

1.1 风格化渲染系统的目标定义

这套系统的核心目标可以用一句话概括：让所有场景元素在统一光照逻辑下，呈现出“有手绘感和平面感，但仍有体积”的画面。具体拆开来看有三层：

第一层是基础视觉风格。画面不能走纯赛璐璐的路——赛璐璐动画的阴影边界过于锐利，对场景而言很容易显得单薄。我选择的是“轻微软边色阶”加“手绘贴图质感保留”的做法，让过渡部分还有一点点灰度变化，避免纯色块带来廉价感。

第二层是材质响应逻辑。不同材质要能区分：布料、皮肤、头发、金属、石头，它们在风格化处理下应该有各自的亮度阈值和纹理响应，而不是所有物体都套同一个色阶函数。

第三层是性能预算。项目初期就锁定了移动端至少30FPS、PC端高画质稳定60FPS以上的目标。后处理开的数量有上限，屏幕空间描边的分辨率可以适当压缩，阴影级联数量和雾效的计算规模都要提前做规划。

这三层目标里，最容易失控的是第二层。很多风格化方案在角色上很好看，一放进场景就变脏，主要原因是场景里的植被、石头的色阶响应和角色不统一。这套系统里，我引入了一个全局的“材质肤色表”，每个材质都有一个光源响应配置，由同一套参数驱动，保证角色站在任何一个场景里都不会看起来像两个世界的产物。

1.2 为什么我不直接套一个现成后处理滤镜

直接在PostProcess环节加一个卡通化滤镜，比如快速量化颜色加描边，是见效最快但问题最多的方案。它破坏的恰恰是画面里最宝贵的东西：明暗关系中的层次感。滤镜式量化通常是在线性颜色空间里做截断，暗部很容易糊成一团，亮部也会出现大量高光溢出，整个画面变得又焦又平。

我在早期原型阶段试过这个方案，效果非常劝退。尤其是斜侧光和逆光场景，滤镜量化后的画面完全没有造型感，角色的脸部直接变成一个整体色块，毫无结构。这也是为什么最终方案选择在前向渲染阶段就做风格化处理：光照数据最完整的时候就把色阶化的逻辑做进去，在光照累积层面控制层次，后处理只负责最终调色和边缘整合。

这样做的收益在后来的测试里很明显：相同的场景，直接套滤镜和走这套前向风格的差异，在脸部阴影过渡和场景纵深感的呈现上几乎是两个量级的差距。

1.3 这套系统能延伸到的应用场景

虽然初始目标是独立游戏级别的画面表现，但整套系统在设计时做了场景适配，所以它可以延伸应用到：

• 动画短片制作流程中的实时预览，尤其是在转场镜头多、灯光变化频繁的项目里，这套系统能保证角色在不同环境下不跳戏；
• 品牌向的实时互动内容，比如虚拟偶像、产品展示，这些项目往往统一风格的需求非常迫切；
• 非写实风格的模拟经营类、冒险解密类游戏，这类产品对性能敏感，同时画面辨识度要求高；
• 教育类可视化，将复杂结构和流程用颜色分层的方式展示的演示项目也完全适用。

持续维护这套系统的最大价值在于，它把“感觉”变成了“参数”。一旦风格稳定，新人接手美术调整时，不需要靠感觉瞎试，而是直接改亮度阈值、饱和度映射和描边权重这几个数值，输出结果可控性极强。

2. 系统架构与技术选型

确定目标之后，就开始搭建骨架。整个系统的架构被我划分为四个层次：渲染入口层、光照模型层、材质表现层、后处理整合层。每一层都尽量保持独立，这样后续如果要换引擎或者换目标平台，可以不伤筋骨地平移替换。

2.1 渲染管线的选择与理由

项目基于Unity的URP管线进行开发，选择URP而不是HDRP或者内置管线，原因有三个。

第一，URP的SRP Batcher和GPU Instance支持比较好，对移动端的合批优化非常友好，风格化渲染的场景往往有大量小物件，批处理能力直接影响DrawCall上限。

第二，URP的Shader结构相对简洁，不需要处理大量HDRP专属的复杂光照特性，这在调试风格化效果时能大幅缩短迭代周期。

第三，URP的后处理栈提供了Color Adjustments、Bloom、Vignette这些基础件，我可以把主要精力放在定制风格化专用的CustomPass上，而不是重新造一套后处理轮子。

需要注意的是，URP不同版本之间Shader关键字和Pass结构有一些细微差别，项目搭建时应该锁定一个长期稳定的版本。我用的是Unity 2022 LTS对应的URP版本，这期间的接口变化比较小，踩坑少很多。

2.2 渲染数据的层级设计

整个场景的渲染对象被归为三类：

• 角色类（含NPC、玩家操控角色、过场动画中的主要角色）：重要程度最高，使用完整的风格化材质，包含头部特殊处理、身体主材质、头发专用材质；
• 场景类（建筑、植被、地形、道具）：使用简化版的风格化材质，多数情况下不需要角色级别的细致分层，但描边逻辑和色阶响应必须保持一致驱动；
• 特效类（粒子、半透明特效、UI特效）：不走NPR主管线，使用独立的特效材质，只做最终颜色空间统一。

这种归类看起来简单，但非常关键。如果没有这套分类，就会出现角色风格和场景风格打架的问题。实际项目中，很多时候场景美术想的是做写实细节，角色美术想的是做卡通干净，两边拼在一起立刻露馅。有了这个分类后，场景材质会强制约束自己的亮度范围和饱和范围，角色材质则会尽量保留材质分层感，最终叠加起来，就是统一的“世界内画面标准”。

2.3 为什么采用混合描边方案

轮廓描边是风格化渲染最显眼的特征，但也是坑最多的环节。很多教程都推荐纯屏幕空间边缘检测，用深度和法线纹理做Sobel算子，几行代码就能出一份不错的描边。

但纯屏幕空间方案有一个隐蔽问题：它描出来的边既包括物体的轮廓边，也包括物体内部的法线突变，比如衣服褶皱、脸部五官的起伏。这些点在视觉上本来应该有一部分被保留，一部分被忽略，边缘检测算子无法区分。

最终方案采用混合描边策略：

• 角色类：使用模型空间背面描边，基于顶点色控制描边宽度和透明度。这样角色轮廓非常干净，内部褶皱可以完全通过顶点色权重来控制；
• 场景类：使用深度和法线屏幕空间边缘检测，但会把法线突变的权重调低，同时利用高度雾做距离衰减，避免远景物体满是描边毛刺；
• 半透明物体：不参与主描边，改用轮廓光代替，既避免深度写入困扰，又能保住物体的外形辨识度。

混合描边对技术的挑战并不是算法本身，而是对两类描边结果的统一合成：模型空间描边出来是硬边、亮边，屏幕空间描边出来是软边、暗边，不处理会出现笔触风格不一致的违和感。实际做法是在后期描边合成阶段分别控制两个边缘层的颜色和透明度映射，让它们逼近同一个视觉节奏。

3. 核心细节拆解与风格化原理

进入核心细节环节，需要把实现原理讲透，这部分才是真正价值所在。风格化渲染看似玄学，实际上就是几组关键参数在背后驱动画面表现，理解它们的物理含义和调节手感，才算真正掌握这套系统的调节逻辑。

3.1 色阶化光照的物理逻辑与实现

色阶化光照的本质是：把连续变化的光照结果，切分成有限数量的离散阶梯，模拟手动铺色的视觉效果。传统卡通渲染常用阶梯函数一步到位，但为了保留一点体积感，这套系统使用的是“渐变式色阶”。

具体做法的光照计算如下：

• 先算一个半兰伯特光照值：halfLambert = dot(Normal, LightDir) * 0.5 + 0.5。这个操作让背光面从全黑变成灰，符合手绘插画中通常不会出现纯黑阴影的习惯；
• 再通过阶梯函数量化：band = floor(halfLambert * bands) / bands。bands通常取2到4，太大的话会失去手绘感，太小则阴影面积过大，画面显得很闷；
• 最后在相邻band之间做一个平滑插值，smoothstep过渡宽度控制在0.05到0.15之间。这个参数很微妙，过渡越窄越赛璐璐，越宽越接近厚涂质感。

这是整个系统最重要的一段逻辑，因为它直接决定了“影子的形状”。我强烈建议在实机调试时，不要一上来就调色阶bands数值，而是先把光照方向固定成侧光45度角，观察角色脸部和衣物褶皱的阴影结构是不是合理，结构合理了再去调颜色和饱和度。

3.2 手绘贴图在光照计算中如何保留纹理感

风格化渲染不意味着抹掉贴图细节。PBR流程里，BaseColor贴图往往承担的是反照率的作用，而风格化渲染中，贴图本身就是画面的主角。

这里的关键技巧是：用分离式冷暖明暗映射。写实渲染里，暗部通常靠增加环境光和AO来提亮；风格化渲染里，我喜欢在暗部叠加一个青蓝色偏，而不是纯黑降亮度。这样做有两个好处：一是暗部依然有信息量，不会黑成一团；二是符合大多数手绘插画的配色习惯，冷阴影会让画面干净、通透很多。

具体到Shader实现里，这一步是在色阶化光照之后做颜色偏移的：

暗部颜色 = 原始贴图颜色 * 暗部亮度系数 + 暗部冷色调向量 * 阴影强度系数

这两个系数的比例，就是“阴影脏不脏”的根源。许多效果不够干净的问题出现在这里：冷色调向量加多了，画面发灰发闷；加少了，暗部又干瘪。我一般用0.05到0.15的强度范围起步，配合饱和度的整体控制一起调。

3.3 描边是如何做到有生命的

描边绝不是简单画一条黑线。这套系统实现了“宽度衰减”和“颜色透光”两组控制逻辑。

宽度衰减的灵感来源于手绘原画中，轮廓线的粗细往往是变化的：脸部的轮廓线细，衣摆等自由边缘线粗，物体内部的结构转折线几乎消失。这个权重信息，我用顶点色R通道来存储，美术在建模阶段直接在模型上绘制。这比算法估算要精准得多，而且完全可控。

颜色透光则是把描边分为纯黑和深灰两个通道，深灰通道的透明度由灯光情况决定。当角色处于背光环境时，深灰描边会微微透出一点点环境光颜色，这样描边就不是一条死黑线，而是有体积感的边缘层次。

我实际用下来，这两个细节是最常被人忽略但最能提升画面质感的。很多业余项目的描边看着像打印上去的贴纸，问题一般都不在描边算法本身，而是缺少顶点色权重控制和颜色透光处理。

3.4 高光和反射的风格化处理

高光在风格化渲染中最难处理，搞不好就会像油腻的塑料。这个系统里，角色高光不依赖PBR的高光模型，而是使用程序化高光遮罩：用视线方向与法线的点积，结合一张噪声纹理扰动高光形状，再叠加在色阶化天空反射结果上。

头发的高光则单独使用环形高光叠加，由切线方向计算偏移，可以模拟手绘KIKE色带。这套方案的优点是角色转身时高光不会闪，头发高光的形状不会因为视点变化而疯狂变形，整体观感非常稳定。

要知道，NPR材质最大的矛盾是“手绘感”和“动态视角”之间的冲突。如果完全按物理模型计算高光，视角转动时高光位置变化剧烈，手绘感瞬间崩塌；如果完全不计算高光，头发又变成一片死色。中间要找一个平衡：让高光随视点微弱变化，变化幅度控制在原画中“可能画得出”的范围里。

4. 实操过程与核心模块实现

这部分是真正的落地环节。我按照一个实际项目的实现顺序，把各模块的配置方式和关键计算讲清楚。如果你打算在自己项目里复刻这套系统，可以从这部分直接抄作业，然后按自己的资产特点微调参数。

4.1 角色主材质的Shader实现

角色主材质是整个系统里最重要也最复杂的部分，它承载了皮肤、布料、金属几大类的基础逻辑。我用Unity ShaderLab组织了一套核心Pass，下面是把关键代码抽象后的核心结构：

// 简化版角色主着色器关键片段 float halfLambert = saturate(dot(normalWS, lightDirWS) * 0.5 + 0.5); float banded = floor(halfLambert * _ShadowBands) / _ShadowBands; float softEdge = smoothstep(0.0, _ShadowFeather, halfLambert - banded); float diff = lerp(banded, banded + 1.0 / _ShadowBands, softEdge); // 暗部冷色偏移 float3 shadowColor = baseColor * _ShadowBrightness + float3(_ShadowCool, _ShadowCool, _ShadowCool * 1.05) * _ShadowTintStrength; float3 finalColor = lerp(shadowColor, baseColor, saturate(diff * _ShadowContrast));

这段代码的精髓在于_ShadowFeather与_ShadowContrast的组合：前者控制色阶过渡的软硬程度，后者控制整个受光面的对比强度。有一段时间我的角色皮肤总带着一层灰蒙蒙的罩子，后来把_ShadowContrast从0.6调到1.2才解决，原因是对比度低了以后，中间调部分色阶区分度不够，画面显得很肉。

顶点色描边权重则在另一个绘制背面轮廓的Pass中使用：

// 背面描边Pass核心 float3 normalWS = normalize(mul((float3x3)UNITY_MATRIX_M, v.normal)); float3 posVS = TransformWorldToView(vertexWS + normalWS * _OutlineWidth * v.color.r);

注意这里intensive用的是顶点色R通道，美术可以逐顶点控制描边宽度。还要额外处理模型缩放不一致的问题，描边宽度要乘以模型包围盒对角线长度做归一化，否则同一个材质的描边在不同大小的物体上粗细不一样。

4.2 屏幕空间边缘检测的后处理实现

场景类物体和远景物体的描边用屏幕空间边缘检测来补足。这一步放在URP的CustomPass里，输入是场景深度纹理和法线纹理。

核心的边缘检测算子用Sobel，但比较维度不只是深度，还需要加入法线差异：

float edgeDepth = abs(tex2D(_CameraDepthTexture, uv + offset).r - tex2D(_CameraDepthTexture, uv - offset).r); float edgeNormal = 1.0 - saturate(dot(normalWS1, normalWS2)); float edge = saturate(edgeDepth * _DepthEdgeWeight + edgeNormal * _NormalEdgeWeight);

对移动端有一个优化技巧：没必要全分辨率做边缘检测，可以把后处理RenderTexture降为半分辨率，描边结果再用双线性采样混回全分辨率。由于描边本身是高频信息，人在观看时对它的分辨率并不敏感，半分辨率处理几乎察觉不到损失，但GPU开销直接降到原来的四分之一。

实际场景里，远处树木和草丛的边缘检测会出现很多杂乱断线。解决办法有两个：一是把_NormalEdgeWeight设置成随距离衰减，二是对边缘结果做一次模糊再与原始画面混合，相当于对描边层做一个低通滤波，断线会连成片段感，更像手绘笔触。

4.3 后处理整合与调色

后处理的目标不是炫技，而是让所有渲染元素在输出到屏幕前拥有统一的色彩基调。这套系统只在后处理阶段保留四个组件：

• ColorAdjustments：调节整体饱和度，间距在-15%到-25%，把画面饱和度整体往下压一点，为风格化留出干净底色；
• 自定义ColorRamp：将高光、中间调、暗部三个区域的色温分别微调，高光偏暖一丁点，暗部偏冷；
• 轻微Bloom：强度非常低，主要给灯光和天空接缝处增加一点柔光感，如果项目主基调偏写实可以关闭；
• Vignette：轻度加一点，模拟镜头暗角，让画面重心更聚焦。

自定义ColorRamp是这四步里最关键的。我一般借助LUT贴图来做，给美术直接提供一张可以手绘的LUT图，他们可以在PS里直接改颜色，不需要回来调Shader参数，让美术介入后期调色的门槛大大降低。

4.4 风格参数全局表

我把所有影响画面风格的参数集中在一个ScriptableObject里，美术和TA在Inspector里就能改，不用拆开找不同材质：

一个非常重要的调参心得是：风格参数永远不能脱离具体场景去调。比如ShadowBands在只有一盏主灯的空场景里调到4很干净，但放进有雾、有环境光反射的实景中就会显得太碎。所以每次调参都要在项目当前最复杂的场景里验证，再回退到典型场景确认，反复迭代两次以上。

5. 常见问题与排查技巧实录

这部分内容来自我自己和团队在开发过程中真实踩过的坑，直接列出问题和方案。每一条都对应一个真实调试场景，拿来就能用。

5.1 描边出现断裂与锯齿

这个问题在屏幕空间描边中极为常见，典型表现是：角色转身时，轮廓线时断时续，或者出现明显的阶梯锯齿。

排查顺序可以从三个方向走：

• 检查深度纹理的精度：URP的深度纹理默认使用24位，如果启用了MSAA且深度纹理解析异常，会直接影响边缘检测结果。先把MSAA关闭测试，确认问题是否出在深度数据上；
• 检查描边Pass的采样偏移：Sobel算子使用的采样精度如果太大，会跨过细小物体，导致边缘丢失。将采样偏移缩放到1个像素左右通常可以解决；
• 检查法线纹理质量：法线贴图压缩格式带带状压缩噪声，会对法线边缘检测造成干扰，直接影响边缘判断。将法线贴图在关键物体上改为无压缩格式，通常会明显改善。

如果这些基础排查都无效，还有一个终极大招——对描边结果做一次双边滤波再合成。这个操作会略微损失一点锐利感，但对于远景复杂物体的描边稳定性，提升非常明显。

5.2 色阶断层闪烁

色阶化光照在物体移动和相机移动时，会在阴影过渡带产生明显的“断层闪现”，这是因为色阶边界附近的亮度值在帧之间跳跃，导致视觉上的抖动。

根源是半兰伯特值在过渡区域存在阶梯跳变。解决办法是在阶梯函数之后，再加入噪声抖动来模拟手绘阴影的边缘不确定性：

float dither = (rand(uv) - 0.5) * _ShadowDither; float banded = floor(halfLambert * bands + dither) / bands;

这一步会让阴影边缘微微抖动，视觉上像是纸张质感，反而更贴近手绘的感觉。_ShadowDither控制抖动幅度，推荐在0.02到0.06之间，太大会让画面脏。

除此之外，还可以让阴影阈值受高度雾影响：距离相机越远的物体，色阶过渡宽度越大一点，这样远景物体的颜色会柔和混入环境色，不容易看出明显的断层。

5.3 画面发灰、发脏

风格化渲染调到最后，八成都会遇到画面灰蒙蒙的问题。常见原因有两个：暗部冷色加太多，和后处理饱和度降过头。

暗部冷色强度ShadowCool设置成0.15以上时，大面积暗部会泛着明显的青灰色，看起来很脏。正确做法是ShadowCool只控制暗部最低亮度向冷色偏移的强度，而不要直接拉高整个暗部亮度。饱和度方面，我推荐分步处理：先在材质层把原画的颜色做准，后处理层只降很少的饱和度，因为颜色干净的核心在材质阶段，而不是后处理补救。

如果画面还是发脏，排查一下环境光设置。URP场景默认环境光使用的是天空盒，如果天空盒亮度偏高，会让暗部被抬亮，风格化阴影的对比度就失效了。把环境光强度下调到0.3到0.5之间，画面立刻会干净很多。

5.4 透明物体的描边问题

粒子、玻璃、头发这些透明物体参与主描边时，会由于透明Pass不写入深度，导致描边出现在错误的遮挡位置。

最简单有效的方案是：这些物体统一走“透明描边专用Pass”，描边颜色与厚度直接用主Pass输出的透明度控制。如果需求透明物体也有完整描边，则把它拆成两个Pass：第一个Pass只写深度并输出透明信息，第二个Pass负责颜色与描边。这种方法保持了透明物体描边的相对稳定性，只是会多消耗一些填充率，性能代价值得。

5.5 头发与飘动布料的高光闪烁

动态布料和头发在做顶点动画时，法线随顶点位置变化，高光容易出现剧烈的明暗闪烁。在项目里用了程序化贴片法线代替实时计算的顶点法线后，这个现象显著改善。同时，要把高光的视差强度限制在一个软阈值范围内，不要让极端法线方向触发高光，这能在算法层面保证画面稳定。

6. 后续扩展方向与实际项目维护心得

这套风格化渲染系统已经在内外部多个风格实验项目里跑了半年，目前的画面稳定性和性能表现都符合预期。它的后续扩展方向主要在前景交互层面和工具链集成上。

6.1 未来可以扩展的方向

第一个方向是大世界地形风格化整合。当前地形还在使用URP的默认地形Shader，虽然色阶响应能通过全局参数强行统一，但缺少地形特有的斜向阴影细节。之后计划为地形单独写一个轻量版风格化Shader，加入地表曲率响应来控制坡面阴影强度。

第二个方向是角色表情与口型同步的渲染联动。NPR角色在特写镜头里的表情变化对描边和阴影非常敏感，后续想在材质层加入表情权重混合，让微笑、惊讶等表情自动调整脸部轮廓描边宽度和脸颊阴影阈值，减少手K工作量。

第三个方向是程序化纹理生成接入。当前项目大量使用手绘贴图，生产周期较长。后续想用工具自动生成符合风格参数模型的噪点纹理、冷暖阴影贴图和笔触边缘图，减少纯手绘资产比例，同时保留手绘感。

6.2 系统维护过程中的工具箱沉淀

做这套系统时最大的意外收获是沉淀了一套调试工具，包括一个运行时材质参数面板和一个场景光照预设切换器。这两个工具极大提升了调参效率，也成了团队工作流的一部分。美术再也不用反复确认某个数值来自哪个材质，直接在一个面板里批量调节所有风格参数，减掉的沟通成本远大于写工具的投入。

在此也给打算做类似系统的团队一个建议：不要只写渲染代码，尽快把参数暴露到调试UI上，越早越好。做NPR最大的敌人是“调乱了回不去”，一个参数备份和对比工具，重要性不亚于Shader本身。

我个人的体会是，一套风格化渲染系统的成败，七分在美术判断，三分在技术实现。技术负责把每一个参数变得可预测、可回溯、可调节，美术负责在这套约束里找到最漂亮的组合。真正让系统稳定好用的，不是某个炫技Pass，而是参数能收能放、问题能快速定位、风格能局部定制的那套框架和习惯。这些内容，只有动手做一次，才会真正明白。