始めに

写真にフィルターをかけるために、iOSでは標準のSDKで用意されているCIFilterを使うことで、色々加工することができます。
しかし、iOSだけではなくAndroidでも同じ実装をする必要があるのはよくあることです。各OSで共通して同じ効果を得るために、画像編集ソフトなどで作成できるトーンカーブを使うと、色々な効果を再現することができます。

トーンカーブを扱うにはLUTテクスチャ画像を使用する方法や、Adobe Photoshop のACVファイルを使う方法があります。今回はSwiftでACVファイルを使って実装したので、その内容をまとめておきたいと思います。

ちなみにiOSにはGPUImageという有名なライブラリがあり、その中でもACVファイルはサポートされていて、GPUImage 3 で OpenGL -> Metal への移植が進められています。（この記事を書き始めて調べ直している間に 3 の存在を知りました…）
https://github.com/BradLarson/GPUImage3/

ACVからCIFilterにかけるまで

以下の手順を追って反映させていきます

ACVファイルからトーンカーブのポイントデータを抽出する
ポイントデータからColorCubeデータを生成する
ColorCubeデータを使ってCIFilterで画像を変換する

1. ACVファイルからトーンカーブのポイントデータを抽出する

ACVファイルには red, green, blue, composit の4要素があり、それぞれ赤、緑、青、輝度を設定できます
ImageFilter/ACVParser.swift at master · Matzo/ImageFilter · GitHub

ポイントデータは2要素ずつ x,y のペアが [x1,y1,x2,y2,...xn,yn]として以下のようになっています。

composit: [0.0, 0.12549019607843137, 0.16470588235294117, 0.14901960784313725, 0.34901960784313724, 0.2784313725490196, 0.5725490196078431, 0.5176470588235293, 1.0, 1.0]

red: [0.0, 0.0, 0.27058823529411763, 0.2901960784313725, 0.5490196078431373, 0.596078431372549, 1.0, 1.0]

green: [0.06274509803921569, 0.0, 0.2784313725490196, 0.21568627450980393, 0.5725490196078431, 0.5294117647058824, 0.8, 0.7843137254901961, 1.0, 1.0]

blue: [0.0, 0.0, 0.2549019607843137, 0.17254901960784313, 0.596078431372549, 0.5058823529411764, 0.8117647058823529, 0.788235294117647, 1.0, 1.0]

2. ポイントデータからColorCubeデータを生成する

こちらを参考にさせていただきました
GitHub - churabou/ToneCurve

その際、出力時の画像が暗くなっていたので、 Does Your App Need Color Management? こちらを参考に補正を適用しました。
ドキュメント内のコードが何やらバグってますが、正しくは以下のようです。

# Conversions from and to sRGB add to the filter complexity
rgb = mix(rgb*0.0774, pow(rgb*0.9479 + 0.05213, 2.4), step(0.04045,rgb))
rgb = mix(rgb*12.92, pow(rgb,0.4167) * 1.055 - 0.055, step(0.00313,rgb))

参考) http://docs.huihoo.com/apple/wwdc/2012/session_511__core_image_techniques.pdf の 46ページ

また、composit が反映されていなかったので、反映されるように修正しています。

    public var cubeData: Data {

        let compositeCurve = self.getPreparedSplineCurve(point: rgbCompositeCurvePoints)
        let redCurve = self.getPreparedSplineCurve(point: redCurvePoints)
        let greenCurve = self.getPreparedSplineCurve(point: greenCurvePoints)
        let blueCurve = self.getPreparedSplineCurve(point: blueCurvePoints)

        let indexs: [Int] = [  0,   8,  16,  25,  33,  41,  49,  58,
                               66,  74,  82,  90,  99, 107, 115, 123,
                               132, 140, 148, 156, 165, 173, 181, 189,
                               197, 206, 214, 222, 230, 239, 247, 255]

        let size = cubeDimension
        var colorCubeData: [Float] = []//[Float](repeatElement(0, count: size*size*size*4))

        for b in 0..<size {
            for g in 0..<size {
                for r in 0..<size {

                    // bgra for upload to texture
                    var currentCurveIndex = indexs[b]
                    let bb = fmin(fmax(Float(currentCurveIndex) + blueCurve![currentCurveIndex] + compositeCurve![currentCurveIndex], 0), 255)

                    currentCurveIndex = indexs[g]
                    let gg = fmin(fmax(Float(currentCurveIndex) + greenCurve![currentCurveIndex] + compositeCurve![currentCurveIndex], 0), 255)

                    currentCurveIndex = indexs[r]
                    let rr = fmin(fmax(Float(currentCurveIndex) + redCurve![currentCurveIndex] + compositeCurve![currentCurveIndex], 0), 255)

                    let div: Float = 1.0 / 255.0
                    colorCubeData.append(sRGB_to_lightLiner(rr*div))
                    colorCubeData.append(sRGB_to_lightLiner(gg*div))
                    colorCubeData.append(sRGB_to_lightLiner(bb*div))
                    colorCubeData.append(1)

                }
            }
        }

        return NSData(bytes: colorCubeData, length: size*size*size*4*MemoryLayout<Float>.size) as Data
    }

サンプルプロジェクト全体がこちら
https://github.com/Matzo/ImageFilter/tree/master/ImageFilter

3. ColorCubeデータを使ってCIFilterで画像を変換する

最後に、生成した ColorCubeデータを使って CIImage を変換するのがこちらです

func applyingFilter(to sourceImage: CIImage) -> CIImage {

    guard let parser = ACVParser(with: "foo.acv") else { return sourceImage }

    return sourceImage
        .applyingFilter("CIColorCubeWithColorSpace", parameters: [
            "inputCubeDimension": parser.cubeDimension,
            "inputCubeData": parser.cubeData,
            "inputColorSpace": parser.colorSpace
            ])
}

おわりに

ACVファイルの中身が思ったよりもシンプルで、ポイントデータからスプラインカーブを生成してColorCubeに変換するのが意外と力技なんだなと知りました。内部の計算で何をしているのか雰囲気しか分かってません。

LUTテクスチャを使用する方法もまたいずれまとめたいと思います。

最後に、 ACVファイルを使用したフィルターのキャプチャをサンプルとして載せておきます。

左: original、右: aurora