動画AppのためのCore Imageパイプラインの最適化

Core Imageの処理能力を活用し、App内の動画パフォーマンスを最適化する方法について説明します。あなたのAppで動画にエフェクトを適用するためのCore Imageパイプラインを構築する方法を紹介します。CIContextを使用するときに、Appのメモリのフットプリントを減らす方法、およびCore Imageフィルタを使用した動画再生のためのAVPlayViewまたはMTKViewビュークラスの使用に関するベストプラクティスについて学びます。さらに、独自のカスタムカーネルをMetal Shading Languageで書くべき理由について説明し、Core ImageパイプラインでのMetalコマンドキューを最適に使用するためのパフォーマンスに関するヒントを紹介します。

リソース

関連ビデオ

WWDC22

AVFoundationやMetalによるHDR動画のEDR表示

WWDC21

WWDC20

ダウンロード

こんにちは WWDCへようこそ

“動画アプリケーションのための Core Imageパイプラインの最適化” デヴィッド･ヘイワードです動画アプリのエフェクト処理で Core Imageを使用し― 最適なパフォーマンスを引き出す方法をご紹介します３つのトピックについて説明しましょう CIContextの最適な生成方法カスタムCIKernelの書き方と適用方法そしてビューへの最適なレンダリング方法ですまずはCIContextの生成です CIContextの生成は１つのビューに対し１つのCIContextのみを生成してください初期化に時間とメモリ容量を要するため頻繁には生成を行いません context生成時にはいくつかのオプション指定が必要です最も重要なのは中間生成物をキャッシュに格納しないことです動画はそれぞれのフレームが前のフレームとは違いますキャッシュの無効化によりメモリ使用量を抑制します

contextには名前を付けることを推奨していますが Core Imageのデバッグ技術の使用時に有効だからです Core ImageはMetalを使用していますが Core Imageと他のMetalのAPI群を混在して使う場合もあります例えば MetalTextureをCore Imageの入力値または出力値に使う場合は CIContextをMetalCommandQueueで生成することを推奨します時系列のグラフで説明しましょうアプリがMetalTextureにデータを格納するために MetalCommandQueueを使ったとしますこの場合はCPU上でキューに入れ GPU上で実行します次に先ほどのMetalTextureを MetalQueueを使っているCore Imageに渡し別のMetalTextureにデータを格納しますここでもCPU上でキューに入れ GPU上で実行します最後に再びMetalQueueを使い Core Imageから出力textureをレンダリングしますすべての処理が異なるキューで行われるため正しい結果を得るには waitコマンドの発行が必要です非効率なパイプライン処理による無駄な時間を省くため他のMetalレンダリング処理で使うキューと同じキューでCIContextを生成しますこれによりアプリの待ちをなくし最適なパフォーマンスを発揮するパイプライン処理が可能となります

次はCIKernelをMetalで書くご説明です動画アプリを最適に利用するには Metalでのエフェクトの実装が重要ですすべてMetalで実装されているので Core Imageのビルドインフィルタを可能な限り使用します

ビルトインフィルタの利用に役立つ文書をアップロードしておりパラメータ説明サンプル画像サンプルコードを記載しています

ビルトインフィルタに適用されるコードはシンプルです CIFilterBuiltinsをインポートし filterインスタンスを生成しますそして入力プロパティを設定し出力画像を取得しますカスタムCIKernelをMetalで書くことを推奨する理由は他にもあります CIKernelの通常機能である自動タイリングや自動連結などに加え Metalで書くことでコンパイル処理時間を減らすことができるのですギャザー読み取りやグループ書き込み半精度浮動小数点などの機能も利用可能です開発者の作業を快適化するためタイピング時の構文ハイライトやビルド時の構文チェックが行われます MetalでCIKernelを書く例をお見せしましょうプレゼンテーションの中でお見せした kernelでデモを行い HDR動画をAVFoundationで編集し再生しますカスタムCIKernelを書くのは簡単です最初にソースの冒頭でCoreImage.hのヘッダーをインクルードすることで Core Imageが提供する追加クラスと同様に Metal標準すべてのクラスにアクセスができます次に kernelのための関数 extern “C”を宣言しますこの例はCIColorKernelなので関数は float4を戻り値として返す必要がありますそして引数を取ることができますこれは最初の引数がCore Imageのsample_tで入力画像から得たピクセルを表すものですこれはリニア色空間の乗算済みアルファ RGBA float4で SDRにもHDRにも適合します

最後の引数はCore Imageのdestinationですこれは返却するピクセル座標を提供しますこのkernelの実装では destinationのXY座標の値を使用してどの斜め線にいるかを決定しますそして単純な数学を用いゼブラストライプにいるかどうかを計算します

ゼブラストライプと現在処理中のピクセルサンプルが SDRの標準的な白より明るいならば明るい赤のピクセルを返しますさもないとピクセルサンプルは変更されません詳細は“Build Metal-Based Core Image Kernels with Xcode”をご覧ください

最後は動画アプリの開発における最適なビュークラスの選択についてお話ししますアプリに動画エフェクト処理がある場合 UIImageViewやNSImageViewクラスは使用を避けましょう静的コンテンツ表示のために設計されているからです最も簡単に使えるAVPlayerViewはビューにフィルタ処理した動画を自動的に映しますパフォーマンス向上のためには MetalKitViewも選択可能ですこれら２つをCore Imageと使う方法を紹介します

AVPlayerViewの使用は非常に単純ですキーとなるオブジェクト AVMutableVideoCompositionは動画のアセットとハンドラブロックと共に初期化されますこのブロックは毎回呼び出され AVAsynchronousCIImageFilteringRequestに渡されますそして CIFilterを生成し入力値を設定すると出力画像が取得されます次にリクエストオブジェクトにその画像を渡します

Xcodeではデバッグ中に CIImageの変数をマウスオーバーするとオブジェクトのアドレスを示すポップオーバーが現れます目のマークをクリックすると新たなウィンドウが立ち上がり画像を構成するレシピが表示されます入力値の動画フレームが 10ビットHDR表示ということが分かります Core Imageは自動的に HLGからCore Image作業領域へとカラー管理されています加工した動画を映すもう１つの選択肢はMetalKitViewです

MetalKitViewを使う場合の Core Imageの最適な利用方法を説明します最初にframeとdeviceと一緒に initをオーバーライドします initメソッドはビューに対して CIContextを生成する最適なタイミングです Core ImageがMetal演算を使えるよう framebufferOnlyはfalseに設定してください macOSではビューがHDR対応の場合 colorPixelFormatを rgba16floatに設定してください wantsExtendedDynamicRangeContentも trueを設定します次にdraw in viewメソッドを実装します CIRenderDestinationは特殊な方法で生成されます正しいwidth height pixelformatによって destinationを生成しますが Metal textureを渡す代わりに textureを返すブロックを渡します CIContextは前のフレーム処理が終わる前に Metal処理のキュー追加が可能となります次に CIContextにdestinationへの画像レンダリングタスクを指示します

最後に現在描画可能なビューを示すためのコマンドバッファを生成します

本日はCore Imageを使用して動画アプリのパフォーマンスを最適化する方法をご紹介しました本日紹介したトピックは CIContextsの生成 CIKernelsの適用そしてビューへのレンダリングですこれらの方法で皆様のアプリ動画はより素晴らしいものになるでしょうご視聴ありがとうございました WWDC 2020をお楽しみください

0:52 - Creating CIContext

let context =  CIContext(options: [
    .cacheIntermediates : false,
    .name : ”MyAppView”
])

1:26 - Creating CIContext 2

let context =  CIContext(MTLCommandQueue : queue, options: […])

2:59 - Use builtins Whenever possible

import CoreImage.CIFilterBuiltins

func motionBlur(inputImage: CIImage) -> CIImage? {
    let motionBlurFilter = CIFilter.motionBlur()
    motionBlurFilter.inputImage = inputImage
    motionBlurFilter.angle = 0
    motionBlurFilter.radius = 20
    return motionBlurFilter.outputImage
}

3:56 - Put your kernels in .ci.metal sources

// MyKernels.ci.metal
#include <CoreImage/CoreImage.h> // includes CIKernelMetalLib.h
using namespace metal;

extern "C" float4 HDRZebra (coreimage::sample_t s, float time, coreimage::destination dest) 
{
	float diagLine = dest.coord().x + dest.coord().y;
	float zebra = fract(diagLine/20.0 + time*2.0);
	if ((zebra > 0.5) && (s.r > 1 || s.g > 1 || s.b > 1))
		return float4(2.0, 0.0, 0.0, 1.0);
	return s;
}

5:50 - Using AVPlayer View

let videoComposition = AVMutableVideoComposition(
    asset: asset,      applyingCIFiltersWithHandler:
    { (request: AVAsynchronousCIImageFilteringRequest) -> Void in
        let filter = HDRZebraFilter()         filter.inputImage = request.sourceImage
        let output = filter.outputImage

        if (output != nil) {
            request.finish(with: output, context: myCtx)
        }
        else { request.finish(with: err) }
    }
)

7:01 - Using MTKView

class MyView : MTKView {
    var context: CIContext
    var commandQueue : MTLCommandQueue
    
    override init(frame frameRect: CGRect, device: MTLDevice?) {
        let dev = device ?? MTLCreateSystemDefaultDevice()!
        context = CIContext(mtlDevice: dev, options: [.cacheIntermediates : false] )
        commandQueue = dev.makeCommandQueue()!
        
        super.init(frame: frameRect, device: dev)

        framebufferOnly = false  // allow Core Image to use Metal Compute
        colorPixelFormat = MTLPixelFormat.rgba16Float
        if let caml = layer as? CAMetalLayer {
            caml.wantsExtendedDynamicRangeContent = true
        }
    }

7:29 - Using MTKView 2

func draw(in view: MTKView) {

        let size = self.convertToBacking(self.bounds.size)
        let rd = CIRenderDestination(width: Int(size.width),
                                     height: Int(size.height),
                                     pixelFormat: colorPixelFormat,
                                     commandBuffer: nil)
                  { () -> MTLTexture in return view.currentDrawable!.texture }

        context.startTask(toRender:image, from:rect, to:rd, at:point)

        // Present the current drawable
        let cmdBuf = commandQueue.makeCommandBuffer()!
        cmdBuf.present(view.currentDrawable!)
        cmdBuf.commit()
   }

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。