MTKView显示宽色域P3色彩空间

Question

我正在构建一个基于CIFilters和MetalKit的实时照片编辑器.但是我遇到了在MTKView中显示宽色域图像的问题.

标准sRGB图像显示正常,但显示P3图像被清除.

我已经尝试将CIContext.render色彩空间设置为图像颜色空间,但仍然遇到了问题.

以下是代码片段:

 guard let inputImage = CIImage(mtlTexture: sourceTexture!) else { return }
                let outputImage = imageEditor.processImage(inputImage)
                print(colorSpace)
                context.render(outputImage,
                               to: currentDrawable.texture,
                               commandBuffer: commandBuffer,
                               bounds: inputImage.extent,
                               colorSpace: colorSpace)
                commandBuffer?.present(currentDrawable)

let pickedImage = info[UIImagePickerControllerOriginalImage] as! UIImage
        print(pickedImage.cgImage?.colorSpace)
        if let cspace = pickedImage.cgImage?.colorSpace {
            colorSpace = cspace
        }

我在Apple开发者论坛上发现了类似的问题,但没有任何答案:https://forums.developer.apple.com/thread/66166

Answer 1

为了支持宽色域,您需要将colorPixelFormatMTKView设置为BGRA10_XR或bgra10_XR_sRGB.我怀疑colorSpaceiOS上不支持macOS MTKViews 的属性,因为iOS中的色彩管理不活跃但是有针对性(阅读色彩管理的最佳实践).

没有看到你的图像和他们的实际值,很难诊断,但我会解释我的发现和实验.我建议你像我一样开始调试一种颜色.

例如,P3色彩空间中最红的点是什么？它可以通过以下方式定义UIColor:

UIColor(displayP3Red: 1, green: 0, blue: 0, alpha: 1)

将UIButton添加到视图中,并将背景设置为该颜色以进行调试.您可以在代码中获取组件以查看这些值在sRGB中的含义,

    var fRed : CGFloat = 0
    var fGreen : CGFloat = 0
    var fBlue : CGFloat = 0
    var fAlpha : CGFloat = 0
    let c = UIColor(displayP3Red: 1, green: 0, blue: 0, alpha: 1)
    c.getRed(&fRed, green: &fGreen, blue: &fBlue, alpha: &fAlpha)

或者您可以在macOS Color Sync Utility中使用计算器,

确保选择" 扩展范围",否则值将被钳制为0和1.

因此,正如您所看到的,您的P3(1,0,0)对应于扩展sRGB中的(1.0930,-0.2267,-0.1501).

现在,回到你的MTKView,

• 如果将MTKView的colorPixelFormat设置为.BGRA10_XR,则如果着色器的输出为,则获得最亮的红色,

  (1.0930,-0.2267,-0.1501)

• 如果colorPixelFormat将MTKView 设置为.bgra10_XR_sRGB,则如果着色器的输出为,则获得最亮的红色,

  (1.22486,-0.0420312,-0.0196301)

  因为你必须写一个线性RGB值,因为这种纹理格式将为你应用伽马校正.应用反伽马时要小心,因为有负值.我用这个功能,

  let f = {(c: Float) -> Float in
      if fabs(c) <= 0.04045 {
          return c / 12.92
      }
      return sign(c) * powf((fabs(c) + 0.055) / 1.055, 2.4)
  }
  

最后一个缺失的部分是创建一个广泛的色域UIImage.将颜色空间设置为CGColorSpace.displayP3并复制数据.但是有什么数据呢？这张照片中最亮的红色将是

(1, 0, 0)

或(65535,0,0)以16位整数形式.

我在我的代码中做的是使用.rgba16Unorm纹理来处理displayP3颜色空间中的图像,其中(1,0,0)将是P3中最亮的红色.这样,我可以直接将其内容复制到一个UIImage.然后,为了显示,我将颜色转换传递给着色器,以便在显示之前从P3转换为扩展的sRGB(因此,不是饱和的颜色).我使用线性颜色,所以我的变换只是一个3x3矩阵.我将视图设置为.bgra10_XR_sRGB,因此伽玛将自动应用于我.

那个(列主要)矩阵是,

 1.2249  -0.2247  0
-0.0420   1.0419  0
-0.0197  -0.0786  1.0979

您可以在此处阅读我如何生成它:探索display-P3颜色空间

这是我使用UIButtons和MTKView构建的示例,在iPhoneX上进行屏幕捕获,

左侧的按钮是sRGB上最亮的红色,而右侧的按钮是使用displayP3颜色.在中心,我放置了一个MTKView,它输出如上所述的变换后的线性颜色.

同样的绿色实验,

现在,如果你在最近的iPhone或iPad上看到这个,你应该看到中间的正方形和右边的按钮都有相同的亮色.如果您在无法显示它们的Mac上看到此内容,左侧按钮将显示相同的颜色.如果你在没有正确色彩管理的Windows机器或浏览器中看到这个,左边的按钮也可能看起来颜色不同,但这只是因为整个图像被解释为sRGB,显然这些像素有不同的值......但外观不正确.

如果你想要更多参考,请检查testP3UIColor我在这里添加的单元测试:ColorTests.swift,

我的函数初始化UIImage:Image.swift,

和一个试用转换的示例应用程序:SampleColorPalette

我没有尝试过CIImages,但我想同样的原则也适用.

我希望这些信息有所帮助.我花了很长时间才弄清楚如何正确显示颜色,因为我在Metal SDK文档中找不到任何对displayP3支持的明确引用.