1. 风格化渲染系统的整体架构与设计取舍1.1 从PBR到NPR为什么我要做一套混合渲染管线做渲染的同行都清楚PBR基于物理的渲染在过去十年几乎统治了实时图形领域。金属度、粗糙度、能量守恒、IBL环境光照这套体系能把真实感推到相当高的水准。但问题也很明显当你想要一个卡通描边、水彩质感、或者赛博朋克风格的画面时纯PBR管线会跟你打架。你调半天材质参数出来的东西还是“太真实了”缺少那种风格化的味道。我最初做这个风格化渲染系统的动机很直接项目里需要一套能同时处理写实角色和风格化场景的管线。角色用PBR保证皮肤和布料的质感场景和特效走NPR路线两者还要在同一个画面里和谐共存。这就逼着我不能简单地二选一而是要做一套混合架构。核心思路是这样的光照计算层保留PBR的物理基础但在着色输出阶段插入风格化控制节点。具体来说漫反射和高光依然按PBR的方式算但在最终颜色合成时通过LUT颜色查找表和自定义的色调映射曲线把物理光照结果“翻译”成风格化的色彩。这样做的好处是光照逻辑不用重写风格化程度可以通过参数动态调节从写实到卡通可以连续过渡。另一个关键决策是双面材质shader的处理。风格化渲染里经常遇到纸片树、布料、旗帜这类需要双面显示的对象。传统的做法是复制一份面片翻转法线但这样会导致光照计算翻倍而且边缘接缝处容易出现光照突变。我的方案是在单个shader里通过VFACE语义判断当前渲染的是正面还是背面然后动态翻转法线方向同时保持光照模型的一致性。这个细节后面会展开讲。1.2 系统模块划分与数据流向整套系统我拆成了四个核心模块数据流向是单向的避免循环依赖材质定义层负责声明这个材质是PBR、NPR还是混合模式以及各自的参数范围。这里我用了一个MaterialProfile结构体里面包含renderMode枚举、stylizeIntensity浮点数0到1、lutIndex整数等字段。光照计算层统一的PBR光照求解器输出线性的HDR颜色。注意这里输出的还是物理正确的值不做任何风格化处理。风格化处理层这是系统的核心。接收HDR颜色后依次经过色调映射、LUT采样、边缘光增强、描边检测等步骤。每个步骤都可以独立开关和调参。后处理合成层把风格化后的颜色与场景其他元素如UI、粒子合成最后输出到屏幕。数据流向是材质参数 → 光照计算 → HDR颜色 → 风格化处理 → LDR颜色 → 后处理合成 → 最终画面。这个链路里风格化处理层是唯一可以“破坏”物理正确性的地方其他层都保持严谨。注意风格化处理层一定要放在色调映射之后。我试过在HDR空间直接做LUT结果高光区域的颜色完全失控因为LUT通常是针对LDR设计的。正确的顺序是HDR → 色调映射到LDR → LUT → 其他风格化效果。1.3 为什么选择LUT作为色彩风格化的核心工具LUT这东西做影视调色的朋友再熟悉不过了。Blackmagic Cam的LUT滤镜包、SLog3还原LUT这些都是调色师天天打交道的工具。但在实时渲染里LUT的用法和影视后期不太一样。影视LUT通常是3D LUT文件格式是.cube尺寸从16x16x16到64x64x64不等。实时渲染里我选择用32x32x32的3D LUT理由有三第一32的立方是32768个采样点对于大多数风格化需求已经足够细腻第二纹理内存占用可控一张32x32x32的RGB8纹理才96KB第三采样时的插值误差在可接受范围内配合三线性过滤基本看不出色带。LUT的生成方式有两种一种是用调色软件比如DaVinci Resolve导出.cube文件然后写个工具转成纹理另一种是在引擎里用代码直接生成。我两种都实现了前者用于美术同学调好的风格后者用于程序化生成的动态风格比如根据时间变化的昼夜色调。这里有个坑要提醒LUT的输入必须是归一化的LDR颜色。如果你直接把HDR值塞进去采样超过1的部分会被截断导致高光区域颜色死白。我的做法是在色调映射阶段用ACES曲线把HDR压到0-1范围然后再送进LUT。2. 核心细节解析与实操要点2.1 双面材质shader的法线处理与光照一致性双面材质在风格化渲染里出现的频率极高。纸片树、飘动的旗帜、角色的披风这些都需要双面显示。但双面渲染有个经典问题背面面的法线是反的如果直接按正面法线算光照背面就会黑成一团。常规解决方案是复制几何体把背面面片翻转法线。但这样做有几个弊端一是draw call翻倍二是接缝处的光照不连续三是对于动态物体比如飘动的布料两份几何体的动画同步很麻烦。我的方案是在单个shader里用SV_IsFrontFace语义HLSL或gl_FrontFacingGLSL来判断当前片元属于正面还是背面。如果是背面就把法线取反。代码大概长这样float3 normal normalize(input.normal); if (!input.isFrontFace) { normal -normal; }但这里有个细节法线取反后光照计算里的视线方向也要相应调整。因为视线方向是从摄像机指向片元背面片元的视线方向相对于其翻转后的法线几何关系变了。我的处理是在计算高光时如果当前是背面把视线方向也取反这样高光的位置才能正确。另一个细节是阴影投射。双面材质的阴影如果按单面处理背面会漏光。我用了ShadowCasterpass里强制渲染双面并且在阴影深度计算时取离光源最近的那个面的深度。这样阴影边缘会稍微厚一点但不会漏光。实操心得双面材质的法线翻转一定要在世界空间做不要在切线空间做。切线空间翻转法线会导致法线贴图的解读出错特别是当法线贴图里有明显的方向性细节时背面会看起来完全不对。2.2 LUT的采样精度与性能优化LUT采样看起来简单不就是用颜色当UV去查纹理吗但实际做起来精度和性能的平衡很微妙。先说精度。32x32x32的3D LUT如果直接用tex3D采样硬件三线性过滤会帮你插值。但问题是很多移动端GPU对3D纹理的支持有限或者3D纹理的采样开销比2D纹理大。我的做法是把3D LUT“展开”成2D纹理用一张1024x32的2D纹理存32层切片然后在shader里手动做两层切片之间的插值。具体来说假设输入颜色是float3 color先算出它在LUT里的连续坐标float3 lutCoord color * (LUT_SIZE - 1) / LUT_SIZE 0.5 / LUT_SIZE; float slice lutCoord.z * (LUT_SIZE - 1); float slice0 floor(slice); float slice1 min(slice0 1, LUT_SIZE - 1); float frac slice - slice0;然后分别采样slice0和slice1对应的2D纹理区域再做线性插值。这样虽然多了几次采样但兼容性更好而且可以通过调整LUT_SIZE来平衡质量和性能。性能方面LUT采样本身开销不大但如果每个像素都做累积起来也可观。我的优化是只在风格化强度大于0的材质上启用LUT采样并且把LUT采样放在一个单独的pass里用Stencil标记需要风格化的区域。这样写实材质的像素完全跳过这个pass省下不少带宽。还有一个技巧LUT纹理的过滤模式设为Bilinear不要用Trilinear。因为我们已经手动做了切片间的插值再用Trilinear就是双重插值既浪费性能又可能导致过度模糊。2.3 描边效果的多种实现方案对比风格化渲染离不开描边。我试过至少四种描边方案各有优劣最后根据场景需求做了混合使用。第一种是法线外扩描边。在顶点着色器里把顶点沿法线方向外扩一定距离渲染背面得到一圈轮廓。优点是实现简单性能好缺点是对于硬边模型比如立方体外扩后边缘会裂开而且描边宽度受模型曲率影响不均匀。第二种是后处理边缘检测。用Sobel算子对深度和法线纹理做卷积检测边缘。优点是描边宽度均匀不受模型拓扑影响缺点是无法区分“想要描边的边缘”和“不想要的边缘”比如纹理细节造成的深度突变容易产生噪点。第三种是几何着色器描边。在几何着色器里把每个三角形沿法线外扩生成描边几何体。优点是描边质量高可以控制每条边的描边宽度缺点是几何着色器性能开销大移动端基本不可用。第四种是屏幕空间描边。在屏幕空间对每个像素做多次采样判断是否在边缘附近。优点是灵活可以做出手绘风格的抖动描边缺点是性能随采样数线性增长。我最终的方案是法线外扩 后处理边缘检测的混合。对于主要角色和近景物体用法线外扩保证描边清晰对于远景和复杂场景用后处理边缘检测配合深度阈值过滤掉不想要的边缘。两者的描边颜色和宽度可以在材质里分别控制。常见问题法线外扩描边在硬边模型上会出现裂缝。解决办法是在建模阶段就把硬边的顶点法线平均化或者在shader里用顶点位置计算一个“平滑法线”来做外扩。我试过后者效果不错但计算量稍大。3. 实操过程与核心环节实现3.1 环境准备与基础管线搭建先说一下我的开发环境引擎用的是Unity 2022 LTS渲染管线是URP通用渲染管线。选URP而不是HDRP主要是因为项目要兼顾移动端HDRP太重了。URP虽然功能少一些但通过自定义RenderFeature完全可以实现我需要的风格化效果。第一步是搭建基础管线。在URP里我创建了一个StylizedRenderFeature挂到Universal Renderer上。这个Feature负责在AfterRenderingOpaques阶段插入风格化处理pass。为什么选这个阶段因为不透明物体已经渲染完了深度和法线纹理都可用正好做边缘检测和LUT。第二步是准备LUT纹理。我用DaVinci Resolve生成了一个32x32x32的.cube文件然后用Python脚本把它转成Unity能识别的2D纹理。脚本核心逻辑是读取.cube文件里的RGB值按蓝通道切片拼成一张1024x32的PNG。这里要注意.cube文件的格式第一行是TITLE第二行是LUT_3D_SIZE后面才是数据。解析的时候别搞错行。# 简化的cube转png逻辑 def cube_to_png(cube_path, png_path): with open(cube_path, r) as f: lines f.readlines() size int([l for l in lines if LUT_3D_SIZE in l][0].split()[-1]) data [] for line in lines: if line[0].isdigit() or line[0] -: data.append([float(x) for x in line.split()]) # 按蓝通道切片拼成2D图像 img Image.new(RGB, (size*size, size)) for b in range(size): for g in range(size): for r in range(size): idx b*size*size g*size r color tuple(int(c*255) for c in data[idx]) img.putpixel((b*size r, g), color) img.save(png_path)第三步是写shader。我基于URP的Lit.shader改了一个StylizedLit.shader保留了PBR的光照计算但在片元着色器的最后插入了风格化处理。具体来说在UniversalFragmentPBR之后加了一段half3 stylizedColor ApplyStylization(color.rgb, input.uv, stylizeParams);ApplyStylization函数里依次做色调映射、LUT采样、边缘光增强。边缘光增强的公式很简单half rim 1.0 - saturate(dot(normal, viewDir)); rim pow(rim, rimPower) * rimIntensity; color rim * rimColor;但要注意边缘光要在LUT之前加否则LUT会把边缘光的颜色也映射一遍效果不可控。3.2 风格化参数的动态调节与预设系统风格化渲染最怕的就是“调参地狱”。美术同学想要一个“稍微卡通一点”的效果你给他一堆参数他根本不知道从哪下手。所以我做了一套预设系统把常用的风格化配置存成ScriptableObject美术同学直接选预设就行。预设里包含这些参数参数名类型说明典型值stylizeIntensityfloat风格化总强度0.0 - 1.0lutIndexintLUT索引0 - 15rimPowerfloat边缘光衰减指数2.0 - 8.0rimIntensityfloat边缘光强度0.0 - 2.0outlineWidthfloat描边宽度像素0.5 - 3.0outlineColorcolor描边颜色黑色/深棕色shadowThresholdfloat阴影阈值卡通阴影用0.3 - 0.7shadowSmoothnessfloat阴影过渡平滑度0.01 - 0.2这套参数里stylizeIntensity是总控。它的实现方式是在风格化处理的每个步骤里用lerp在原始颜色和风格化颜色之间插值。比如LUT采样后half3 lutColor SampleLUT(color); color lerp(color, lutColor, stylizeIntensity);这样美术同学只需要调一个滑块就能从写实平滑过渡到风格化。实测下来这个设计大大降低了沟通成本。实操心得stylizeIntensity不要设成0或1的极端值。0就是纯PBR1就是纯风格化但中间值往往最好看。我一般建议美术同学从0.6开始调这个值下PBR的质感还在但风格化的味道已经出来了。3.3 性能分析与优化实录风格化渲染的性能开销主要来自三块LUT采样、边缘检测、描边。我在一台中端安卓机骁龙778G上做了实测数据如下效果关闭时帧率开启时帧率开销LUT采样60 FPS58 FPS约3%后处理边缘检测60 FPS52 FPS约13%法线外扩描边60 FPS55 FPS约8%全部开启60 FPS45 FPS约25%边缘检测开销最大因为它需要对全屏做多次纹理采样。我的优化措施是把边缘检测的分辨率降到一半。具体做法是先把深度和法线渲染到一张半分辨率的RT上然后在这张RT上做Sobel卷积最后把边缘结果上采样回全分辨率。这样采样次数减少到四分之一画质损失在可接受范围内。另一个优化是动态开关。在移动端我根据设备性能等级动态调整高端机全开中端机关掉后处理边缘检测低端机只保留LUT和简单的法线外扩。这个逻辑写在一个QualityManager里根据SystemInfo.processorType和graphicsMemorySize自动判断。还有一个细节LUT纹理的压缩格式。我试过ASTC 4x4和RGBA32前者内存占用小但有色带后者画质好但内存大。最后选了ASTC 6x6在画质和内存之间取了个平衡。对于LUT这种颜色查找表色带是致命的所以压缩率不能太高。4. 常见问题与排查技巧实录4.1 LUT采样后颜色发灰或过饱和这是最常见的问题。原因通常有三个一是LUT的输入颜色没有归一化二是LUT纹理的sRGB设置不对三是色调映射曲线和LUT不匹配。排查步骤首先检查色调映射后的颜色是否在0-1范围内。可以在shader里加一句color saturate(color)临时验证。如果加了就正常说明是HDR值溢出。其次检查LUT纹理的导入设置sRGB (Color Texture)要勾选Filter Mode设为BilinearWrap Mode设为Clamp。最后检查色调映射曲线ACES和Reinhard出来的颜色分布不同LUT要针对性地生成。我踩过的一个坑是LUT纹理的Alpha Source设成了From Input但LUT的alpha通道是没用的结果采样时alpha值干扰了RGB。改成None就好了。4.2 双面材质背面光照突变背面光照突变通常是因为法线翻转后光照计算里的某些中间变量没有同步翻转。除了前面说的视线方向还有切线方向。如果材质用了法线贴图背面的切线空间坐标系是镜像的法线贴图的解读会出错。解决办法是在背面时把切线方向的副切线bitangent取反。具体来说如果正面是bitangent cross(normal, tangent) * tangentSign背面就改成bitangent cross(-normal, tangent) * tangentSign。这样法线贴图在背面也能正确解读。还有一个更隐蔽的问题阴影接收。双面材质的背面在接收阴影时如果阴影贴图是按单面渲染的背面会收到错误的阴影。我的做法是在ShadowCasterpass里强制Cull Off并且用SV_IsFrontFace判断只让正面写入阴影深度。这样背面就不会产生错误的阴影。4.3 描边在特定角度消失或闪烁法线外扩描边在视线与法线接近垂直时外扩方向在屏幕空间投影很短描边会变细甚至消失。这是法线外扩的固有缺陷。我的缓解措施是在顶点着色器里把外扩方向从纯法线方向改成法线和视线方向的混合。具体公式float3 expandDir normalize(normal viewDir * 0.5);这样在视线垂直法线时外扩方向会偏向视线方向屏幕空间投影更长描边不会消失。但代价是描边宽度会随视角变化需要美术同学接受这个特性。后处理边缘检测的闪烁通常是因为深度阈值太敏感。深度变化剧烈的区域比如地面和远处物体的交界会被误判为边缘。解决办法是引入法线相似度作为第二判据只有当深度差超过阈值且法线夹角超过阈值时才认为是边缘。这样地面上的纹理细节就不会被误判。4.4 常见问题速查表问题现象可能原因排查方法解决方案LUT后颜色发灰输入未归一化加saturate验证检查色调映射输出范围LUT后颜色过饱和LUT纹理sRGB设置错误检查导入设置勾选sRGBFilter设为Bilinear背面全黑法线未翻转可视化法线用SV_IsFrontFace翻转法线背面高光位置错误视线方向未同步翻转对比正反面高光背面时视线方向取反描边闪烁深度阈值太敏感调大阈值测试引入法线相似度判据描边宽度不均匀模型曲率影响检查硬边模型平滑顶点法线或混合视线方向性能骤降边缘检测全分辨率用Profiler查看降半分辨率动态开关LUT色带明显纹理压缩过度换压缩格式测试用ASTC 6x6或RGBA32最后分享一个小技巧在开发阶段我习惯在shader里加一个DEBUG_MODE宏可以单独输出法线、深度、LUT采样结果、边缘检测结果等中间纹理。这样排查问题时不用猜直接看中间结果效率高很多。这个宏在发布版本里会自动关掉不影响性能。这套风格化渲染系统我前前后后迭代了三个版本从最初的纯NPR到后来的PBRNPR混合再到现在的LUT驱动动态风格化。最大的体会是风格化不是把PBR扔掉而是在PBR的基础上做“翻译”。物理光照给你一个可靠的底子LUT和风格化处理层负责把这个底子翻译成你想要的视觉语言。两者配合好了既能保证画面稳定又能做出独特的风格。
1. 风格化渲染系统的整体架构与设计取舍1.1 从PBR到NPR为什么我要做一套混合渲染管线做渲染的同行都清楚PBR基于物理的渲染在过去十年几乎统治了实时图形领域。金属度、粗糙度、能量守恒、IBL环境光照这套体系能把真实感推到相当高的水准。但问题也很明显当你想要一个卡通描边、水彩质感、或者赛博朋克风格的画面时纯PBR管线会跟你打架。你调半天材质参数出来的东西还是“太真实了”缺少那种风格化的味道。我最初做这个风格化渲染系统的动机很直接项目里需要一套能同时处理写实角色和风格化场景的管线。角色用PBR保证皮肤和布料的质感场景和特效走NPR路线两者还要在同一个画面里和谐共存。这就逼着我不能简单地二选一而是要做一套混合架构。核心思路是这样的光照计算层保留PBR的物理基础但在着色输出阶段插入风格化控制节点。具体来说漫反射和高光依然按PBR的方式算但在最终颜色合成时通过LUT颜色查找表和自定义的色调映射曲线把物理光照结果“翻译”成风格化的色彩。这样做的好处是光照逻辑不用重写风格化程度可以通过参数动态调节从写实到卡通可以连续过渡。另一个关键决策是双面材质shader的处理。风格化渲染里经常遇到纸片树、布料、旗帜这类需要双面显示的对象。传统的做法是复制一份面片翻转法线但这样会导致光照计算翻倍而且边缘接缝处容易出现光照突变。我的方案是在单个shader里通过VFACE语义判断当前渲染的是正面还是背面然后动态翻转法线方向同时保持光照模型的一致性。这个细节后面会展开讲。1.2 系统模块划分与数据流向整套系统我拆成了四个核心模块数据流向是单向的避免循环依赖材质定义层负责声明这个材质是PBR、NPR还是混合模式以及各自的参数范围。这里我用了一个MaterialProfile结构体里面包含renderMode枚举、stylizeIntensity浮点数0到1、lutIndex整数等字段。光照计算层统一的PBR光照求解器输出线性的HDR颜色。注意这里输出的还是物理正确的值不做任何风格化处理。风格化处理层这是系统的核心。接收HDR颜色后依次经过色调映射、LUT采样、边缘光增强、描边检测等步骤。每个步骤都可以独立开关和调参。后处理合成层把风格化后的颜色与场景其他元素如UI、粒子合成最后输出到屏幕。数据流向是材质参数 → 光照计算 → HDR颜色 → 风格化处理 → LDR颜色 → 后处理合成 → 最终画面。这个链路里风格化处理层是唯一可以“破坏”物理正确性的地方其他层都保持严谨。注意风格化处理层一定要放在色调映射之后。我试过在HDR空间直接做LUT结果高光区域的颜色完全失控因为LUT通常是针对LDR设计的。正确的顺序是HDR → 色调映射到LDR → LUT → 其他风格化效果。1.3 为什么选择LUT作为色彩风格化的核心工具LUT这东西做影视调色的朋友再熟悉不过了。Blackmagic Cam的LUT滤镜包、SLog3还原LUT这些都是调色师天天打交道的工具。但在实时渲染里LUT的用法和影视后期不太一样。影视LUT通常是3D LUT文件格式是.cube尺寸从16x16x16到64x64x64不等。实时渲染里我选择用32x32x32的3D LUT理由有三第一32的立方是32768个采样点对于大多数风格化需求已经足够细腻第二纹理内存占用可控一张32x32x32的RGB8纹理才96KB第三采样时的插值误差在可接受范围内配合三线性过滤基本看不出色带。LUT的生成方式有两种一种是用调色软件比如DaVinci Resolve导出.cube文件然后写个工具转成纹理另一种是在引擎里用代码直接生成。我两种都实现了前者用于美术同学调好的风格后者用于程序化生成的动态风格比如根据时间变化的昼夜色调。这里有个坑要提醒LUT的输入必须是归一化的LDR颜色。如果你直接把HDR值塞进去采样超过1的部分会被截断导致高光区域颜色死白。我的做法是在色调映射阶段用ACES曲线把HDR压到0-1范围然后再送进LUT。2. 核心细节解析与实操要点2.1 双面材质shader的法线处理与光照一致性双面材质在风格化渲染里出现的频率极高。纸片树、飘动的旗帜、角色的披风这些都需要双面显示。但双面渲染有个经典问题背面面的法线是反的如果直接按正面法线算光照背面就会黑成一团。常规解决方案是复制几何体把背面面片翻转法线。但这样做有几个弊端一是draw call翻倍二是接缝处的光照不连续三是对于动态物体比如飘动的布料两份几何体的动画同步很麻烦。我的方案是在单个shader里用SV_IsFrontFace语义HLSL或gl_FrontFacingGLSL来判断当前片元属于正面还是背面。如果是背面就把法线取反。代码大概长这样float3 normal normalize(input.normal); if (!input.isFrontFace) { normal -normal; }但这里有个细节法线取反后光照计算里的视线方向也要相应调整。因为视线方向是从摄像机指向片元背面片元的视线方向相对于其翻转后的法线几何关系变了。我的处理是在计算高光时如果当前是背面把视线方向也取反这样高光的位置才能正确。另一个细节是阴影投射。双面材质的阴影如果按单面处理背面会漏光。我用了ShadowCasterpass里强制渲染双面并且在阴影深度计算时取离光源最近的那个面的深度。这样阴影边缘会稍微厚一点但不会漏光。实操心得双面材质的法线翻转一定要在世界空间做不要在切线空间做。切线空间翻转法线会导致法线贴图的解读出错特别是当法线贴图里有明显的方向性细节时背面会看起来完全不对。2.2 LUT的采样精度与性能优化LUT采样看起来简单不就是用颜色当UV去查纹理吗但实际做起来精度和性能的平衡很微妙。先说精度。32x32x32的3D LUT如果直接用tex3D采样硬件三线性过滤会帮你插值。但问题是很多移动端GPU对3D纹理的支持有限或者3D纹理的采样开销比2D纹理大。我的做法是把3D LUT“展开”成2D纹理用一张1024x32的2D纹理存32层切片然后在shader里手动做两层切片之间的插值。具体来说假设输入颜色是float3 color先算出它在LUT里的连续坐标float3 lutCoord color * (LUT_SIZE - 1) / LUT_SIZE 0.5 / LUT_SIZE; float slice lutCoord.z * (LUT_SIZE - 1); float slice0 floor(slice); float slice1 min(slice0 1, LUT_SIZE - 1); float frac slice - slice0;然后分别采样slice0和slice1对应的2D纹理区域再做线性插值。这样虽然多了几次采样但兼容性更好而且可以通过调整LUT_SIZE来平衡质量和性能。性能方面LUT采样本身开销不大但如果每个像素都做累积起来也可观。我的优化是只在风格化强度大于0的材质上启用LUT采样并且把LUT采样放在一个单独的pass里用Stencil标记需要风格化的区域。这样写实材质的像素完全跳过这个pass省下不少带宽。还有一个技巧LUT纹理的过滤模式设为Bilinear不要用Trilinear。因为我们已经手动做了切片间的插值再用Trilinear就是双重插值既浪费性能又可能导致过度模糊。2.3 描边效果的多种实现方案对比风格化渲染离不开描边。我试过至少四种描边方案各有优劣最后根据场景需求做了混合使用。第一种是法线外扩描边。在顶点着色器里把顶点沿法线方向外扩一定距离渲染背面得到一圈轮廓。优点是实现简单性能好缺点是对于硬边模型比如立方体外扩后边缘会裂开而且描边宽度受模型曲率影响不均匀。第二种是后处理边缘检测。用Sobel算子对深度和法线纹理做卷积检测边缘。优点是描边宽度均匀不受模型拓扑影响缺点是无法区分“想要描边的边缘”和“不想要的边缘”比如纹理细节造成的深度突变容易产生噪点。第三种是几何着色器描边。在几何着色器里把每个三角形沿法线外扩生成描边几何体。优点是描边质量高可以控制每条边的描边宽度缺点是几何着色器性能开销大移动端基本不可用。第四种是屏幕空间描边。在屏幕空间对每个像素做多次采样判断是否在边缘附近。优点是灵活可以做出手绘风格的抖动描边缺点是性能随采样数线性增长。我最终的方案是法线外扩 后处理边缘检测的混合。对于主要角色和近景物体用法线外扩保证描边清晰对于远景和复杂场景用后处理边缘检测配合深度阈值过滤掉不想要的边缘。两者的描边颜色和宽度可以在材质里分别控制。常见问题法线外扩描边在硬边模型上会出现裂缝。解决办法是在建模阶段就把硬边的顶点法线平均化或者在shader里用顶点位置计算一个“平滑法线”来做外扩。我试过后者效果不错但计算量稍大。3. 实操过程与核心环节实现3.1 环境准备与基础管线搭建先说一下我的开发环境引擎用的是Unity 2022 LTS渲染管线是URP通用渲染管线。选URP而不是HDRP主要是因为项目要兼顾移动端HDRP太重了。URP虽然功能少一些但通过自定义RenderFeature完全可以实现我需要的风格化效果。第一步是搭建基础管线。在URP里我创建了一个StylizedRenderFeature挂到Universal Renderer上。这个Feature负责在AfterRenderingOpaques阶段插入风格化处理pass。为什么选这个阶段因为不透明物体已经渲染完了深度和法线纹理都可用正好做边缘检测和LUT。第二步是准备LUT纹理。我用DaVinci Resolve生成了一个32x32x32的.cube文件然后用Python脚本把它转成Unity能识别的2D纹理。脚本核心逻辑是读取.cube文件里的RGB值按蓝通道切片拼成一张1024x32的PNG。这里要注意.cube文件的格式第一行是TITLE第二行是LUT_3D_SIZE后面才是数据。解析的时候别搞错行。# 简化的cube转png逻辑 def cube_to_png(cube_path, png_path): with open(cube_path, r) as f: lines f.readlines() size int([l for l in lines if LUT_3D_SIZE in l][0].split()[-1]) data [] for line in lines: if line[0].isdigit() or line[0] -: data.append([float(x) for x in line.split()]) # 按蓝通道切片拼成2D图像 img Image.new(RGB, (size*size, size)) for b in range(size): for g in range(size): for r in range(size): idx b*size*size g*size r color tuple(int(c*255) for c in data[idx]) img.putpixel((b*size r, g), color) img.save(png_path)第三步是写shader。我基于URP的Lit.shader改了一个StylizedLit.shader保留了PBR的光照计算但在片元着色器的最后插入了风格化处理。具体来说在UniversalFragmentPBR之后加了一段half3 stylizedColor ApplyStylization(color.rgb, input.uv, stylizeParams);ApplyStylization函数里依次做色调映射、LUT采样、边缘光增强。边缘光增强的公式很简单half rim 1.0 - saturate(dot(normal, viewDir)); rim pow(rim, rimPower) * rimIntensity; color rim * rimColor;但要注意边缘光要在LUT之前加否则LUT会把边缘光的颜色也映射一遍效果不可控。3.2 风格化参数的动态调节与预设系统风格化渲染最怕的就是“调参地狱”。美术同学想要一个“稍微卡通一点”的效果你给他一堆参数他根本不知道从哪下手。所以我做了一套预设系统把常用的风格化配置存成ScriptableObject美术同学直接选预设就行。预设里包含这些参数参数名类型说明典型值stylizeIntensityfloat风格化总强度0.0 - 1.0lutIndexintLUT索引0 - 15rimPowerfloat边缘光衰减指数2.0 - 8.0rimIntensityfloat边缘光强度0.0 - 2.0outlineWidthfloat描边宽度像素0.5 - 3.0outlineColorcolor描边颜色黑色/深棕色shadowThresholdfloat阴影阈值卡通阴影用0.3 - 0.7shadowSmoothnessfloat阴影过渡平滑度0.01 - 0.2这套参数里stylizeIntensity是总控。它的实现方式是在风格化处理的每个步骤里用lerp在原始颜色和风格化颜色之间插值。比如LUT采样后half3 lutColor SampleLUT(color); color lerp(color, lutColor, stylizeIntensity);这样美术同学只需要调一个滑块就能从写实平滑过渡到风格化。实测下来这个设计大大降低了沟通成本。实操心得stylizeIntensity不要设成0或1的极端值。0就是纯PBR1就是纯风格化但中间值往往最好看。我一般建议美术同学从0.6开始调这个值下PBR的质感还在但风格化的味道已经出来了。3.3 性能分析与优化实录风格化渲染的性能开销主要来自三块LUT采样、边缘检测、描边。我在一台中端安卓机骁龙778G上做了实测数据如下效果关闭时帧率开启时帧率开销LUT采样60 FPS58 FPS约3%后处理边缘检测60 FPS52 FPS约13%法线外扩描边60 FPS55 FPS约8%全部开启60 FPS45 FPS约25%边缘检测开销最大因为它需要对全屏做多次纹理采样。我的优化措施是把边缘检测的分辨率降到一半。具体做法是先把深度和法线渲染到一张半分辨率的RT上然后在这张RT上做Sobel卷积最后把边缘结果上采样回全分辨率。这样采样次数减少到四分之一画质损失在可接受范围内。另一个优化是动态开关。在移动端我根据设备性能等级动态调整高端机全开中端机关掉后处理边缘检测低端机只保留LUT和简单的法线外扩。这个逻辑写在一个QualityManager里根据SystemInfo.processorType和graphicsMemorySize自动判断。还有一个细节LUT纹理的压缩格式。我试过ASTC 4x4和RGBA32前者内存占用小但有色带后者画质好但内存大。最后选了ASTC 6x6在画质和内存之间取了个平衡。对于LUT这种颜色查找表色带是致命的所以压缩率不能太高。4. 常见问题与排查技巧实录4.1 LUT采样后颜色发灰或过饱和这是最常见的问题。原因通常有三个一是LUT的输入颜色没有归一化二是LUT纹理的sRGB设置不对三是色调映射曲线和LUT不匹配。排查步骤首先检查色调映射后的颜色是否在0-1范围内。可以在shader里加一句color saturate(color)临时验证。如果加了就正常说明是HDR值溢出。其次检查LUT纹理的导入设置sRGB (Color Texture)要勾选Filter Mode设为BilinearWrap Mode设为Clamp。最后检查色调映射曲线ACES和Reinhard出来的颜色分布不同LUT要针对性地生成。我踩过的一个坑是LUT纹理的Alpha Source设成了From Input但LUT的alpha通道是没用的结果采样时alpha值干扰了RGB。改成None就好了。4.2 双面材质背面光照突变背面光照突变通常是因为法线翻转后光照计算里的某些中间变量没有同步翻转。除了前面说的视线方向还有切线方向。如果材质用了法线贴图背面的切线空间坐标系是镜像的法线贴图的解读会出错。解决办法是在背面时把切线方向的副切线bitangent取反。具体来说如果正面是bitangent cross(normal, tangent) * tangentSign背面就改成bitangent cross(-normal, tangent) * tangentSign。这样法线贴图在背面也能正确解读。还有一个更隐蔽的问题阴影接收。双面材质的背面在接收阴影时如果阴影贴图是按单面渲染的背面会收到错误的阴影。我的做法是在ShadowCasterpass里强制Cull Off并且用SV_IsFrontFace判断只让正面写入阴影深度。这样背面就不会产生错误的阴影。4.3 描边在特定角度消失或闪烁法线外扩描边在视线与法线接近垂直时外扩方向在屏幕空间投影很短描边会变细甚至消失。这是法线外扩的固有缺陷。我的缓解措施是在顶点着色器里把外扩方向从纯法线方向改成法线和视线方向的混合。具体公式float3 expandDir normalize(normal viewDir * 0.5);这样在视线垂直法线时外扩方向会偏向视线方向屏幕空间投影更长描边不会消失。但代价是描边宽度会随视角变化需要美术同学接受这个特性。后处理边缘检测的闪烁通常是因为深度阈值太敏感。深度变化剧烈的区域比如地面和远处物体的交界会被误判为边缘。解决办法是引入法线相似度作为第二判据只有当深度差超过阈值且法线夹角超过阈值时才认为是边缘。这样地面上的纹理细节就不会被误判。4.4 常见问题速查表问题现象可能原因排查方法解决方案LUT后颜色发灰输入未归一化加saturate验证检查色调映射输出范围LUT后颜色过饱和LUT纹理sRGB设置错误检查导入设置勾选sRGBFilter设为Bilinear背面全黑法线未翻转可视化法线用SV_IsFrontFace翻转法线背面高光位置错误视线方向未同步翻转对比正反面高光背面时视线方向取反描边闪烁深度阈值太敏感调大阈值测试引入法线相似度判据描边宽度不均匀模型曲率影响检查硬边模型平滑顶点法线或混合视线方向性能骤降边缘检测全分辨率用Profiler查看降半分辨率动态开关LUT色带明显纹理压缩过度换压缩格式测试用ASTC 6x6或RGBA32最后分享一个小技巧在开发阶段我习惯在shader里加一个DEBUG_MODE宏可以单独输出法线、深度、LUT采样结果、边缘检测结果等中间纹理。这样排查问题时不用猜直接看中间结果效率高很多。这个宏在发布版本里会自动关掉不影响性能。这套风格化渲染系统我前前后后迭代了三个版本从最初的纯NPR到后来的PBRNPR混合再到现在的LUT驱动动态风格化。最大的体会是风格化不是把PBR扔掉而是在PBR的基础上做“翻译”。物理光照给你一个可靠的底子LUT和风格化处理层负责把这个底子翻译成你想要的视觉语言。两者配合好了既能保证画面稳定又能做出独特的风格。
