1. 项目概述为什么我们需要一个“饱和度节点”在ShaderGraph里折腾过一阵子的朋友肯定对“饱和度”这个概念不陌生。无论是做风格化的卡通渲染还是调整场景氛围甚至是修复某些材质看起来“灰蒙蒙”的问题都离不开对颜色饱和度的控制。Unity的ShaderGraph内置了一个非常方便的Saturation Node也就是我们今天要拆解的主角——饱和度节点。简单来说这个节点的功能很纯粹它接收一个颜色RGB向量和一个浮点数值然后输出一个调整了饱和度之后的颜色。当饱和度值为1时原样输出为0时输出完全去色也就是灰度的结果大于1时增强饱和度让颜色更鲜艳在0到1之间则降低饱和度。听起来很简单对吧但如果你只是把它当成一个“调色滑块”来用那就太浪费了。这个节点背后其实隐藏着图形学中一个非常经典且高效的颜色处理算法——基于亮度Luma的线性插值。理解这个算法不仅能让你知道这个节点“怎么用”更能让你明白它“为什么这么设计”以及当它效果不理想时你该如何变通甚至自己动手实现更符合需求的饱和度调整方案。这对于想从ShaderGraph使用者进阶为Shader创造者的你来说是必经的一步。2. 核心原理拆解从“调色”到“数学”很多教程会直接告诉你“喏连上线调参数效果就出来了。”但我们不满足于此。要真正掌握一个节点必须扒开它的“外壳”看看里面的“引擎”是怎么转的。根据官方文档提供的生成代码Saturation节点的核心算法一目了然void Unity_Saturation_float(float3 In, float Saturation, out float3 Out) { float luma dot(In, float3(0.2126729, 0.7151522, 0.0721750)); Out luma.xxx Saturation.xxx * (In - luma.xxx); }这段简短的代码就是整个节点的灵魂。我们来逐行解析。2.1 第一步计算亮度Lumafloat luma dot(In, float3(0.2126729, 0.7151522, 0.0721750));这是整个操作的第一步也是关键所在。它并不是简单地将RGB三个通道取平均值而是做了一个加权平均。这个权重向量(0.2126, 0.7152, 0.0722)是ITU-R BT.709标准中定义的亮度系数它反映了人眼对不同颜色光线的敏感程度。为什么是这些数字人眼对绿色最敏感对红色次之对蓝色最不敏感。所以绿色G的权重最高0.7152红色R次之0.2126蓝色B最低0.0722。用这个权重计算出来的“亮度”Luma比简单的算术平均各1/3更符合人眼的感知调整饱和度时视觉效果会更自然。dot点积操作在做什么点积在这里的本质是加权求和。In.r * 0.2126729 In.g * 0.7151522 In.b * 0.0721750。最终得到的luma是一个标量float它代表了输入颜色In在人眼感知下的灰度值。实操心得这个亮度系数是针对sRGB颜色空间的。如果你的纹理或颜色数据是在线性空间Linear Space下工作的严格来说应该使用不同的系数如BT.2020。但在绝大多数游戏和实时渲染的sRGB工作流中使用这个系数是标准且正确的做法。ShaderGraph默认处理sRGB纹理所以直接用它没问题。2.2 第二步线性插值Lerp的变体Out luma.xxx Saturation.xxx * (In - luma.xxx);这一行是算法的核心计算。我们把它拆开看luma.xxx这是一个标量向向量的扩展。因为luma是一个float而我们需要一个float3RGB来参与后续计算。luma.xxx就等同于float3(luma, luma, luma)也就是一个由亮度值构成的灰色。(In - luma.xxx)这是当前颜色与其对应灰度值的差值向量。这个差值代表了颜色的“彩色成分”或“色度”。一个完全去色的灰度图这个差值就是0。Saturation.xxx * (In - luma.xxx)用饱和度参数去缩放这个“彩色成分”。当Saturation 1时彩色成分不变当Saturation 0时彩色成分被完全归零当Saturation 2时彩色成分被放大一倍。luma.xxx ...最后将缩放后的“彩色成分”加回到原始的“亮度基础”上得到最终输出颜色。你可以把这个过程想象成调音台luma.xxx是音乐的“干声”基础亮度(In - luma.xxx)是音乐的“和声与色彩”色度Saturation就是控制“色彩声部”音量的推子。推子拉到最低只剩干声灰度推子保持原位原声输出推子推高色彩部分被放大整体更“鲜艳”。这个算法的精妙之处在于它保证了颜色的亮度Luma在调整过程中保持不变。因为无论Saturation怎么变最终结果中luma.xxx这一项是恒定加回去的。这意味着你增强或降低饱和度时画面的明暗关系不会发生改变这通常是我们想要的效果——只改变颜色的鲜艳程度而不影响其明暗。3. 节点接口与基础应用实战理解了原理我们回到ShaderGraph的界面看看这个节点具体怎么用。3.1 端口详解Saturation节点通常有三个端口有些版本可能端口名略有差异但功能一致In (Vector 3)输入端口。接受一个float3类型的颜色值。这可以来自Texture Sample节点的RGB输出、Color节点的输出或者是其他颜色运算的结果。Saturation (Float)输入端口。接受一个浮点数控制饱和度强度。这个值可以是常数也可以来自一个Slider节点、Time节点甚至是另一个复杂的计算流程从而实现动态的饱和度变化。Out (Vector 3)输出端口。输出调整后的float3颜色值可以继续连接到主纹理颜色、自发光颜色或任何需要颜色的地方。3.2 基础连接示例制作一个可调节的“去色”效果这是最直接的应用。假设我们有一个场景希望玩家能通过一个UI滑块来让整个世界逐渐变成黑白。准备基础颜色使用一个Texture Sample节点采样场景的主贴图将其RGB输出连接到Saturation节点的In端口。创建控制参数在Blackboard中创建一个Float类型的属性命名为_GlobalSaturation。将其暴露出去勾选Exposed这样它就会出现在材质球的Inspector面板中。将这个属性节点拖到图上其输出端口连接到Saturation节点的Saturation端口。应用结果将Saturation节点的Out连接到主着色器的Base Color输入上。在材质中调节现在在材质Inspector里你可以看到一个_GlobalSaturation的滑块。将其从1拖到0就能看到材质颜色从彩色渐变为黑白。注意事项这里有一个常见的“坑”。如果你希望整个物体的饱和度统一变化这样做没问题。但如果你希望物体的一部分如高光、暗部的饱和度变化程度不同就需要更复杂的方案比如将饱和度参数与一张遮罩Mask纹理相乘再输入到节点。3.3 进阶连接实现“局部饱和度增强”比如你想让角色服装的花纹比布料本身更鲜艳一些。准备两张图一张是基础颜色贴图Base Color另一张是花纹区域的遮罩贴图Mask白色代表花纹区域黑色代表布料区域。构建饱和度参数假设我们希望基础布料饱和度是0.8花纹区域饱和度增强到1.5。我们可以使用一个Lerp线性插值节点。将Lerp的T输入连接遮罩贴图单通道即可。Lerp的A输入设为0.8常数B输入设为1.5常数。Lerp的输出就是一个根据遮罩变化的浮点数在布料区域Mask0输出0.8在花纹区域Mask1输出1.5过渡区域平滑渐变。连接饱和度节点将基础颜色贴图的RGB输出连接到Saturation节点的In将上一步Lerp的输出连接到Saturation节点的Saturation。输出结果将Saturation节点的Out连接到Base Color。这样你就实现了一个基于纹理遮罩的、非均匀的饱和度控制比全局一个滑块要精细得多。4. 内部算法模拟与自定义扩展虽然ShaderGraph提供了现成的节点但知其然更要知其所以然。我们完全可以自己用基础节点来“搭建”一个Saturation节点这不仅能加深理解还能在需要时进行自定义修改。4.1 使用基础节点复现Saturation算法我们根据之前的原理公式在ShaderGraph中一步步搭建计算亮度Luma将In颜色假设是float3拆分成R,G,B三个通道使用Split节点。使用Multiply节点分别将R通道乘以0.2126G通道乘以0.7152B通道乘以0.0722。使用Add节点将这三个乘法的结果相加得到luma一个float。更高效的做法是使用Dot Product节点直接计算dot(In, float3(0.2126, 0.7152, 0.0722))但ShaderGraph的基础节点库可能没有直接提供带常量的点积需要自己用Multiply和Add实现或者使用Custom Function节点写入代码。构造灰度颜色使用Combine节点将上一步得到的lumafloat合并成一个float3即(luma, luma, luma)。这对应代码中的luma.xxx。计算色度差并缩放用Subtract节点计算In减去灰度颜色得到色度差向量(In - luma.xxx)。用Multiply节点将色度差与输入的Saturation参数相乘。注意Saturation是float需要先通过Combine或直接与向量相乘ShaderGraph会自动广播来得到Saturation.xxx。合成最终颜色用Add节点将灰度颜色与缩放后的色度差相加得到最终的Out颜色。通过这个搭建过程你会对每一步的计算有更直观的认识。在Graph中这可能需要十几个节点的连接远不如一个内置节点简洁但作为学习练习非常有价值。4.2 自定义变体使用不同亮度系数的饱和度内置节点固定使用了BT.709系数。但有些艺术风格可能需要不同的灰度感知。例如在某些复古或高对比度风格中你可能觉得绿色权重太高想让去色后的结果更接近红蓝通道的混合。这时自定义的优势就体现出来了。在我们自己搭建的流程中第一步计算亮度的乘法系数0.2126, 0.7152, 0.0722是可以替换的。创建可调系数在Blackboard中创建三个Float属性_LumaWeightR,_LumaWeightG,_LumaWeightB。建议给它们设置默认值如0.2126, 0.7152, 0.0722并确保三者之和为1虽然不是必须但这样亮度范围更可控。修改亮度计算将之前固定乘0.2126、0.7152、0.0722的地方替换为乘以这三个属性。后续步骤不变后面的计算色差、缩放、合成的流程完全不变。现在你不仅可以通过Saturation参数控制饱和度强度还能通过_LumaWeightRGB这三个参数控制“以何种方式去色”。这为你实现特殊的艺术效果比如模拟某种胶片或显示器的去色特性提供了可能。实操心得自己搭建自定义节点时务必将其封装成一个Sub Graph子图。将In(Vector3)、Saturation(Float)、以及可选的权重系数作为输入端口将Out(Vector3)作为输出端口。这样你就可以像使用内置Saturation Node一样在任意着色器中拖拽使用你这个“增强版”饱和度节点了整洁且可复用。5. 实战场景与高级技巧掌握了基础和原理后我们来看看Saturation节点在真实项目中的一些巧妙用法和需要注意的“坑”。5.1 场景一动态环境氛围调节在一天中的不同时间或者进入不同区域如毒气区、魔法结界时画面的整体饱和度需要变化。实现思路将Saturation参数与游戏逻辑变量绑定。例如可以定义一个全局的_WorldSaturation由游戏代码如Global Shader Property根据时间或玩家状态进行驱动。进阶技巧单纯改变全局饱和度可能很生硬。可以结合屏幕后处理Post-processing中的Color Grading颜色分级来使用。在ShaderGraph中特别是URP的Fullscreen Shader Graph你可以对渲染后的图像采样然后应用Saturation节点。这样能实现更电影化的、非线性的饱和度调整曲线。5.2 场景二角色受击/死亡特效角色受击时除了闪白、变红也可以快速降低角色自身饱和度然后恢复营造一种“生命力被抽离”或“受到重击”的视觉感受。制作脉冲曲线使用Time节点和Sine或Triangle Wave节点生成一个在0到1之间快速波动的值。或者使用一个简单的PingPong节点配合时间。重映射饱和度将脉冲曲线比如范围0~1通过Remap节点映射到目标饱和度范围例如从正常的1映射到最低的0.3。这样饱和度就会在0.3和1之间来回跳动。应用将此动态饱和度值连接到角色材质的Saturation节点。为了只影响角色这个逻辑应该写在角色的局部材质中而非全局后处理。5.3 场景三与其他颜色操作节点的组合Saturation节点很少孤立使用它通常是颜色处理流水线中的一环。顺序很重要Saturation-Hue Shift色相偏移 和Hue Shift-Saturation的效果是不同的。先调饱和度再调色相颜色的变化会更“纯净”先调色相再调饱和度会因为色相移动而影响亮度感知从而影响饱和度效果。通常先调整色相/亮度最后调整饱和度是更常见的流程。与Multiply和Add结合有时单纯调整饱和度无法达到理想的色彩强度。你可以将Saturation节点的输出再与一个颜色进行Multiply正片叠底来增强暗部色彩或与一个颜色Add相加来增加整体色彩倾向。这比单纯把饱和度调到极高2要更可控因为极高的饱和度容易导致颜色溢出超出显示范围显得不自然。5.4 常见问题与排查技巧实录即使理解了原理在实际操作中还是会遇到一些意想不到的问题。下面是我踩过的一些坑和解决方法问题1调整饱和度后颜色看起来“脏”或“不自然”特别是低饱和度时。原因分析这很可能是因为输入的颜色值不在标准的sRGB范围内比如是HDR颜色值超过了1或者亮度计算时出现了精度问题。当颜色值很大时In - luma.xxx这个差值可能很大乘以一个很小的饱和度值后再与luma.xxx相加可能会因为浮点数精度导致颜色出现偏差。解决方案钳制输入在将颜色输入Saturation节点之前使用Clamp节点或Saturate节点将其范围限制在[0, 1]内如果是LDR流程。这能保证计算稳定性。检查颜色空间确保你的纹理导入设置和ShaderGraph中的颜色空间设置一致。如果纹理是sRGB但你在线性空间下计算颜色会变暗变灰再调整饱和度就会很奇怪。尝试自定义亮度系数如4.2节所述内置的亮度系数可能不适合你的特定艺术风格。尝试微调权重找到最适合你画面感觉的灰度化方案。问题2我想只改变图像中特定颜色范围如红色的饱和度怎么办原因分析内置的Saturation节点是全局操作对所有颜色一视同仁。解决方案你需要实现一个“选择性饱和度”调整。思路如下颜色识别将输入颜色从RGB空间转换到HSV/HSL颜色空间。ShaderGraph有RGB to HSV节点。创建遮罩根据HSV中的H色相通道使用Remap和Smoothstep节点生成一个针对目标色相范围比如红色对应H值在0~0.1和0.9~1.0之间的遮罩0到1。混合饱和度计算两个饱和度结果一个是原始饱和度比如1.0一个是目标饱和度比如0.5。使用上一步的色相遮罩对这两个饱和度值进行Lerp。应用将混合后的饱和度值输入到Saturation节点。这样只有红色区域的饱和度会被降低其他颜色保持不变。这个方法常用于调整画面中过于抢眼的某种颜色。问题3在移动设备上使用复杂的自定义饱和度网络导致性能下降。原因分析自己用基础节点搭建的饱和度计算尤其是包含多个Multiply和Add的版本指令数会比使用一个高度优化的内置Saturation节点多。解决方案优先使用内置节点在最终项目打包前尽量用内置的Saturation Node替换自己搭建的复杂网络。内置节点通常由引擎底层提供经过高度优化。使用Custom Function封装如果必须使用自定义算法如改了亮度系数不要用一堆基础节点连接而是将其写在一个Custom Function节点的HLSL代码里。一段紧凑的HLSL代码通常比等价的节点网络生成更高效的Shader汇编指令。性能分析务必使用Unity的Frame Debugger或第三方GPU性能分析工具对比使用内置节点和自定义节点时的Shader指令数ALU操作和耗时。在移动端每一行指令都值得计较。问题速查表问题现象可能原因排查步骤与解决方案颜色变灰但饱和度滑块无效节点连接错误Saturation端口输入了固定值0检查Saturation端口的输入源确保其值在变化如连接了Slider调整饱和度时画面明暗也变了可能错误地修改了亮度Luma计算部分或输入颜色包含Alpha且被错误处理1. 检查自定义节点中亮度权重之和是否接近1。2. 确保计算只针对RGB三通道Alpha通道应直接 bypass。高饱和度下颜色出现“荧光”感不自然颜色值超出显示范围1或饱和度值设置过高31. 在输出到最终颜色前用Saturate节点钳制颜色到[0,1]。2. 将饱和度参数限制在合理范围如0~2。特定纹理饱和度调整效果与其他纹理不同纹理的导入颜色空间sRGB vs Linear不统一在Unity Project面板检查所有相关纹理的导入设置确保“sRGB (Color Texture)”选项符合预期颜色贴图勾选非颜色贴图不勾选。6. 总结与思维延伸通过这次对Saturation节点的深度解析我们完成了一次从“使用者”到“理解者”再到“创造者”的跨越。我们不仅学会了如何连接这个节点更剖析了其背后基于亮度加权平均的线性插值算法甚至动手复现并扩展了它。这个节点的设计哲学非常经典分离亮度与色度保持亮度恒定仅对色度进行缩放。这种思想在图像处理中无处不在。理解了它你再去看其他颜色调整节点如Contrast对比度、Vibrance自然饱和度甚至是一些复杂的色彩查找表LUT应用都会发现其核心思路有相通之处——都是在对颜色的不同属性进行解耦和独立控制。我个人在项目中的体会是饱和度调整是一把“双刃剑”。适度使用可以极大地提升画面的视觉冲击力和情绪表达过度使用尤其是全局无差别地拉高饱和度会让画面显得艳俗、虚假并加速视觉疲劳。更高级的做法永远是局部、有层次、有意图地使用它。结合遮罩、基于深度或法线的边缘检测、甚至屏幕空间信息来让饱和度的变化服务于你的画面叙事和视觉引导这才是Shader艺术真正的魅力所在。最后一个小技巧当你对默认的饱和度调整效果不满意时不要只盯着Saturation一个参数。尝试在调整饱和度之前先轻微调整一下色相Hue或明度Value/Lightness有时会得到意想不到的、更和谐的色彩效果。因为色彩是一个三维空间HSV单独在一个维度上猛调不如在三个维度上协同微调。
