專欄-直達

ColorCurves 是(shi) Unity 通(tong)用渲(xuan)染管線(URP)中(zhong)的(de)(de)一(yi)種高級(ji)顏(yan)色(se)分級(ji)工具，它允許通(tong)過曲線精(jing)細調整圖像(xiang)的(de)(de)色(se)相、飽和度和亮(liang)度。這種工具最初在(zai)專業影視后期軟件(如 Fusion)中(zhong)成熟應用，后被引入游戲引擎用于實時(shi)渲(xuan)染的(de)(de)色(se)彩控(kong)制。

ColorCurves 提供了8條(tiao)獨立曲線(xian)，包括(kuo)：

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

發展歷史

顏(yan)色(se)曲(qu)線(xian)技術起源于電(dian)影工業的后期(qi)(qi)調色(se)流程(cheng)，早期(qi)(qi)在(zai) DaVinci Resolve 等專業調色(se)軟(ruan)件(jian)中實(shi)現。Unity 在(zai) 2017 年引入(ru) Post-processing Stack v1 時(shi)首次包含了基(ji)礎(chu)曲(qu)線(xian)調整，2019 年 URP 正式版將其整合為(wei) ColorCurves 模(mo)塊，并增加了針(zhen)對游戲優化的 ACES 色(se)彩空間支持。

實現原理

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

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

曲線映射原理

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

貝塞爾曲線

• ?通用公式

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

  $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)卡斯(si)特里奧算法（De Casteljau's algorithm）逐步插值中間點?；

  • ?矩陣表示?：將三(san)次貝塞爾曲線表示為(wei)控制點與基(ji)函數的矩陣乘法?；

  • ?代碼示例?（Unity/C#）：（注：實(shi)際應用中需處(chu)理浮點精度和性(xing)能(neng)優(you)化）?

    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中常用亮度(du)公式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曲線同時(shi)影響所有通道

    • 作為全局亮度調整曲線，直接對RGB三通道進行統一映射。公式為：Output=f_master(Input)
    • 其中Input是原始亮度值（0-1），f_master是用戶定義的曲線函數

  • 分(fen)通(tong)道(dao)：Red/Green/Blue曲(qu)線(xian)分(fen)別處理對應通(tong)道(dao)

  • 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色彩空間處(chu)理HueVsHue等(deng)曲線

  • HSV（Hue, Saturation, Value）是一種基于人類視覺感(gan)知的直觀(guan)顏色模型，由色相（H）、飽和度（S）和明度（V）三個分量組成(cheng)?

  • 基本概念

    • ?色相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)// 藍色范圍
));

該示例通過(guo)提升(sheng)中間調藍色(se)和抑制紅色(se)飽和度(du)，實現電影級(ji)冷色(se)調效果。

伽馬校正處理

URP會(hui)在曲線(xian)處理前(qian)后自動執行伽馬/線(xian)性(xing)空(kong)間轉換，確保顏色(se)混合符合物理正確性(xing)。具體流程：

• 輸入圖像從sRGB轉為線性空間
• 應用所有曲線調整
• 結果轉換回sRGB空間輸出

性能優化

采用計算著色器并行處(chu)理(li)LUT生(sheng)成，每條曲線(xian)(xian)僅(jin)需1次紋理(li)采樣，8條曲線(xian)(xian)共產(chan)生(sheng)約0.3ms的性能開銷（1080p分辨率）。建議避免每幀動態(tai)修改(gai)曲線(xian)(xian)控制點(dian)，改(gai)為(wei)預烘焙多(duo)套曲線(xian)(xian)配(pei)置。

完整示例

• 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 色彩空間配合使(shi)用時效果最佳，能夠(gou)保持(chi)更廣色域的色彩關系

專欄-直達
（歡迎點贊留言探(tan)討(tao)，更(geng)多人(ren)加入進來能更(geng)加完善這(zhe)個探(tan)索(suo)的過程，??）