TiXL ColorGrade 算子深度指南：基于 Gain / Gamma / Lift 的实时图像色彩分级与暗角控制

TiXL ColorGrade 算子深度指南：基于 Gain / Gamma / Lift 的实时图像色彩分级与暗角控制

【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3

本指南以 ColorGrade.md 为核心骨架，结合其 HLSL 着色器实现、C# 算子定义与符号默认配置展开。ColorGrade 是 TiXL（实时动态图形创作工具）Lib.image.color算子库中的标准图像调色节点，用于对输入纹理执行高光（Gain）、中间调（Gamma）、阴影（Lift）三段式色彩分级，并附带饱和度与暗角（Vignette）控制。读完本文，你将掌握每个输入参数的精确含义与默认值、底层像素着色器的分级数学原理，以及借助预设混合、色块拖拽与波形监视器进行高效调色的实战方法。

ColorGrade 在 TiXL 中的定位

ColorGrade 属于算子库Lib.image.color，该目录下的算子都聚焦于图像色彩处理。根据 Lib.image.color 算子索引，同目录还包含AdjustColors（综合色彩属性调整）、ColorGradeDepth（基于深度缓冲的高级分级）、ChannelMixer、Tint、ToneMapping等节点。ColorGrade 的定位是“快速、直观”的标准分级工具：它只做三件事——饱和度、三段式明度分级、暗角，输入输出均为一张 2D 纹理，可任意串接在渲染链中。

从算子实现看，ColorGrade.cs 声明了一个输出槽Slot<Texture2D> Output与 11 个输入槽，所有逻辑实际由 ColorGrade.hlsl 像素着色器完成。算子符号配置 ColorGrade.t3 表明该符号内部由_ImageFxShaderSetupStatic（指向Lib:shaders/img/ColorGrade.hlsl）驱动，输入参数经由多个Vector4Components/Vector2Components分解子节点接线到着色器常量缓冲区，因此你在节点 UI 上看到的参数最终都会汇入 HLSL 的ParamConstants。

输入参数总览

文档给出的完整参数表如下，本文补充了每个参数的默认值（取自 ColorGrade.t3 的DefaultValue）与底层作用说明：

输出只有一个槽：Output，类型T3.Core.DataTypes.Texture2D，即分级后的 2D 纹理，可直接连接到后续算子或最终渲染目标。

中性值约定：为什么默认色是 0.5

注意上表中 Gain / Gamma / Lift / VignetteColor 的默认 RGB 均为0.5，而不是0。这与着色器中的中性处理逻辑一致：gainScaled = Gain.rgb * 2 * Gain.a + (0.5 - Gain.a)，当Gain.rgb = 0.5时该式恒等于0.5，代入后续公式恰好不产生任何偏移——因此RGB = 0.5 是“无色”中性点。同理，颜色向 > 0.5 方向偏移会向该色相倾斜，向 < 0.5 方向偏移则补其互补色。Alpha 通道控制效果强度：alpha = 0.5时2*a = 1，颜色完全生效；alpha = 0时则完全抵消颜色分量，只保留0.5中性基底。默认 Gain/Gamma 的A = 0.506表示默认即以满强度执行中性分级，而 Lift 的A = 0.25意味着默认阴影抬升强度减半，避免默认状态下画面出现明显偏色。

输出与连接

ColorGrade 只有一个输出Output（T3.Core.DataTypes.Texture2D），这是典型的单进单出图像算子设计，方便与 ColorGradeDepth、AdjustColors 等节点以串联或并联方式组合。由于输出仍是普通纹理，你可以在其后再接任意纹理处理算子继续加工。

底层实现：像素着色器逐步解析

整个分级管线在 ColorGrade.hlsl 的psMain中完成，共分四步：输入钳制 → 饱和度 → 暗角 → Lift/Gamma/Gain 分级。

1. 输入钳制与饱和度

c.rgb = clamp(c.rgb, 0.000001, 1000); // Saturation float gray = (c.r * 0.22 + c.g * 0.707 + c.b * 0.071); c.rgb = lerp(float3(gray, gray, gray), c.rgb, PreSaturate);

首先将 RGB 钳制在极小值到 1000 之间，避免后续幂运算遇到 0 或极端 HDR 值产生 NaN。饱和度采用经典的 Rec.709 亮度加权（0.22 / 0.707 / 0.071 的近似系数）计算灰度，然后按PreSaturate在灰度与原色之间线性插值：PreSaturate = 0得到灰度图，= 1保持原饱和度。由于该饱和度作用于分级之前，文档称之为“前置饱和度”（Pre-Saturate）。

2. 暗角（Vignette）计算

float flipEdge = VignetteRadius < 0 ? -1 : 1; float v = length((uv - 0.5 - VignetteCenter * float2(1, -1))); v /= VignetteRadius * flipEdge / 2; v -= 0.5; v = smoothstep(0, 1, (v - 0.5) / (VignetteBias * flipEdge * 2) + 0.5);

暗角以归一化 UV 坐标计算：以屏幕中心(0.5, 0.5)为基准，减去VignetteCenter偏移后取到中心的距离，再除以半径得到归一化距离。smoothstep将距离映射为平滑的 0–1 羽化值，其过渡宽度由VignetteBias（即 UI 中的VignetteFeather参数）控制。值得注意的细节是VignetteRadius < 0时flipEdge = -1，这会翻转暗角方向——负半径可用于实现反向效果（中心变暗、边缘变亮），为暗角提供了超出常规的创意空间。VignetteCenter允许把暗角中心偏移到画面任意位置（Y 分量在着色器中被乘以(1, -1)翻转，即 UI 中向上的偏移对应 UV 中向上）。最终v值用于调制暗角颜色对增益的附加偏移：

gainScaled += (VignetteColor.rgb - 0.5) * v * (VignetteColor.a * 2 + 1);

即暗角本质上是在高光增益上叠加一个随距离变化的颜色偏移：VignetteColor.rgb = 0.5时无暗角，越偏离 0.5 暗角越明显；VignetteColor.a放大暗角强度。

3. Lift / Gamma / Gain 分级核心公式

float3 liftScaled = Lift.rgb * 2 * Lift.a + (0.5 - Lift.a); float3 gammaScaled = Gamma.rgb * 2 * Gamma.a + (0.5 - Gamma.a); float3 gainScaled = Gain.rgb * 2 * Gain.a + (0.5 - Gain.a); gainScaled += (VignetteColor.rgb - 0.5) * v * (VignetteColor.a * 2 + 1); c.rgb = pow((c.rgb + (liftScaled.rgb * 2 - 1) * (1 - c.rgb)) // Lift * gainScaled * 2, // Gain 1 / (gammaScaled * 2)); // Gamma

这是经典影调曲线模型的实时实现：

• Lift（阴影）：c.rgb + (liftScaled * 2 - 1) * (1 - c.rgb)在原始颜色与“抬升量”之间按亮度反比插值——暗部受 Lift 影响最大，亮部几乎不受影响；
• Gain（高光）：上一步结果乘以gainScaled * 2，对全图做乘法增益，亮部受影响最显著；
• Gamma（中间调）：整体做pow(x, 1/(gammaScaled*2))伽马幂运算，主要重塑中间调对比度而不改变纯黑纯白。

三个分段通过乘除/幂运算天然联动，任何参数在0.5中性值时公式都退化为恒等操作，因此默认配置下画面不发生任何变化——这正是“灰值即中性”设计（文档原话Gray values are neutral）的体现。运算完成后再次钳制 RGB 并约束 Alpha 到[0,1]输出。

补充：文档中“Alpha can be used to amplify the effect”（Alpha 可用于放大效果）即指上述2 * a的强度系数；对于 VignetteColor 则是VignetteColor.a * 2 + 1的放大因子。

4. GenerateMipmaps 与 ClampResult 的作用

这两个布尔参数不直接出现在ParamConstants中，而是由 ColorGrade.t3 符号内部的BoolToFloat子节点与一个默认值为0.15的Value节点转换后，连入_ImageFxShaderSetupStatic的对应输入。从接线结构可以推断：GenerateMipmaps控制着色器执行前是否为输入纹理生成 mipmap（采样缩小时需要），而ClampResult控制执行后是否对结果做钳制处理（对应 HLSL 末尾的clamp语句开关）。默认均为false，即在需要保留 HDR 数据或避免额外 GPU 开销时可保持关闭。

实战技巧：预设混合与快速调色

原文档给出了三条高价值的交互技巧，适用于 TiXL 节点 UI：

1. ALT 键悬停混合预设：在参数预设（presets）上按住ALT键悬停即可预览并混合预设效果，而非直接覆盖当前值——这使你可以把多个预设的效果按需要渐进融合，是快速探索调色方向的高效方式。
2. 垂直拖拽色块微调亮度与 Alpha：直接按住鼠标左键/右键上下拖拽参数的颜色色块（color swatch），即可快速调整该参数的亮度（RGB）与透明度（Alpha）。左、右鼠标键分别控制不同通道，是脱离数字输入框的直觉化调色手段。
3. 接入 WaveForm2 监视波形：在 ColorGrade 输出后串联WaveForm2算子，以波形（waveform）形式可视化图像明度分布，直观核对高光、中间调、阴影是否过曝或欠曝，从而精准设定 Gain / Gamma / Lift 的幅度。

相关算子对比与选型建议

文档明确给出了三条选型线索：

• ColorGradeDepth：功能更完整的“深度版”分级算子。它在 ColorGrade 的同一套 Gain / Gamma / Lift / Vignette 参数基础上，额外接入DepthBuffer、Gradient、GradientDepthRange与CamNearFarClip，可依据深度缓冲生成随距离变化的渐变着色（近处物体与远处物体颜色不同），适合需要大气透视或空间分层的 3D 场景。其着色器实现见 ColorGradeWithDepth.hlsl：用DepthToSceneZ将深度缓冲换算为场景 Z，归一化后采样渐变纹理，并把渐变颜色叠加进gainScaled。文档还建议与SetFog算子组合使用；仓库中附有现成的 ColorGradeDepthExample 示例供参考。
• AdjustColors：面向“快速出片”的综合性调色算子，提供 Colorize、Saturation、Hue、Contrast、Exposure、Brightness、OrangeTeal（橙青色调）等更贴近传统调色流程的参数，并自带轻微暗角。如果你的需求是快速套用电影感风格而非精细三段式分级，可优先考虑它。
• ChannelMixer / Tint / ToneMapping等同目录算子则覆盖通道混合、双色调染色、HDR 色调映射等不同细分场景，可按需查阅 算子索引。

选型建议：需要精细控制高光/中间调/阴影且无需深度信息时选ColorGrade；需要空间深度着色或与 3D 场景联动时选ColorGradeDepth；需要快速整体风格化（橙青、色调、对比度）时选AdjustColors。三者均可串联使用，例如先用 AdjustColors 定整体风格，再用 ColorGrade 精细调整影调。

小结

ColorGrade 是 TiXL 中最常用、也最能体现“灰值中性 + Alpha 放大”设计哲学的调色算子之一。它的全部秘密都浓缩在 ColorGrade.hlsl 的十几行像素着色器中：前置饱和度、UV 距离暗角、以及由 Lift / Gamma / Gain 构成的影调三段式幂运算。理解这套公式，你就能精确预测每个参数对画面的影响，再配合 ALT 预设混合与色块拖拽，即可在实时动态图形工作流中完成从基础校正到风格化调色的全流程。

【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3