Core Image、Metal、SwiftUIでのEDRコンテンツの表示

Core Image、Metal、SwiftUIでのEDRコンテンツの表示

Core ImageベースのマルチプラットフォームSwiftUI Appから、レンダリングのサポートにExtended Dynamic Range（EDR）を追加する方法をご覧ください。ここでは、ViewRepresentableを使用して、CIImagesをMTKViewに表示するベストプラクティスを紹介します。また、EDRレンダリングを有効化する簡単な手順や、EDRをサポートする内蔵CIFilter（150個以上）の例も紹介します。

リソース
- Core Image
- Generating an animation with a Core Image Render Destination
関連ビデオ

Tech Talks
- リファレンスモードについて
WWDC22
ようこそDavid Haywardです Core Imageチームのソフトウェアエンジニアです拡張ダイナミックレンジコンテンツを Core Imageで表示する方法をご説明します４つのパートに分けてお話ししていきますまず当社プラットフォームにおける EDRの重要な用語についてご紹介します次は新しいCore Imageのサンプルプロジェクトでの EDRのサポートの追加方法を説明します最後にCIFiltersを使用してEDRコンテンツを生成する画像を作成する方法を紹介します
では重要な用語についてご説明します SDRとは RGBの黒を０白を１として正規化して表現する従来の方法ですこれに対し EDRは通常の範囲を超えて RGBの色を表現するために推奨されている方法です
SDRと同様 0が黒1がSDRの白と同じ明るさを表しますしかし EDRでは1より大きな値を使用してさらに明るい画素を表現することができます
ただし1より大きな値も許容されますがヘッドルームを超える値はクリップされることに注意してください
ヘッドルームはディスプレイの最大Nitsを SDRホワイトのNitsで割ったものです
ヘッドルームの値はディスプレイの種類や明るさの変化周囲の状況で変わることがあります
「iOSのEDRについて詳しく見る」でより深くご理解いただけると思います EDRコンテンツにはいくつかのソースがあります TIFFやOpenEXRなどのファイルフォーマットは EDR用の浮動小数点値を格納することができます
AVFoundationでHDRビデオからフレームを取得します
Metal APIは EDR環境をテキスチャにレンダリングします ProRAWのDNGファイルはEDRを格納できます
「ProRAW画像の撮影と処理」もご覧ください
次のパートではSwiftUI Appで Core ImageをMetalと併用する方法を説明します後でEDR対応を追加する方法についても紹介します
SwiftUI のマルチプラットフォームAppで Core Image と Metal Kit View を組み合わせる新しいサンプルコードを最近リリースしましたぜひダウンロードしてコードをご覧くださいこの場を借りて見た目と機能についてご紹介します
サンプルはMetalビューに表示されるアニメーション化されたCIImageを描画します最適な機能実現のために MTKViewを使用しています Appが必要とするコンテンツのプロキシとしてアニメのチェッカーボードCIImageを表示します
SwiftUIを採用しているため macOS iOS iPadOSの各プラットフォームで共通のコードベースを使用することができます
これはいくつかの短いソースファイルから構築されていますクラスがどのように相互作用するか説明します
このAppには３つの重要なパーツがありますまず最も重要なのは「MetalView」です MTKViewクラスをラップする SwiftUIと互換性があるView実装を提供します
MTKViewクラスはmacOSのNSViewと他のプラットフォームの UIViewがベースとなっているため MetalView実装はViewRepresentableを使って SwiftUIとMTKViewクラスの間をブリッジします
ただしMTKViewが直接レンダリングをしません代わりにデリゲートを使って作業を行います
レンダラクラスがMTKViewのデリゲートです Metalコマンドキューや Core Imageコンテキスト等のグラフィックス状態オブジェクトの初期化を担当します
必要なdraw()メソッドも実装しています
しかしレンダラがどのような画像を描画するか決定するわけではありません imageProviderブロックを使い描画するCIImageを取得します
ContentViewクラスがレンダリングされるCIImageを提供するコードブロックを実装しています
MetalViewはデリゲートを呼び出して描画します Rendererのdraw()メソッドは ContentViewを呼び出して描画する画像を提供します
3つのクラスのコードについてもう少し詳しく説明しますまず MetalViewクラスです makeView()のコードから MTKViewを作成するためにmakeView()を呼んでデリゲートをレンダラステートオブジェクトに設定します NSView や UIView をラップした SwiftUI のビューを実装するための標準的なアプローチです
次にpreferredFramesPerSecondですビューのレンダリング頻度を指定しますこのプロパティはビューの描画を駆動するものを決定するため重要ですこの仕組みについて説明します
コードはview.preferredFramesPerSecondを目的のフレームレートに設定します
この設定によりMTKViewはビュー自体が描画イベントのタイミングを駆動するように構成されます
レンダリングデリゲートが定期的にdraw()を実行し現在時刻のCIImageを作成するように要求します
アニメーションが一時停止するまで繰り返されます
また画像編集Appの場合ビューを描画するタイミングを操作するためにユーザーがコントロールを操作するのが最適です
enableSetNeedsDisplayをtrueに設定するとタイミングを駆動できるように MTKViewが構成されますコントロール移動時は updateView()を呼び出し
ビューのデリゲートが draw()を1回呼び出します
各描画はコンテンツプロバイダーに現在の制御状態のCIImageを作成するように要求します
このアプローチはビデオフレームの到着が描画イベントを駆動する場合にも適しています
MetalViewクラスについては以上ですレンダラデリゲートで最も重要なコードは draw()メソッドです
周期的なフレームレートで呼びだされます draw()メソッドが呼び出されるとディスプレイの解像度を反映するコンテンツのスケールファクターを決定する必要があります CIImagesはポイントではなくピクセルで測定するからですビューが別のディスプレイに移動されるとプロパティが変更される可能性があるため draw()メソッドを呼び出すたびに行うことが重要です
次にmtlTextureProviderを使って CIRenderDestinationを作成します
コンテンツプロバイダーを呼び出して現在の時間とスケールファクターに使うCIImageを作成しますこの画像はビューの可視領域でセンタリングされ不透明な背景の上にブレンドそしてCIImageをビューデスティネーションにレンダリングを開始します
ContentViewクラスで最も重要なコードは init()メソッドです
コンテンツビューの本体を作成するためのものですレンダラクラスと MetalViewクラスの接続が確立されます
はじめに画像プロバイダーブロックでレンダラオブジェクトを作成します
そのブロックは要求された時間とスケールの CIImageを返す役割を果たします
最後にContentViewの本体をレンダラを使用するMetalViewに設定します
これでCore Imageを使用してレンダリングできるシンプルなSwiftUI Appができました次にEDRヘッドルームを使うレンダリングに対応させます
EDR対応にするのはとても簡単です 1番はEDR用のビューの初期化２番は毎回のレンダリング前にヘッドルームを計算３番はヘッドルームを使用する CIImage を構築します実際のコードをご覧ください MetalView クラスに1つ追加事項がありますビューを作成するとき必要なレイヤーに ExtendedDynamicRangeContent を通知しそのpixelFormatが .rgba16Floatであり色空間が拡張されてリニアであるとビューに通知する必要があります
次にレンダラクラスのdraw()メソッドにいくつかの変更が必要です
draw()メソッドではビューの現在の画面を取得し画面に現在のEDRヘッドルームを要求するコードを追加する必要があります
ヘッドルームは画像プロバイダブロックにパラメーターとして渡されます draw()メソッドを呼び出すたびに行いますヘッドルームは周囲の状況やディスプレイの輝度の変化に応じて変化する動的な特性があります
3つ目の変更点はContentViewクラスのプロバイダブロックです
ここでヘッドルーム引数をブロック宣言に追加します CIFiltersでヘッドルームを使って EDRディスプレイで見栄えする CIImageを返しますこのAppにEDRサポートを追加する 3つの簡単なステップをまとめます EDRのビューを初期化すべてのレンダリングの前にヘッドルームを決定ヘッドルームを指定してCIImageを構築しますこれが後半のトピックです EDRに対応したのでCIFiltersを使って CIImagesを作り EDRコンテンツを表示します
コアイメージに搭載された 150種類以上のフィルターが EDRに対応していますつまりこれらのフィルタは EDRコンテンツを含む画像を生成するか EDRコンテンツを含む画像を処理することができます CIcolorcontrolsと CIExposureAdjustフィルターを使って EDRカラーの画像の輝度色相彩度コントラストを変更できますグラデーションフィルターなど使って EDRのカラーパラメーターを指定し画像を生成できます
3つの新しいフィルターも EDR画像に対応しています CIAreaLogarithmicHistogramは任意の範囲の輝度値に対するヒストグラムを生成することができます
CIColorCubeフィルターは EDR入力画像対応するため今年更新されたフィルターの１つです
Core Imageの作業色空間は固定しておらず線形なので 0~1の範囲外のRGB値も許容されるため内蔵フィルターがすべて機能しますフィルターがEDR対応しているか確認できます
フィルタのインスタンスを作成しフィルターの属性にそのカテゴリーを尋ねてから配列に kCICategoryHighDynamic Rangeがあるか確認しますその他追加した新機能はCIFilter変数の XcodeQuickLookデバッグサポートです各入力パラメーターのカテゴリーと要件を含む各Filterクラスのドキュメントを表示します
これらのEDRフィルターがあればコンテンツに適用できる効果は無限に広がります今日説明する例ではサンプルAppの市松模様に明るい鏡面反射を伴う波紋効果を追加してみます
この効果を作成するには rippleTransitionフィルターのインスタンスが必要です
入力画像とターゲット画像をチェッカー画像に設定します
次に波紋の中心時間と遷移時間を制御するフィルター入力を設定します
そして波紋に鏡面反射ハイライトを発生させるグラデーションを shadingImageに設定します
最後に設定したすべてのフィルター入力を指定してフィルターにoutputImageを要求します
また波紋効果の鏡面反射ハイライトを作成するために使用する shadingImageの作成方法について説明しますビットマップデータから作成もできますが CIImageを生成してパフォーマンスを向上します
linearGradientフィルタのインスタンスを作成します 2つのポイントと2つのCIColorを指定して
グラデーションを作成します鏡面反射光を白にし現在のヘッドルームに基づいた明るさで妥当な最大値に制限する必要があります
使用するリミットは適用するエフェクトの外観によって異なります
color0は固定されていない線形色空間で白レベルを使用して作成します
color1はクリアカラーに設定されています
Point0とpoint1は鏡面反射光を左上方向から表示するように座標に設定されています
フィルターのoutputImageが波紋フィルターに必要なサイズにトリミングされます
結果として生じる鏡面反射効果のある波紋は単純なプロキシに過ぎませんこれは重要な原則を示しています通常明るい画素は適度に使用します少ないほうがいいのです明るい画素の方がインパクトがあります
2つの内蔵CIFiltersを使うAppが完成しました他の内蔵EDRフィルターも試してみてください次に CIColorCubeフィルタの最適な使用方法と独自のフィルタを作成する際の注意点について説明します
IColorCubeWithColorSpaceは大変人気あるフィルタです SDR画像に外観を適用するために使用されます Process Instant Tonalなどの効果を写真Appに実装するためにも使用されます
このような外観に使うキューブデータには０から１の範囲のRGBカラーしか入出力できないという重大な制約がありました
制限を回避する一つの方法としては CIColorCubeWithColorSpaceフィルターで EDR色空間を使用するように指示をします
最適な結果をもたらすように色空間範囲に有効な新しいキューブデータを作成する必要がありますキューブのサイズを増やす必要があるかもしれません代わりにSDRキューブデータを使えます SDRキューブデータ推定とフィルターに指示できます機能を有効にするには SDRキューブデータを設定しますフィルターの新しいextrapolate プロパティを設定します
「true」に設定するとフィルターに EDR入力画像を与えられて EDR出力画像を得られます
最後のトピックは独自のカスタムCIKernelを作成する場合の最適な方法についてです
まずカーネルのコードを見直して clamp min maxなどの関数で RGBの値を0から1の範囲に制限するような計算が行われていないかを確認します
多くの場合制限は安全に取り除くことができカーネルは正しく機能します
RGB値が0~1の範囲を超える可能性がある場合でもアルファ値は0~1の間でなければなりませんそうしないと画像をブレンドまたは表示するときに未定義の動作が発生します
正しい動作はRGB値に5を乗じるだけなのにカーネルが誤ってアルファチャンネルに 5を乗じてしまっています
以上でプレゼンテーションを終わります今日はCore Image SwiftUI Appに EDRヘッドルームのサポートを追加する方法と EDRコンテンツを作成変更するために様々な内蔵CIFiltersを使用する方法を学びましたご視聴ありがとうございました

// Metal View

struct MetalView: ViewRepresentable {
    
    @StateObject var renderer: Renderer
    
    func makeView(context: Context) -> MTKView {
        let view = MTKView(frame: .zero, device: renderer.device)
       
        view.delegate = renderer

        // Suggest to Core Animation, through MetalKit, how often to redraw the view.
        view.preferredFramesPerSecond = 30
       
        // Allow Core Image to render to the view using Metal's compute pipeline.
        view.framebufferOnly = false
        
       return view
    }

7:12 - Renderer

// Renderer

func draw(in view: MTKView) {
  if let commandBuffer = commandQueue.makeCommandBuffer(),
     let drawable = view.currentDrawable {
      // Calculate content scale factor so CI can render at Retina resolution.
  #if os(macOS)
      var contentScale = view.convertToBacking(CGSize(width: 1.0, height: 1.0)).width
  #else
      var contentScale = view.contentScaleFactor
  #endif

      let destination = CIRenderDestination(width: Int(view.drawableSize.width),
                          height: Int(view.drawableSize.height), 
                          pixelFormat: view.colorPixelFormat,
                          commandBuffer: commandBuffer,
                          mtlTextureProvider: { () -> MTLTexture in
                                   return drawable.texture
                          })
       
      let time = CFTimeInterval(CFAbsoluteTimeGetCurrent() - self.startTime)

      // Create a displayable image for the current time.
      var image = self.imageProvider(time, contentScaleFactor)

      image = image.transformed(by: CGAffineTransform(translationX: shiftX, y: shiftY))
      image = image.composited(over: self.opaqueBackground)
                
      _ = try? self.cicontext.startTask(toRender: image, from: backBounds,
                                             to: destination, at: CGPoint.zero)

8:09 - ContentView

// ContentView

import CoreImage.CIFilterBuiltins

init(struct ContentView: View {
    var body: some View {
       // Create a Metal view with its own renderer.
       let renderer = Renderer(
            imageProvider: { (time: CFTimeInterval, scaleFactor: CGFloat) -> CIImage in
            
            var image: CIImage

            // create image using CIFilter.checkerboardGenerator...

            return image
        })
        MetalView(renderer: renderer)
    }
}

9:17 - MetalView changes

if let caMtlLayer = view.layer as? CAMetalLayer  {
    caMtlLayer.wantsExtendedDynamicRangeContent = true
    view.colorPixelFormat = MTLPixelFormat.rgba16Float
    view.colorspace = CGColorSpace(name: CGColorSpace.extendedLinearDisplayP3)
}

9:35 - Get headroom

let screen = view.window?.screen;
#if os(macOS)
     let headroom = screen?.maximumExtendedDynamicRangeColorComponentValue ?? 1.0
#else
     let headroom = screen?.currentEDRHeadroom ?? 1.0
#endif
     var image = self.imageProvider(time, contentScaleFactor, headroom)

10:05 - Use headroom

imageProvider: { (time: CFTimeInterval, scaleFactor: CGFloat,
                              headroom: CGFloat) -> CIImage in
           var image: CIImage

           // Use CIFilters to create image for time / scale / headroom / ...
           return image
        })

12:42 - Ripple effect

let ripple = CIFilter.rippleTransition()
ripple.inputImage = image
ripple.targetImage = image
ripple.center = CGPoint(x: 512.0, y: 384.0)
ripple.time = Float(fmod(time*0.25, 1.0))
ripple.shadingImage = shading
image = ripple.outputImage

13:34 - Generating the shading image

let gradient = CIFilter.linearGradient()
let w = min( headroom, 8.0 )
gradient.color0 = CIColor(red: w, green: w, blue: w, 
                          colorSpace: CGColorSpace(name: CGColorSpace.extendedLinearSRGB)!)!
gradient.color1 = CIColor.clear
gradient.point0 = CGPoint(x: sin(angle)*90.0 + 100.0, y: cos(angle)*90.0 + 100.0)
gradient.point1 = CGPoint(x: sin(angle)*85.0 + 100.0, y: cos(angle)*85.0 + 100.0)
let shading = gradient.outputImage?.cropped(to: CGRect(x: 0, y: 0, width: 200, height: 200))

16:13 - CIColorCube and EDR

let f = CIFilter.colorCubeWithColorSpace()
f.cubeDimension = 32
f.cubeData = sdrData
f.extrapolate = true
f.inputImage = edrImage
let edrResult = f.outputImage

リソース

関連ビデオ

Tech Talks

WWDC22