风格化渲染系统实战：从PBR到卡通NPR的关键决策与实现

按下启动按钮那一刻，我倒不是怕它崩，而是怕镜头里的东西看起来还是那股“塑料味”。项目做了大半年，我们给角色和场景重新搭了一套风格化渲染系统，目标很直接：让画面有手绘质感，同时还能在普通移动设备上稳定跑起来。这套系统最终覆盖了角色、场景、特效三类对象的着色，统一了描边、色块光照、脸部阴影修正和后期风格化处理几条链路。如果你也在做卡通渲染、动漫感场景，或者手头有一套写实PBR流程想往风格化转，这篇文章值得往下看。

我先把话说明白：这不是一篇贴代码式的Shader教程，而是从一个完整渲染系统的角度，讲清楚风格化渲染有哪些关键决策点、每个决策背后的理由，以及我们在实际落地过程中踩过的坑。这中间有架构拆分、有具体Shader实现思路、有参数调试记录，也有DCC工具链的配合规范，尽量做到你拿着就能往自己项目里套。

1. 这个渲染系统到底在解决什么问题

1.1 写实渲染和风格化渲染的根本区别

写实渲染的目标是模拟物理世界里光的行为，PBR管线里的漫反射、镜面反射、环境光遮蔽、次表面散射，本质上都是在拟合“真实感”。但风格化渲染的目标完全不同，它追求的是“画出来的感觉”，是人对物体的视觉概括。所以NPR（Non-Photorealistic Rendering）不是做得不够好的PBR，而是另一种独立的视觉语言。

举个例子：同样一个金属茶壶，PBR要求高光形状符合真实光源、粗糙度参数对应真实的微表面分布；但风格化渲染可能只需要一个清晰的白色高光块，边缘带一点硬切，中间过渡直接砍掉。这不是“粗糙度调低了”能调出来的，而是整个光照模型都换了。

所以做风格化渲染系统第一件事，是别在PBR的参数空间里凑效果。你会发现怎么调都有一股“塑料感”，因为底层模型还在响应基于物理的反射方程，它天生就带着真实感信息。你要做的是改动光照计算本身，而不是给参数打补丁。

1.2 参考案例与需求拆解

我们当时手里拿到的参考图集中在三类：一是《蜘蛛侠：平行宇宙》那种漫画网点风格，强调半调网点和硬边描边；二是类似《原神》的角色渲染，面片层次干净，脸部和头发有明显的手绘阴影分界；三是《双城之战》那种带笔触感、色块边缘略有不规则抖动的风格。

这三类视觉语言差异很大，不能用一个Shader通吃。所以系统从一开始就按“可组合”来设计：描边强度、色块阈值、边缘软化、网点密度、脸部阴影修正全部做成可调参数，而不是写死在某一个效果里。这样同样一套渲染系统，换一套参数就能从干净赛璐璐风格切到带笔触的厚涂风格。

需求端还有一个硬约束：项目要上手机端，且目标帧率不低于60。这就意味着全屏后处理特效必须克制，描边不能依赖高成本的图像边缘检测，光照模型要尽量控制在几次运算之内。后面很多技术选型，都是在这个性能框架下做出的。

1.3 为什么不能直接拿现成卡通Shader对付

Asset Store里有很多卡通Shader，也做得挺好看，但你把它丢进一个真实项目时往往撞墙。首先是批量渲染的兼容性问题：一套角色可能有十几件装备，每件装备换不同颜色的高光区域，如果Shader没有设计好的顶点色或遮罩通道，你就得复制材质球，DrawCall直接翻倍。

其次是光照响应。很多现成卡通Shader只写了一个简单的半兰伯特加阈值，场景里一旦出现多光源、实时光影、雾效，角色身上的色块就会乱闪。更麻烦的是，这类Shader通常不考虑角色脸部的特殊修正，也不管模型布线是否规整，拿来做Demo可以，放进生产管线就是灾难。

所以我们决定自己搭一套。不是觉得现成的都不行，而是我们需要一个能跟着项目美术规范长期迭代的底座。这个底座允许TA在不同角色之间做差异，允许场景特效共享同一套描边逻辑，也允许美术后期在材质面板上一眼找到“阴影阈值”而不是去翻代码。

2. 系统架构：风格化渲染管线怎么拆

2.1 按Pass拆分：描边、光照、后处理

整套系统在渲染流程上分成三个大阶段：Base Pass负责主要着色，包括色块光照、Ramp采样、脸部和头发的特殊处理；描边Pass负责生成轮廓线和内部硬边；最后的后处理阶段负责网点、边缘光、颜色分级这类需要全屏像素操作的风格效果。

这个拆法的核心好处是互不干扰。描边如果有问题，你不用去动主着色器；后处理要砍掉换一种风格，也只要撤销一个Renderer Feature。每个Pass是独立的小单元，各自有输入输出约定，出错时能快速定位到具体环节。

有一点容易被忽略：描边Pass和Base Pass之间还存在一个深度关系。描边一般是在主物体旁边膨胀出一个背面渲染的壳，如果描边Pass写进深度缓冲，就会把本该透出的物体挡住。所以描边Pass通常在深度测试上做特殊处理，要么不写深度，要么深度偏移到最远，保证它永远贴在自己主体表面之下。

2.2 数据流和渲染顺序

渲染顺序上是先不透明物体、再透明物体、最后是特效。风格化系统里，角色、场景、特效的描边宽度和风格参数是不同的，所以每个Pass会通过一个全局的Renderer Feature统一注入参数，而不是每个Shader各自查参数，这样能保证同一帧里大家用的风格参数是一致的。

透明物体是个特殊类别，比如头发片、布料轻纱、半透明特效。透明物体不能简单按顺序排，因为它们之间还有遮挡关系。我们的做法是给透明物体单独开了一个队列，按与摄像机的距离排序，然后描边Pass对透明物体使用更保守的宽度衰减，避免从边缘漏出难看的粗线。

数据流上还有一层：法线。主着色器需要顶点法线，描边需要法线，后处理如果需要重建法线还得存法线缓冲。这层数据的来源和精度在整个系统里是统一约定好的，模型导出时必须平滑组正确，法线不能被压缩得过于粗糙，否则同一套参数在不同模型上表现会差异很大。

2.3 风格化参数从哪来：顶点色、贴图、材质球

一个很关键的设计决策是：风格化参数到底放在哪里。我们同时用了三种通道，每种有自己的用途。

顶点色主要用于控制描边宽度变化和局部的颜色微调，比如衣服上的缝线区域描边要细一点，角色脸部轮廓描边要柔一点，不需要额外贴图，直接用顶点色通道，省资源。

贴图通道用于Ramp曲线采样、脸部阴影SDF、头发高光Mask这些需要更多自由度的地方。比如脸部阴影修正通常用一张SDF贴图，存的是从眉心到脸颊的深度梯度，这样美术可以调整阴影分界线位置到想要的地方，而不是依赖模型法线算出来的结果。

材质球参数则是最直观的那一层，包括阴影阈值、软边范围、高光强度、描边粗细这类全局数值。三个渠道各有侧重：顶点色适合空间上连续变化，贴图适合表达复杂形状，材质参数适合跨角色快速调整。它们最终会在Shader里被乘到一起或者分别采样，组合出最终效果。

3. 核心效果逐个拆解与实现

3.1 描边：外描边与轮廓线的取舍

描边是风格化渲染辨识度最高的效果之一，也是最容易做砸的地方。我们最终采用的是外描边方案：在正常渲染之后，把模型沿着法线方向向外膨胀一点，然后渲染背面并剔除正面。因为只有背面片元会被画出来，膨胀后露出的外圈就是轮廓线。

Shader逻辑大致是这样：

// 顶点着色器：沿法线外扩并缩放 float3 expandedPos = vertexPos + vertexNormal * _OutlineWidth; float4 clipPos = TransformObjectToHClip(expandedPos);

这段代码看起来简单，实际操作里问题很多。首先是膨胀方向，如果模型有尖锐凹角或者法线方向不一致，外扩以后描边会出现断头和交叉。解决办法是预计算时把法线在模型空间里做一遍平滑，也就是把邻接面片的法线做面积加权和，只保留平滑后的方向用于描边。

其次是描边的深度表现。角色转身时，描边会从正面绕到背面，如果描边始终写进深度，正面轮廓线就会和背景物体互穿。我们加了深度淡出和距离衰减两个参数：离摄像机越近描边越细，离得远就稍微加粗一点保住轮廓存在感。这个数值不固定，需要按场景和镜头距离试几轮。

内部硬边（比如衣服的褶皱分割线、眼睛轮廓）用外描边做不出来，我们单独开了一个额外贴图通道，把需要硬边的区域标红，然后在这部分区域做一个基于视线方向的内描边。其实就是计算NdotV，够尖锐的夹角就压暗一点，形成一个类似线条的效果。

3.2 色块化光照：从半兰伯特到硬阈值

主着色的核心是把连续的光照过渡压成色块。我们用的光照模型本身还是半兰伯特，但输出的亮度值会经过一个阈值函数，把中间带切分成几个离散的层级。

// 半兰伯特光照基础 float halfLambert = dot(worldNormal, mainLightDir) * 0.5 + 0.5; // 用Ramp图采样得到卡通化亮度 float3 toonColor = tex2D(_ToonRamp, float2(halfLambert, 0.5)).rgb;

Ramp图即便是一张1D高度图，我们也按2D坐标采样，因为可以顺便在纵向维度存多套风格变体。正式项目里我把Ramp图做成了三行：第一行是干净赛璐璐三段式（暗、中、亮），第二行是带一点暖暗部过渡的厚涂感，第三行是高对比硬切版本。切换风格时只要改材质面板上的UV偏移量，不用换Shader。

真正容易出问题的是高光。写实模型的高光柔和，风格化模型的高光通常是一块带硬边的亮点。我们给高光单独设了阈值和边缘软化距离，数值小的会缩成一个小圆点，适合表现眼神高光；数值大了会变成一个扇形区域，适合金属物件上的冷光条。这个阈值对数值精度很敏感，甚至不同贴图压缩格式都会影响结果，调试时建议先把贴图压缩换成RGBA32，定位问题后再压回去。

3.3 脸部阴影与手绘贴图的配合

角色脸是风格化渲染里最微妙的部分，也是最容易“翻车”的地方。真实光照下，角色的鼻翼和下巴会产生复杂的投影，这在写实脸上自然，但赛璐璐风格的脸通常只有一块干净的下颌阴影。我们用SDF贴图做修正：把脸的阴影区域在贴图里预先画好，光照方向再决定这块阴影是出现还是消失。

实际操作上，SDF贴图存的是“从脸部中心向外围的最近距离”。当主光源从左侧照过来，我们取贴图右侧的梯度，用光照角度控制采样位置，阴影就会沿着脸颊平滑地偏移。这个方案不需要模型有特别密的布线，美术在Photoshop里画两笔就能看到效果，是非常适合风格化项目的实用解。

头发高光也是专门写的。普通PBR的高光会随着视角跨整个发梢闪耀，这不符合手绘头发的分层逻辑。我们给头发加了Mask贴图，高光只会出现在美术指定的纵向区域，再配合一个能随角度蠕动的阈值边，就能模拟出“一束光扫过发丝”的感觉。这里最怕的是Mask贴图画得太规整，高光边缘露出生硬的锯齿，解决方法是给阈值边加上大约0.03的噪声抖动。

3.4 后处理：边缘光、抖动与颜色分级

后处理阶段我们不铺开做太多，只保留了三个效果：边缘光、颜色分级和可选的半调网点。边缘光是为了给角色从背景里“抠”出来，用深度和法线差异检测轮廓，叠加一层暖色或者冷色的边缘光晕。这个效果的强度必须很克制，调得太高会让画面发灰发糊，我们最终定的是0.18左右的强度。

颜色分级是通过调整LUT（Lookup Table，颜色查找表）来统一画面氛围。美术在Photoshop里把一张基准帧调成他们想要的色调分离效果，再导出LUT图，运行时全屏替换颜色。这个过程在移动端开销极低，却能让不同角色、不同场景共享同一套色彩语言。

半调网点按需开启。网点边缘和带密度是两个关键参数，密度太密会变成灰蒙蒙的噪点，太稀又看不出漫画感。这个效果适合做特定剧情演出，平时默认关闭。如果你在PC上跑，还可以再加一点轻量模糊和高斯扰动模拟画布纹理，但移动端我建议直接在Shader里用简单的伪随机抖动替代，不然全屏模糊的开销承受不起。

4. 实操落地：从原型到可上线版本

4.1 环境搭建与渲染器配置

这套系统基于Unity URP实现，版本是Unity 2022.3 LTS配URP 14。管线配置里需要注册一个自定义Renderer Feature，用来向所有材质注入风格化参数。

public class StylizedRendererFeature : ScriptableRendererFeature { StylizedRenderPass pass; public override void Create() { pass = new StylizedRenderPass(); pass.renderPassEvent = RenderPassEvent.AfterRenderingOpaques; } public override void AddRenderPasses(ScriptableRenderer renderer, ref RenderingData renderingData) { renderer.EnqueuePass(pass); } }

Shader方面用的HLSL手写，没有用Shader Graph。Shader Graph在调颜色、接节点时确实快，但风格化系统里要处理多个Pass、不同层级参数，用代码维护更可控。这也是我给团队定的规矩：试验性效果用Shader Graph，上生产线的效果一律转成手写HLSL，方便做版本diff和参数批量流转。

渲染器配置里第二项是抗锯齿。风格化渲染特别怕看色块边缘那圈“狗牙”，我们最终在移动端用MSAA 4x，在PC端用TAA。MSAA对描边效果保值，TAA会把边缘轻微抖动掉，两者都不会破坏硬边色块的核心观感。这个选择在下面“常见问题”部分还会展开说。

4.2 关键Shader片段与调参记录

拿描边Width举例，我保留了我们在正式版里用的一组参数，方便你有个初始值可参考：

这组参数是反复调出来的。刚开始描边宽度全用同一个常量，近景时线条粗得像炭笔涂鸦，远景时又细到看不见。后来改成按距离线性插值，近景细、远景粗，才勉强稳住。有一个重要技巧：描边宽度不要直接用世界空间固定值，最好转到屏幕空间按像素宽度控制，不然在不同分辨率下表现完全不一致。

调色块阈值时我也有个体会：阈值不能设得过于整数。阈值刚好是0.5时，边缘会非常敏感，任何细小的光照扰动都会导致大面积闪动。我们最终把阴影阈值放在0.35附近，让暗部范围稍微大一点，过渡反而更稳定。这个“不完美”的数值就是一种经验积累。

4.3 性能预算与分级策略

风格化渲染的性能优化和PBR不太一样，它没有那么多高频采样，但容易在Pass数量上失控。我们的目标基准机是骁龙778G级别，一版全效果跑下来：Base Pass加描边Pass加后处理大约7个DrawCall每帧，可接受的范围内。

为了这个目标，我们做了三级性能分级。高画质档是全效果，包括边缘光、LUT颜色分级和半调网点；中档去掉半调网点，边缘光降一半；低档连边缘光都去掉，描边宽度也减半，只保留主着色和硬边描边。这个分级不是简单开关几个Shader Pass，而是通过Renderer Feature里控制Uniform参数来切换，所有分级设置都存在同一份配置表中。

最耗的部分其实不是着色，是描边Pass。描边把整个模型重新膨胀渲染一遍，等于角色切换了两套顶点变换。我们试过用模板缓冲法的单Pass描边，确实省半个DrawCall，但写法比较复杂，对SkinnedMeshRenderer容易出现三角面穿插。目前生产版本稳定用双Pass描边，通过合批减少总体开销。

4.4 DCC工具链：模型、法线与贴图规范

这套系统对美术资产是有要求的。风格化渲染里，模型布线的重要性比PBR还要高。尤其描边，它依赖法线方向，面朝一个方向的平整区域描边会非常细，转角处则会突然变粗。为了减少这种意外，我们在DCC里对法线做了预处理：把需要描边硬边的物体统一用加权法线烘焙，表面软硬边分界平滑过渡。

贴图规范上，Ramp图和SDF图都不能用过度压缩的格式。Ramp图如果被压缩到ASTC 6x6，色块边界可能偏移几个像素，在人物脸上就会出现“阴阳脸”。我们最后把Ramp图固定在RGBA32，尺寸只留256x128，内存开销并不大，但精度足够稳定。

脸部阴影SDF我们规定必须由美术手绘，不依赖算法生成。手绘的SDF在表达“美术想要的阴影形状”方面远比算法可靠。整个DCC规范一句话总结：模型要清楚哪些地方该硬、哪些地方该软，把风格决策前移到制作阶段，而不是最后靠Shader弥补。

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

5.1 描边断裂、抖动与深度穿帮

描边断裂是出现频率最高的。原因通常是模型法线没有被正确平滑，外扩方向在尖锐边上下跳跃。排查时先把模型导入Unity的调试模式里显示法线，如果看到相邻顶点法线方向相差很大，就回DCC里修正。

描边抖动比断裂更隐蔽。现象是角色原地不动，描边宽度一帧一帧轻微变化。这往往来自Screen-Space宽度计算时的浮点精度问题。我们最后把宽度计算放到顶点着色器里，并且在Project Settings里把“Graphics Settings”的FP16开关设为关闭，强制使用FP32，抖动才消失。如果你的项目里不能全局关FP16，那至少描边Shader要标一句#pragma prefer_hlslcc gles，避免编译器在低精度路径上偷懒。

深度穿帮则是描边和背景物体穿插。角色站在墙前，描边如果有深度写入，就会嵌进墙里看不见。我们的解法是开启描边Pass的深度偏移选项，把深度测试的模式改成LessEqual，同时加一段基于视角距离的淡出。这个淡出系数和我前面给的12.0一样，属于需要反复试的数值，建议先设大一点看效果，再逐步缩小。

5.2 色块边缘锯齿与闪烁

赛璐璐风格的硬边非常考验抗锯齿。如果不开MSAA，色块边缘会有阶梯状锯齿，开了MSAA又会和半透明物体产生排序问题。我们在移动端最终选择MSAA 4x配合硬边抖动：在色块阈值边缘加一个基于屏幕空间像素坐标的伪随机值，让锯齿变成微小的颗粒感，视觉上反而接近手绘纸纹。

闪烁通常来自Ramp图采样精度太低。Ramp图必须保证在过渡带附近有足够像素密度，不然移动时色块会出现爬动感。我的建议是Ramp图宽度不要小于128像素，尤其是暗部和亮部的过渡区要留足渐变宽度。如果你用程序化生成Ramp图，可以在过渡中心加一点可视化标线，方便对齐阈值。

另一个闪烁场景是多光源混光。风格化渲染如果同时开着主光和辅助光，两个光源各自生成的色块边界碰撞就会闪烁。我们的方案是强制除了主光之外的光源只提亮整体色阶，不参与生成新的阈值边缘。美术在面板里能调一个“附加光源柔化系数”，默认值是0.25，数值越大附加光源越接近PBR效果，数值越小越卡通。

5.3 多平台表现差异

PC上看起来干净利落的描边，拿到手机上可能粗了一倍。主要原因还是Screen-Space宽度的分辨率适配没做对。我们在PC上是用相对视口比例来计算宽度，但移动端的视口尺寸和DPI差异很大，直接沿用同一个系数就会出现偏差。

完善的方案是在管线启动时，根据当前屏幕分辨率重算一组描边宽度系数。简单一点的做法是：以1080p为基准，然后按当前屏幕高度/1080的比例缩放。这个方案在绝大多数情况下够用。

另一个多平台差异来自贴图压缩格式。PC用DXT纹理，移动端用ASTC或ETC2，压缩后色阶和描边Mask都可能产生偏差。测试时一定要在真机上检查Ramp图和脸部SDF，不能只在编辑器里调。我们团队内部定了一条规矩：任何风格化效果调整，必须在专用测试手机上截图对比，才算真正完成。

5.4 多个角色共用一套参数时的串色问题

角色A的皮肤暗部阈值调到0.4，角色B同样用这套材质，结果B的暗部面积明显不对。这个问题来自贴图明度差异而非Shader参数。角色B的皮肤贴图本身偏暗，半兰伯特结果就更容易低于阈值，于是暗部区域扩大。

两个解决方案。一是在贴图规范层面统一各角色贴图明度范围，但这是一件非常需要美术纪律的事，很难强制执行。二是在Shader里加一个“基础明度归一化”参数，把它乘到半兰伯特值之前，让每张贴图的亮度基准对齐到同一个参考值。我们目前团队里同时保留两个方案：主要角色走明度归一化，NPC和量产角色靠贴图规范约束。

这个问题提醒我一件事：风格化渲染系统做得越完善，它就越像一套内部的美术生产规范，而不仅仅是渲染代码。Shader、参数、规范、工具链是一体的，缺一块都会在项目后期某个角落冒出来找你要债。

6. 最后想说的

这套系统从搭骨架到跑通首版，再到调出能上线的画面效果，前后反复了快三个月。按我的体会，风格化渲染的真正难点不在某个单独的技术点，而在角色的整体一致性：描边、色块、脸部阴影、头发高光、后期颜色，每一个环节都影响最后的“手绘感”。哪个环节做的太过，整个画面就会从“卡通片”滑向“劣质3D手游”。

几个我最后想强调的经验：第一，参数体系一定要做成可分级、可复用的，别写死在Shader里；第二，所有风格化效果都要在真实目标设备上验证，尤其贴图压缩和抗锯齿这两项；第三，Ramp图和脸部SDF是决定角色颜值的核心资产，值得花时间反复打磨；第四，把美术规范和技术方案一起打包，让模型师和TA之间有一份共同语言，这才是渲染系统能持续迭代的基础。

如果你正准备搭自己的风格化渲染系统，我建议不要一开始就追求复杂效果，先把半兰伯特加Ramp加外描边这三件事做透，再逐步叠加脸部修正和后处理。基础稳了，后面一切都是锦上添花。