【URP】Unity[后处理]颜色曲线ColorCurves

【从UnityURP开始探索游戏渲染】专栏-直达

ColorCurves 是 Unity 通用渲染管线(URP)中的一种高级颜色分级工具，它允许通过曲线精细调整图像的色相、饱和度和亮度。这种工具最初在专业影视后期软件(如 Fusion)中成熟应用，后被引入游戏引擎用于实时渲染的色彩控制。

ColorCurves 提供了8条独立曲线，包括：

Master(整体亮度)
- ‌功能‌：整体调整图像的亮度和对比度。
- ‌实现‌：通过调整曲线形状控制全局亮度，曲线向上提升亮度，向下降低亮度
Red/Green/Blue(单通道调整，三条曲线)
- 功能‌：分别单独调整红、绿、蓝通道的亮度和色彩平衡。
- ‌实现‌：针对分量进行独立调节，影响图像中红、绿蓝区域的显色强度
HueVsHue(色调替换 色相-色相曲线)
- ‌功能‌：基于色相替换颜色（如将红色替换为蓝色）。
- ‌实现‌：通过映射原始色相到目标色相，实现颜色转换
HueVsSat(色调饱和度调整 色相-饱和度曲线)
- 功能‌：根据色相调整特定颜色的饱和度。
- ‌实现‌：选择特定色相范围后，增加或降低其饱和度
SatVsSat(饱和度对比 饱和度-饱和度曲线)
- ‌功能‌：基于当前饱和度进一步调整饱和度。
- ‌实现‌：对低饱和度区域增强或高饱和度区域抑制，实现非线性调整
LumVsSat(亮度饱和度关系 亮度-饱和度曲线)
- 功能‌：根据亮度调整饱和度（如增强暗部饱和度）。
- ‌实现‌：在低亮度区域提升饱和度以增强视觉对比，或在高亮度区域降低饱和度避免过曝

发展历史

颜色曲线技术起源于电影工业的后期调色流程，早期在 DaVinci Resolve 等专业调色软件中实现。Unity 在 2017 年引入 Post-processing Stack v1 时首次包含了基础曲线调整，2019 年 URP 正式版将其整合为 ColorCurves 模块，并增加了针对游戏优化的 ACES 色彩空间支持。

实现原理

ColorCurves 在渲染管线的后处理阶段工作，位于色调映射之前。它通过以下步骤实现：

将输入图像分解为 HSL 分量
对每个分量应用预定义的曲线变换
重新组合分量并输出到下一处理阶段

曲线映射原理

ColorCurves通过8条独立曲线对图像进行分通道处理，每条曲线采用256个控制点的查找表(LUT)实现非线性映射。例如Master曲线采用x轴(输入亮度)到y轴(输出亮度)的映射关系，通过贝塞尔插值算法实现平滑过渡。

贝塞尔曲线

‌通用公式

对于n阶贝塞尔曲线，其参数方程为：

$B(t)=\sum_{i=0}^{{n}\binom{n}{i}(1−t)}t^iP_i,t\in[0,1]$

其中：
- $P_i$为控制点，共n+1个；
- $\binom{n}{i}$为组合数；
- t为参数，控制曲线上的位置‌。
‌常见类型‌
- ‌线性 1阶‌：两点间直线，公式为
  - $B(t)=(1−t)P_0+tP_1$
- ‌二次 2阶‌：3个控制点，公式为
  - $B(t)=(1−t)^{2P_0+2t(1−t)P_1+t}2P_2$
- ‌三次 3阶‌：4个控制点，公式为
  - $B(t)=(1−t)^{3P_0+3(1−t)}2tP_1+3(1−t)t^2P2+t3P_3$
  - 三次贝塞尔曲线因平衡计算复杂性和灵活性，成为图形学中最常用的类型‌
实现方法
- ‌递归计算‌：通过德卡斯特里奥算法（De Casteljau's algorithm）逐步插值中间点‌；
- ‌矩阵表示‌：将三次贝塞尔曲线表示为控制点与基函数的矩阵乘法‌；
- ‌代码示例‌（Unity/C#）：（注：实际应用中需处理浮点精度和性能优化）‌
```
csharp
public Vector3 CalculateBezierPoint(Vector3 p0, Vector3 p1, Vector3 p2, Vector3 p3, float t) {
    float u = 1 - t;
    return u*u*u * p0 + 3*u*u*t * p1 + 3*u*t*t * p2 + t*t*t * p3;
}
```

通道处理流程

‌RGB通道分离‌：先将图像分解为R/G/B三个通道：

channelR = (R,0,0)
channelG = (0,G,0)
channelB = (0,0,0)
HLSL中常用亮度公式Luminance=0.2126×R+0.7152×G+0.0722×B
- 该公式基于CIE 1931色彩空间的人眼感知权重

RGB_Separate.hlsl

hlsl
Texture2D InputTexture : register(t0);
SamplerState LinearSampler : register(s0);

struct PS_Input {
    float4 Position : SV_POSITION;
    float2 UV : TEXCOORD;
};

// 红色通道分离
float4 PS_RedChannel(PS_Input input) : SV_TARGET {
    float3 color = InputTexture.Sample(LinearSampler, input.UV).rgb;
    return float4(color.r, 0, 0, 1); // 仅保留R分量
}

// 绿色通道分离  
float4 PS_GreenChannel(PS_Input input) : SV_TARGET {
    float3 color = InputTexture.Sample(LinearSampler, input.UV).rgb;
    return float4(0, color.g, 0, 1); // 仅保留G分量
}

// 蓝色通道分离
float4 PS_BlueChannel(PS_Input input) : SV_TARGET {
    float3 color = InputTexture.Sample(LinearSampler, input.UV).rgb;
    return float4(0, 0, color.b, 1); // 仅保留B分量
}

// 亮度计算
float4 PS_Luminance(PS_Input input) : SV_TARGET {
    float3 color = InputTexture.Sample(LinearSampler, input.UV).rgb;
    float lum = dot(color, float3(0.2126, 0.7152, 0.0722));
    return float4(lum.xxx, 1); // 灰度输出
}

‌曲线应用‌：
- 主通道：Master曲线同时影响所有通道
  - 作为全局亮度调整曲线，直接对RGB三通道进行统一映射。公式为：Output=f_master(Input)
  - 其中Input是原始亮度值（0-1），f_master是用户定义的曲线函数
- 分通道：Red/Green/Blue曲线分别处理对应通道
- HueVsHue曲线
  - 实现色相替换效果，通过角度偏移改变特定色相。HSV空间中的公式：H_out=H_in+f_hue(H_in)∗360°
  - f_hue是定义在0-1范围的曲线，输出值作为角度偏移量。
- HueVsSat曲线
  - 控制不同色相区域的饱和度增强/减弱: S_out=S_in∗(1+f_sat(H_in))
  - f_sat曲线输出-1到1的值，负值降低饱和度，正值增加。
- SatVsSat曲线
  - 非线性调整饱和度分布：S_out=f_satmap(S_in)
  - 直接重映射饱和度值，常用于创建哑光效果。
- LumVsSat曲线
  - 基于亮度控制饱和度：S_out=S_in∗(1+f_lum(L_in))
  - L_in是HSL亮度值，f_lum曲线控制不同亮度区域的饱和度变化
- ColorCurves.hlsl
  - 使用纹理采样实现曲线查找，提升GPU执行效率
  - RgbToHsv/HsvToRgb需自行实现标准色彩空间转换
  - 曲线参数通过纹理传入，支持任意形状的调整曲线
  - 最终效果是各曲线调整的叠加组合
  - 在C#中可通过Shader.SetGlobalTexture传递曲线纹理，或在CPU端实现类似算法处理图像数据。实际应用时通常配合UI控件让用户交互式调整曲线形状。
```
// 输入参数
Texture2D InputTexture;
SamplerState LinearSampler;
float4 HueVsHueCurve; // 曲线采样纹理
float4 HueVsSatCurve;
float4 SatVsSatCurve;
float4 LumVsSatCurve;

float3 ApplyColorCurves(float3 rgb)
{
    // 转换到HSV空间
    float3 hsv = RgbToHsv(rgb);
    float hue = hsv.x;
    float sat = hsv.y;
    float lum = GetLuminance(rgb);

    // HueVsHue处理
    float hueOffset = SampleCurve(HueVsHueCurve, hue);
    hsv.x = frac(hue + hueOffset);

    // HueVsSat处理
    float satScale = SampleCurve(HueVsSatCurve, hue) * 2.0 - 1.0;
    hsv.y = sat * (1.0 + satScale);

    // SatVsSat处理
    hsv.y = SampleCurve(SatVsSatCurve, sat);

    // LumVsSat处理
    float lumSatScale = SampleCurve(LumVsSatCurve, lum) * 2.0 - 1.0;
    hsv.y = sat * (1.0 + lumSatScale);

    // 返回RGB空间
    return HsvToRgb(hsv);
}

// 辅助函数
float SampleCurve(float4 curve, float x)
{
    return curve.SampleLevel(LinearSampler, float2(x, 0), 0).r;
}
```
‌色相转换‌：将RGB转换为HSV色彩空间处理HueVsHue等曲线
- HSV（Hue, Saturation, Value）是一种基于人类视觉感知的直观颜色模型，由色相（H）、饱和度（S）和明度（V）三个分量组成‌
- 基本概念
  - ‌色相H‌：表示颜色类型，取值范围0°-360°（如红色0°、绿色120°、蓝色240°），通过色轮角度定位颜色‌。
  - ‌饱和度S‌：表示颜色纯度，0%为灰色，100%为纯色，数值越高颜色越鲜艳‌。
  - ‌明度V‌：控制颜色亮度，0%为黑色，100%为最亮（如白色需S=0%、V=100%）‌
- 模型特点
  - ‌六角锥体结构‌：从RGB立方体演化而来，色调H沿圆周分布，饱和度S和明度V分别表示径向和轴向距离‌。
  - ‌符合直觉‌：比RGB更接近传统绘画调色习惯，适合直观调整颜色属性（如Photoshop调色板）‌。
  - ‌分量独立‌：亮度V与颜色无关，仅影响光照强度；色调H和饱和度S互不干扰‌
- RGB转HSV
- HSV转RGB
- ColorSpace.hlsl
```
// RGB转HSV
float3 RGBtoHSV(float3 rgb) {
    float cmax = max(rgb.r, max(rgb.g, rgb.b));
    float cmin = min(rgb.r, min(rgb.g, rgb.b));
    float delta = cmax - cmin;

    float h = 0;
    if (delta != 0) {
        if (cmax == rgb.r) 
            h = 60 * fmod(((rgb.g - rgb.b)/delta + 6), 6);
        else if (cmax == rgb.g) 
            h = 60 * ((rgb.b - rgb.r)/delta + 2);
        else 
            h = 60 * ((rgb.r - rgb.g)/delta + 4);
    }

    float s = (cmax == 0) ? 0 : delta / cmax;
    return float3(h, s, cmax);
}

// HSV转RGB
float3 HSVtoRGB(float3 hsv) {
    float c = hsv.z * hsv.y;
    float x = c * (1 - abs(fmod(hsv.x / 60, 2) - 1));
    float m = hsv.z - c;

    float3 rgb;
    if (hsv.x < 60) rgb = float3(c, x, 0);
    else if (hsv.x < 120) rgb = float3(x, c, 0);
    else if (hsv.x < 180) rgb = float3(0, c, x);
    else if (hsv.x < 240) rgb = float3(0, x, c);
    else if (hsv.x < 300) rgb = float3(x, 0, c);
    else rgb = float3(c, 0, x);

    return rgb + m;
}
```

示例：实现冷色调增强

// 在Volume组件中添加ColorCurves重载
var curves = volumeProfile.Add<ColorCurves>();
curves.active = true;

// 调整蓝色通道曲线
curves.blue.Override(new AnimationCurve(
    new Keyframe(0, 0),
    new Keyframe(0.5f, 0.7f),
    new Keyframe(1, 1)
));

// 降低暖色饱和度
curves.hueVsSat.Override(new AnimationCurve(
    new Keyframe(0.1f, 0.8f),// 红色范围
    new Keyframe(0.6f, 1.2f)// 蓝色范围
));

该示例通过提升中间调蓝色和抑制红色饱和度，实现电影级冷色调效果。

伽马校正处理

URP会在曲线处理前后自动执行伽马/线性空间转换，确保颜色混合符合物理正确性。具体流程：

输入图像从sRGB转为线性空间
应用所有曲线调整
结果转换回sRGB空间输出

性能优化

采用计算着色器并行处理LUT生成，每条曲线仅需1次纹理采样，8条曲线共产生约0.3ms的性能开销（1080p分辨率）。建议避免每帧动态修改曲线控制点，改为预烘焙多套曲线配置。

完整示例

ColorCurvesExample.cs

using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.Rendering.Universal;

[System.Serializable]
public class ColorCurvesSettings
{
    public AnimationCurve masterCurve = new AnimationCurve(new Keyframe(0f, 0f), new Keyframe(1f, 1f));
    public AnimationCurve redCurve = new AnimationCurve(new Keyframe(0f, 0f), new Keyframe(1f, 1f));
    public AnimationCurve greenCurve = new AnimationCurve(new Keyframe(0f, 0f), new Keyframe(1f, 1f));
    public AnimationCurve blueCurve = new AnimationCurve(new Keyframe(0f, 0f), new Keyframe(1f, 1f));
    public AnimationCurve hueVsHueCurve = new AnimationCurve(new Keyframe(0f, 0f), new Keyframe(1f, 1f));
    public AnimationCurve hueVsSatCurve = new AnimationCurve(new Keyframe(0f, 0f), new Keyframe(1f, 1f));
    public AnimationCurve satVsSatCurve = new AnimationCurve(new Keyframe(0f, 0f), new Keyframe(1f, 1f));
    public AnimationCurve lumVsSatCurve = new AnimationCurve(new Keyframe(0f, 0f), new Keyframe(1f, 1f));
}

public class CustomColorCurvesRenderPass : ScriptableRenderPass
{
    private Material m_Material;
    private ColorCurvesSettings m_Settings;

    public CustomColorCurvesRenderPass(Material material, ColorCurvesSettings settings)
    {
        m_Material = material;
        m_Settings = settings;
    }

    public override void Execute(ScriptableRenderContext context, ref RenderingData renderingData)
    {
        if (m_Material == null) return;

        CommandBuffer cmd = CommandBufferPool.Get("Color Curves");

        // 设置曲线参数
        m_Material.SetTexture("_MasterCurve", CreateCurveTexture(m_Settings.masterCurve));
        m_Material.SetTexture("_RedCurve", CreateCurveTexture(m_Settings.redCurve));
        m_Material.SetTexture("_GreenCurve", CreateCurveTexture(m_Settings.greenCurve));
        m_Material.SetTexture("_BlueCurve", CreateCurveTexture(m_Settings.blueCurve));
        m_Material.SetTexture("_HueVsHueCurve", CreateCurveTexture(m_Settings.hueVsHueCurve));
        m_Material.SetTexture("_HueVsSatCurve", CreateCurveTexture(m_Settings.hueVsSatCurve));
        m_Material.SetTexture("_SatVsSatCurve", CreateCurveTexture(m_Settings.satVsSatCurve));
        m_Material.SetTexture("_LumVsSatCurve", CreateCurveTexture(m_Settings.lumVsSatCurve));

        // 执行后处理
        Blit(cmd, renderingData.cameraData.renderer.cameraColorTarget, 
            renderingData.cameraData.renderer.cameraColorTarget, m_Material);

        context.ExecuteCommandBuffer(cmd);
        CommandBufferPool.Release(cmd);
    }

    private Texture2D CreateCurveTexture(AnimationCurve curve)
    {
        Texture2D texture = new Texture2D(256, 1, TextureFormat.RFloat, false);
        for (int i = 0; i < 256; i++)
        {
            float value = curve.Evaluate(i / 255f);
            texture.SetPixel(i, 0, new Color(value, 0, 0, 0));
        }
        texture.Apply();
        return texture;
    }
}

使用流程

在 Unity 中创建 Volume 对象并添加 Color Curves 效果
调整各条曲线参数
通过预览窗口实时查看效果

参数详解与用例

Master 曲线

‌作用‌：全局亮度调整
‌用例‌：修正整体曝光不足或过曝的场景

RGB 曲线(Red/Green/Blue)

‌作用‌：单独调整各颜色通道
‌用例‌：修正色偏或创造风格化效果(如赛博朋克的蓝色调)

HueVsHue

‌作用‌：基于输入色调替换输出色调
‌用例‌：将绿色植被改为秋季黄色

HueVsSat

‌作用‌：调整特定色调的饱和度
‌用例‌：增强天空蓝色饱和度而不影响其他颜色

SatVsSat

‌作用‌：调整饱和度对比
‌用例‌：使高饱和区域更鲜艳，低饱和区域更灰

LumVsSat

‌作用‌：基于亮度调整饱和度
‌用例‌：使暗部区域降低饱和度(电影感效果)

实际应用技巧

‌电影感调色‌

使用 LumVsSat 降低暗部饱和度，HueVsHue 微调肤色

‌季节变换‌

通过 HueVsHue 将绿色变为黄色/红色模拟秋季

‌风格化效果‌

夸张的 S 形 RGB 曲线创造高对比度画面

‌色彩匹配‌

Match 功能原理，使用曲线匹配不同镜头的色彩

ColorCurves 与 Unity 的 ACES 色彩空间配合使用时效果最佳，能够保持更广色域的色彩关系

【从UnityURP开始探索游戏渲染】专栏-直达
（欢迎点赞留言探讨，更多人加入进来能更加完善这个探索的过程，🙏）

posted @ 2025-11-03 17:14 SmalBox 阅读(66) 评论(0) 收藏举报

刷新页面返回顶部

SmalBox

设计 AI 玩游戏🎮