【URP】Unity[后處理]顏色曲線ColorCurves

ColorCurves 是 Unity 通用渲染管線(URP)中的一種高級顏色分級工具，它允許通過曲線精細調(diào)整圖像的色相、飽和度和亮度。這種工具最初在專業(yè)影視后期軟件(如 Fusion)中成熟應(yīng)用，后

【從UnityURP開始探索游戲渲染】專欄-直達

ColorCurves 是 Unity 通用渲染管線(URP)中的一種高級顏色分級工具，它允許通過曲線精細調(diào)整圖像的色相、飽和度和亮度。這種工具最初在專業(yè)影視后期軟件(如 Fusion)中成熟應(yīng)用，后被引入游戲引擎用于實時渲染的色彩控制。

ColorCurves 提供了8條獨立曲線，包括：

Master(整體亮度)
- ?功能?：整體調(diào)整圖像的亮度和對比度。
- ?實現(xiàn)?：通過調(diào)整曲線形狀控制全局亮度，曲線向上提升亮度，向下降低亮度
Red/Green/Blue(單通道調(diào)整，三條曲線)
- 功能?：分別單獨調(diào)整紅、綠、藍通道的亮度和色彩平衡。
- ?實現(xiàn)?：針對分量進行獨立調(diào)節(jié)，影響圖像中紅、綠藍區(qū)域的顯色強度
HueVsHue(色調(diào)替換 色相-色相曲線)
- ?功能?：基于色相替換顏色（如將紅色替換為藍色）。
- ?實現(xiàn)?：通過映射原始色相到目標(biāo)色相，實現(xiàn)顏色轉(zhuǎn)換
HueVsSat(色調(diào)飽和度調(diào)整 色相-飽和度曲線)
- 功能?：根據(jù)色相調(diào)整特定顏色的飽和度。
- ?實現(xiàn)?：選擇特定色相范圍后，增加或降低其飽和度
SatVsSat(飽和度對比 飽和度-飽和度曲線)
- ?功能?：基于當(dāng)前飽和度進一步調(diào)整飽和度。
- ?實現(xiàn)?：對低飽和度區(qū)域增強或高飽和度區(qū)域抑制，實現(xiàn)非線性調(diào)整
LumVsSat(亮度飽和度關(guān)系 亮度-飽和度曲線)
- 功能?：根據(jù)亮度調(diào)整飽和度（如增強暗部飽和度）。
- ?實現(xiàn)?：在低亮度區(qū)域提升飽和度以增強視覺對比，或在高亮度區(qū)域降低飽和度避免過曝

發(fā)展歷史

顏色曲線技術(shù)起源于電影工業(yè)的后期調(diào)色流程，早期在 DaVinci Resolve 等專業(yè)調(diào)色軟件中實現(xiàn)。Unity 在 2017 年引入 Post-processing Stack v1 時首次包含了基礎(chǔ)曲線調(diào)整，2019 年 URP 正式版將其整合為 ColorCurves 模塊，并增加了針對游戲優(yōu)化的 ACES 色彩空間支持。

實現(xiàn)原理

ColorCurves 在渲染管線的后處理階段工作，位于色調(diào)映射之前。它通過以下步驟實現(xiàn)：

將輸入圖像分解為 HSL 分量
對每個分量應(yīng)用預(yù)定義的曲線變換
重新組合分量并輸出到下一處理階段

曲線映射原理

ColorCurves通過8條獨立曲線對圖像進行分通道處理，每條曲線采用256個控制點的查找表(LUT)實現(xiàn)非線性映射。例如Master曲線采用x軸(輸入亮度)到y(tǒng)軸(輸出亮度)的映射關(guān)系，通過貝塞爾插值算法實現(xiàn)平滑過渡。

貝塞爾曲線

?通用公式

對于n階貝塞爾曲線，其參數(shù)方程為：

$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}$為組合數(shù)；
- t為參數(shù)，控制曲線上的位置?。
?常見類型?
- ?線性 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$
  - 三次貝塞爾曲線因平衡計算復(fù)雜性和靈活性，成為圖形學(xué)中最常用的類型?
實現(xiàn)方法
- ?遞歸計算?：通過德卡斯特里奧算法（De Casteljau's algorithm）逐步插值中間點?；
- ?矩陣表示?：將三次貝塞爾曲線表示為控制點與基函數(shù)的矩陣乘法?；
- ?代碼示例?（Unity/C#）：（注：實際應(yīng)用中需處理浮點精度和性能優(yōu)化）?
```
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色彩空間的人眼感知權(quán)重

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); // 灰度輸出
}

?曲線應(yīng)用?：
- 主通道：Master曲線同時影響所有通道
  - 作為全局亮度調(diào)整曲線，直接對RGB三通道進行統(tǒng)一映射。公式為：Output=f_master(Input)
  - 其中Input是原始亮度值（0-1），f_master是用戶定義的曲線函數(shù)
- 分通道：Red/Green/Blue曲線分別處理對應(yīng)通道
- HueVsHue曲線
  - 實現(xiàn)色相替換效果，通過角度偏移改變特定色相。HSV空間中的公式：H_out=H_in+f_hue(H_in)?360°
  - f_hue是定義在0-1范圍的曲線，輸出值作為角度偏移量。
- HueVsSat曲線
  - 控制不同色相區(qū)域的飽和度增強/減弱: S_out=S_in?(1+f_sat(H_in))
  - f_sat曲線輸出-1到1的值，負(fù)值降低飽和度，正值增加。
- SatVsSat曲線
  - 非線性調(diào)整飽和度分布：S_out=f_satmap(S_in)
  - 直接重映射飽和度值，常用于創(chuàng)建啞光效果。
- LumVsSat曲線
  - 基于亮度控制飽和度：S_out=S_in?(1+f_lum(L_in))
  - L_in是HSL亮度值，f_lum曲線控制不同亮度區(qū)域的飽和度變化
- ColorCurves.hlsl
  - 使用紋理采樣實現(xiàn)曲線查找，提升GPU執(zhí)行效率
  - RgbToHsv/HsvToRgb需自行實現(xiàn)標(biāo)準(zhǔn)色彩空間轉(zhuǎn)換
  - 曲線參數(shù)通過紋理傳入，支持任意形狀的調(diào)整曲線
  - 最終效果是各曲線調(diào)整的疊加組合
  - 在C#中可通過Shader.SetGlobalTexture傳遞曲線紋理，或在CPU端實現(xiàn)類似算法處理圖像數(shù)據(jù)。實際應(yīng)用時通常配合UI控件讓用戶交互式調(diào)整曲線形狀。
```
// 輸入?yún)?shù)
Texture2D InputTexture;
SamplerState LinearSampler;
float4 HueVsHueCurve; // 曲線采樣紋理
float4 HueVsSatCurve;
float4 SatVsSatCurve;
float4 LumVsSatCurve;

float3 ApplyColorCurves(float3 rgb)
{
    // 轉(zhuǎn)換到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);
}

// 輔助函數(shù)
float SampleCurve(float4 curve, float x)
{
    return curve.SampleLevel(LinearSampler, float2(x, 0), 0).r;
}
```
?色相轉(zhuǎn)換?：將RGB轉(zhuǎn)換為HSV色彩空間處理HueVsHue等曲線
- HSV（Hue, Saturation, Value）是一種基于人類視覺感知的直觀顏色模型，由色相（H）、飽和度（S）和明度（V）三個分量組成?
- 基本概念
  - ?色相H?：表示顏色類型，取值范圍0°-360°（如紅色0°、綠色120°、藍色240°），通過色輪角度定位顏色?。
  - ?飽和度S?：表示顏色純度，0%為灰色，100%為純色，數(shù)值越高顏色越鮮艷?。
  - ?明度V?：控制顏色亮度，0%為黑色，100%為最亮（如白色需S=0%、V=100%）?
- 模型特點
  - ?六角錐體結(jié)構(gòu)?：從RGB立方體演化而來，色調(diào)H沿圓周分布，飽和度S和明度V分別表示徑向和軸向距離?。
  - ?符合直覺?：比RGB更接近傳統(tǒng)繪畫調(diào)色習(xí)慣，適合直觀調(diào)整顏色屬性（如Photoshop調(diào)色板）?。
  - ?分量獨立?：亮度V與顏色無關(guān)，僅影響光照強度；色調(diào)H和飽和度S互不干擾?
- RGB轉(zhuǎn)HSV
- HSV轉(zhuǎn)RGB
- ColorSpace.hlsl
```
// RGB轉(zhuǎn)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轉(zhuǎn)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;
}
```

示例：實現(xiàn)冷色調(diào)增強

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

// 調(diào)整藍色通道曲線
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)// 藍色范圍
));

該示例通過提升中間調(diào)藍色和抑制紅色飽和度，實現(xiàn)電影級冷色調(diào)效果。

伽馬校正處理

URP會在曲線處理前后自動執(zhí)行伽馬/線性空間轉(zhuǎn)換，確保顏色混合符合物理正確性。具體流程：

輸入圖像從sRGB轉(zhuǎn)為線性空間
應(yīng)用所有曲線調(diào)整
結(jié)果轉(zhuǎn)換回sRGB空間輸出

性能優(yōu)化

采用計算著色器并行處理LUT生成，每條曲線僅需1次紋理采樣，8條曲線共產(chǎn)生約0.3ms的性能開銷（1080p分辨率）。建議避免每幀動態(tài)修改曲線控制點，改為預(yù)烘焙多套曲線配置。

完整示例

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");

        // 設(shè)置曲線參數(shù)
        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));

        // 執(zhí)行后處理
        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 中創(chuàng)建 Volume 對象并添加 Color Curves 效果
調(diào)整各條曲線參數(shù)
通過預(yù)覽窗口實時查看效果

參數(shù)詳解與用例

Master 曲線

?作用?：全局亮度調(diào)整
?用例?：修正整體曝光不足或過曝的場景

RGB 曲線(Red/Green/Blue)

?作用?：單獨調(diào)整各顏色通道
?用例?：修正色偏或創(chuàng)造風(fēng)格化效果(如賽博朋克的藍色調(diào))

HueVsHue

?作用?：基于輸入色調(diào)替換輸出色調(diào)
?用例?：將綠色植被改為秋季黃色

HueVsSat

?作用?：調(diào)整特定色調(diào)的飽和度
?用例?：增強天空藍色飽和度而不影響其他顏色

SatVsSat

?作用?：調(diào)整飽和度對比
?用例?：使高飽和區(qū)域更鮮艷，低飽和區(qū)域更灰

LumVsSat

?作用?：基于亮度調(diào)整飽和度
?用例?：使暗部區(qū)域降低飽和度(電影感效果)

實際應(yīng)用技巧

?電影感調(diào)色?

使用 LumVsSat 降低暗部飽和度，HueVsHue 微調(diào)膚色

?季節(jié)變換?

通過 HueVsHue 將綠色變?yōu)辄S色/紅色模擬秋季

?風(fēng)格化效果?

夸張的 S 形 RGB 曲線創(chuàng)造高對比度畫面

?色彩匹配?

Match 功能原理，使用曲線匹配不同鏡頭的色彩

ColorCurves 與 Unity 的 ACES 色彩空間配合使用時效果最佳，能夠保持更廣色域的色彩關(guān)系

【從UnityURP開始探索游戲渲染】專欄-直達
（歡迎點贊留言探討，更多人加入進來能更加完善這個探索的過程，??）

posted @ 2025-11-03 17:14 SmalBox 閱讀(68) 評論(0) 收藏舉報

刷新頁面返回頂部

SmalBox

設(shè)計 AI 玩游戲??