- A+
当我们在使用MediaElement控件播放HDR视频时会遇到颜色发灰、泛黄的情况，难道是因为控件做的有问题？
其实并不是程序问题，只是我们普通的应用程序工作在8bit色深的环境中，而HDR色深为10bit起步。
HDR视频色彩空间为BT.2020 10bit色深。
SDR视频（一般视频）色彩空间基本为BT.709 8bit色深。
当解析出视频帧渲染时，错误的将10bit色深的帧渲染到8bit上，这就会导致颜色显示不正确的问题。
所以我们需要将颜色进行校正，使视频看起来跟原来一致。（BT.2020 -> BT.709）
错误的渲染：
![[WPF] MediaElement播放HDR视频泛黄、颜色显示不正确应该如何解决？](https://www.ztsky.cn/wp-content/uploads/2022/12/20221215_639aa599a4546.png)
校正后：
![[WPF] MediaElement播放HDR视频泛黄、颜色显示不正确应该如何解决？](https://www.ztsky.cn/wp-content/uploads/2022/12/20221215_639aa59c6997b.png)
接下来我们了解下如何将视频颜色校正。
没有接触过Shader的同学请移步至WPF 像素着色器入门：使用 Shazzam Shader Editor 编写 HLSL 像素着色器代码 - walterlv。
看完后请打开Shazzam 1.5 - Shader Editor软件，版本无所谓。
1.首先我们新建一个shader 起名为hdr2sdr.fx，接下来我们来编写shader。
![[WPF] MediaElement播放HDR视频泛黄、颜色显示不正确应该如何解决？](https://www.ztsky.cn/wp-content/uploads/2022/12/20221215_639aa59dddd5f.png)
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，这个库可以解析视频的元数据。
![[WPF] MediaElement播放HDR视频泛黄、颜色显示不正确应该如何解决？](https://www.ztsky.cn/wp-content/uploads/2022/12/20221215_639aa59f6e6ac.png)
注意，有些视频的元数据并不正确（一般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。
教程到此结束！！！
运行程序，接下来你会看到转换后的视频。
![[WPF] MediaElement播放HDR视频泛黄、颜色显示不正确应该如何解决？](https://www.ztsky.cn/wp-content/uploads/2022/12/20221215_639aa5a304a07.png)
这是为转换前的：
![[WPF] MediaElement播放HDR视频泛黄、颜色显示不正确应该如何解决？](https://www.ztsky.cn/wp-content/uploads/2022/12/20221215_639aa5a57ca46.png)
如果小伙伴懒得写代码，可以git上拉下我写的demo。
qian-o/MediaWPF: WPF 视频硬解码渲染Demo (github.com)
该项目包含了OpenGL、DirectX、MediaElement、Skia的视频渲染方式，除了Skia剩下的模式均支持HDR。
本文如有说不对或误导他人的地方，希望各位能帮我及时指正。
