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

为了支持广泛的色域，您需要将MTKView的colorPixelFormat设置为BGRA10_XR或bgra10_XR_sRGB。我怀疑iOS上不支持macOS MTKViews的colorSpace属性，因为iOS中的色彩管理不是活动而是有针对性（阅读Best practices for color management ）。

在没有看到你的图像及其实际值的情况下，很难诊断，但我会解释我的发现和实验。我建议你像我一样开始调试一种颜色。

例如，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）
如果您将MTKView的colorPixelFormat设置为.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

您可以在此处了解我如何生成它：Exploring the display-P3 color space

以下是我使用UIButtons和MTKView构建的示例，在iPhoneX上进行了屏幕捕获，

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

相同的绿色实验，

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

如果您想要更多参考资料，请查看我在此处添加的testP3UIColor单元测试：ColorTests.swift，

我的功能是初始化UIImage：Image.swift，

以及试用转化的示例应用：SampleColorPalette

我没有尝试CIImages，但我想同样的原则适用。

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

MTKView显示宽色域P3色彩空间

1 个答案: