[WPF] MediaElement播放HDR視頻泛黃、顏色顯示不正確應該如何解決？

當我們在使用MediaElement控制項播放HDR視頻時會遇到顏色發灰、泛黃的情況，難道是因為控制項做的有問題？

其實並不是程式問題，只是我們普通的應用程式工作在8bit色深的環境中，而HDR色深為10bit起步。

HDR視頻色彩空間為BT.2020 10bit色深。

SDR視頻（一般視頻）色彩空間基本為BT.709 8bit色深。

當解析出視頻幀渲染時，錯誤的將10bit色深的幀渲染到8bit上，這就會導致顏色顯示不正確的問題。

所以我們需要將顏色進行校正，使視頻看起來跟原來一致。（BT.2020 -> BT.709）

錯誤的渲染：

 校正後：

接下來我們瞭解下如何將視頻顏色校正。

沒有接觸過Shader的同學請移步至WPF 像素著色器入門：使用 Shazzam Shader Editor 編寫 HLSL 像素著色器代碼 - walterlv。

看完後請打開Shazzam 1.5 - Shader Editor軟體，版本無所謂。

1.首先我們新建一個shader 起名為hdr2sdr.fx，接下來我們來編寫shader。

 2. 創建這四個可變參數。

float toneP1 : register(C1);
float toneP2 : register(C2);
float contrast : register(C3);
float brightness : register(C4);

toneP1、toneP2是根據視頻的最大亮度計算得出（後面會放上計算公式）。

contrast、brightness分別為對比度和曝光度，這兩個值為可調參數。

3. 創建常量值。

// HDR to SDR color convert (Thanks to KODI community https://github.com/thexai/xbmc)
static const float ST2084_m1 = 2610.0f / (4096.0f * 4.0f);
static const float ST2084_m2 = (2523.0f / 4096.0f) * 128.0f;
static const float ST2084_c1 = 3424.0f / 4096.0f;
static const float ST2084_c2 = (2413.0f / 4096.0f) * 32.0f;
static const float ST2084_c3 = (2392.0f / 4096.0f) * 32.0f;

static const float4x4 bt2020tobt709color =
{
    {  1.660490f, -0.124550f, -0.018150f, 0.000000f },
    { -0.587641f,  1.132899f, -0.100578f, 0.000000f },
    { -0.072849f, -0.008349f,  1.118729f, 0.000000f },
    {  0.000000f,  0.000000f,  0.000000f, 1.000000f }
};

這些是用於色彩空間轉換必備的參數，看最後一個矩陣就知道這是本文的核心內容。

4. 編寫代碼

float3 inversePQ(float3 x)
{
    x = pow(max(x, 0.0f), 1.0f / ST2084_m2);
    x = max(x - ST2084_c1, 0.0f) / (ST2084_c2 - ST2084_c3 * x);
    x = pow(x, 1.0f / ST2084_m1);
    return x;
}

float3 hable(float3 x)
{
    const float A = 0.15f;
    const float B = 0.5f;
    const float C = 0.1f;
    const float D = 0.2f;
    const float E = 0.02f;
    const float F = 0.3f;
    return ((x * (A * x + C * B) + D * E) / (x * (A * x + B) + D * F)) - E / F;
}

float4 main(float2 uv : TEXCOORD) : COLOR 
{
    float4 color; 
    color= tex2D(input , uv.xy);
    
    // BT2020 -> BT709
  color.rgb = pow(max(0.0, color.rgb), 2.4f);
  color.rgb = max(0.0, mul(color, bt2020tobt709color).rgb);
  color.rgb = pow(color.rgb, 1.0f / 2.2f);
  
  color.rgb = inversePQ(color.rgb);
    color.rgb *= toneP1;
    color.rgb = hable(color.rgb * toneP2) / hable(toneP2);
    color.rgb = pow(color.rgb, 1.0f / 2.2f);
    
    color *= contrast * 2.0f;
  color += brightness - 0.5f;

    return color; 
}

別問我為啥這麼寫，我也是抄的。

ok，這個時候shader就算是編寫完畢了，接下來如何使用shader，還是請各位仔細看看我上面發的鏈接，使用方式是一樣的。

5. 獲取視頻亮度

首先我們要先獲取hdr視頻的最大亮度，我這邊使用的MediaInfo，這個庫可以解析視頻的元數據。

 註意，有些視頻的元數據並不正確（一般HDR視頻的最大亮度為1000cd/m2）。

6. 創建MediaElement控制項，傳入播放地址。

MediaElement mediaElement = new()
                {
                    LoadedBehavior = MediaState.Play,
                    Source = new Uri(openFileDialog.FileName)
                };

7.MediaElement使用Effect

Hdr2sdrEffect sdrEffect = new()
                    {
                        ToneP1 = Convert.ToSingle(10000.0f / maxLuminance * (2.0f / 1.4f)),
                        ToneP2 = Convert.ToSingle(maxLuminance / (100.0f * 1.4f)),
                        Contrast = 0.5f,
                        Brightness = 0.5f
                    };
                    mediaElement.Effect = sdrEffect;

在創建Hdr2sdrEffect時，計算出toneP1和toneP2。

教程到此結束！！！

運行程式，接下來你會看到轉換後的視頻。

這是為轉換前的：

 如果小伙伴懶得寫代碼，可以git上拉下我寫的demo。

qian-o/MediaWPF: WPF 視頻硬解碼渲染Demo (github.com)

該項目包含了OpenGL、DirectX、MediaElement、Skia的視頻渲染方式，除了Skia剩下的模式均支持HDR。

本文如有說不對或誤導他人的地方，希望各位能幫我及時指正。