アプリの動画でのシネマティックモードへの対応

♪ ♪

こんにちは Rasmusです Camera Algorithmsチームの エンジニアで コンピューテーショナル ビデオに携わっています シネマティックモードには すでに興奮しています そして今 新しいCinematic APIを使い シネマティックモードの魔法を ご自身のアプリに統合する方法を 紹介することがさらに楽しみです このプレゼンテーションでは シネマティックモードの 素晴らしい機能を備えた 再生と編集用のサンプルアプリを作るため 新しいAPIを使いながら 必要なステップを説明します しかし 統合の話を始める前に シネマティックモードとは何か どのようにキャプチャできるのか キャプチャ後に 何ができるのかをお見せしましょう iPhone13で導入した シネマティックモードは まさにポケットの中の小さな撮影クルーです 美しくて浅い被写界深度と 自然なフォーカスフォールオフを 持つカメラや フォーカスを変化させることで 注目と物語を演出する監督 そしてキーフレームを事前に予測し フォーカスポイント間の スムーズな遷移を作り出す フォーカスプラーをもたらします ではどうやってシネマティックモードを 撮影するのでしょう シネマティックモードはiPhone 13と14の ラインナップにある すべてのデバイスのカメラアプリで撮影でき 録画しながらレンダリングプレビューを 見ることができます このため インディーズの映画監督を 目指す人も キャンプ旅行の動画に 魔法のタッチを加えたい人も シネマティックモードを 利用しやすくなっています 私は映画監督になることを夢見ていましたが 自分の家族をシネマティックモードで 撮影するのが大好きです しかし 魔法はそれで終わりではありません シネマティックモードには 見た目以上の魅力があります シネマティックモードでは撮影後に 驚くべき非破壊編集ができます 絞りの変更が可能であるため ボケの量を変えることができます また 代替検出を使用して フォーカスや物語を リダイレクトすることもできる これは写真での撮影後の編集ですが 編集はiMovie Final Cut Pro Motionなどのアプリでも可能です そして今回 Cinematic APIが 導入されたことで シネマティックモードの動画を再生に使ったり 自分の素晴らしいアプリで 編集したりできるようになりました Cinematic APIは 新しいmacOS Sonoma iOS 17 iPadOS 17 tvOS 17で広く利用可能です 本当にワクワクしますね まず 特別なシネマティックモードの アセットとデータフローについての 基礎知識から始めます 次に シネマティックモードアセットを 取得し 絞りを変更するなどの 簡単な再生調整をして再生するための 具体的な手順を説明します そしてシネマティックモードでフォーカスを 可能にする非破壊的な編集を行う方法と それらの編集変更を保存して 読み込む方法を説明します 新しいCinematic APIコールを いくつかを説明し 詳細なリファレンスとして使える サンプルコードアプリも提供します しかし 約束通り シネマティックモードについての 基本的な説明から始めましょう シネマティックモードは実際には 2つのファイルと1つのファイルから もう1つのファイルへの データフローで構成されています まず レンダリングアセットがあります これはシネマティックモードエフェクトが 適用されたベイクファイルで 通常のQuickTimeムービーとして エクスポートや共有そして再生ができます そしてレンダリングアセットを 作成するために 必要なすべての情報を持つ特別な シネマティックモードアセットがあります 非破壊的なポストキャプチャ編集が可能で 例えば 絞りを変更したり 物語に合わせて フォーカスを合わせ直したりできます まずはレンダリングされたアセットを見て Cinematography 101を 少し使ってショットを分解してみましょう

オープニングショットでは明らかに重要な ストリートハンドボールの試合に入り メインの被写体にフォーカスすることで 彼がビッグプレーの 準備をする緊張感が伝わってきます チームプレーヤーを確認すると 彼も同様に準備万端です 彼にフォーカスを合わせることで 彼がいかに準備万端かが強調されます フォーカスを本題に戻します これです ナイフで切り裂くような緊張感です

彼はプレーを完全に台無しにして 笑いを誘いました ではショットの早い段階で 彼にフォーカスを当てることで 物語をチームプレーヤーのものに変えます 行きつ戻りつするのではなく 彼に焦点を合わせ続けるのです 私は彼の思いを代弁します 「愛してるぜ 相棒 でもいつも時間がかかるな」 「ああ 準備はできているが 期待はしていない」 「時間の無駄だ　ブラボー」 これはiPhone 13で撮影され シネマティックモードが提供する― ストーリーテリング用の 映画撮影ツールを紹介しています そしてこのレンダリングアセットを作成する シネマティックモードアセットがあります 非破壊的なポストキャプチャ編集を サポートするため シネマティックモードアセットには 複数のトラックがあります まずビデオトラックですが これはキャプチャしたオリジナルの QuickTimeムービーです HDR/SDRや毎秒30フレームの1080p そしてiPhone 14では毎秒24 25 および30フレームの4Kも可能です このトラックは通常の動画として 再生できますが レンダリングされたアセットと比べると 美学やストーリー性に欠けます サスペンスもコミックリリーフもなく 路地裏でゲームをしている人たちを 見ているだけになります 2つ目のトラックには視差が含まれています 視差とは同じシーンを2台の カメラで見たときのピクセルのずれです 近くの物体は 遠くの物体よりもずれています 片目をつぶってからもう片方の目をつぶって 異なる距離で物体が どのように移動するかを 自分で試すことができます 視差はフォーカスと浅い被写界深度の レンダリングに使用されます 視差マップはビデオトラックよりも 低解像度です カラーリゼーションとして 表示されるトラックは 相対的な位相差であり 絶対的な位相差ではありません つまり 同じマップ内のほかのサンプルとの 相対的な関係に基づいてのみ使用できます 例えば フォーカス視差に対する 相対的なレンダリングや 2つの フォーカス視差間のトランジションなどです 相対的な位相差や奥行きに関する情報や 奥行きの関するインサイトを得るには WWDC17の「Capturing Depth in iPhone Photography」をお勧めします 3つ目のトラックにはレンダリングと編集の 重要なメタデータが含まれています このトラックは 2つのもので構成されています まずは レンダリング属性です これはフォーカス視差と絞りを F値として保持するものです これらはレンダリングを駆動します オーバーレイで表示されるフォーカスは Cinematicエンジンによって決定します 一方 絞りはユーザーが選択します そしてCinematicスクリプトがあり すべての自動シーン検出を保持しています

このシーンでは 顔や頭そして胴体が表示され 可能な限り時間と共にリンクされる IDによってグループ化されます このスクリプトはフォーカスの判定も保持し フォーカスを合わせる検出を判定します フォーカスの判定は キャプチャ後に変更することができ ほかの検出に追従することで 物語やレンダリングを変更できます これがシネマティックモードアセットから レンダリングアセットへの データフローです 先の説明のようにシネマティックモード アセットにはレンダリングと キャプチャ後のフォーカスや絞りの変更に 必要なすべての情報が保持されています 続いてオプションの編集ですが 変更は非破壊で いつでも元に戻すことができます 編集を行わない場合 Cinematicエンジンは 自動的にフォーカス視差を制御し キャプチャ時にユーザーが設定した 絞りは変更されません フォーカス視差と絞りが設定されると レンダリングは視差マップを使用して 正確なフォーカスフォールオフで 浅い被写界深度を適用します そして最後にエフェクトが適用された レンダリングアセットができあがります これは共有可能な通常の QuickTimeムービーです シネマティックモードの 理解が深まったところで いよいよ再生アプリを作り始めましょう その前にシネマティックモードのアセットを 手に入れる必要があります そのためのコードを見てみましょう 写真ライブラリからシネマティック モードのアセットを選ぶのは簡単です 写真ピッカーを使ってシネマティック ビデオをフィルタリングするだけです ピッカーは選択されたファイルの ローカル識別子を取得します コードに関係ない余談ですが シネマティックモードアセットが まだない場合は All Photos Dataオプションを使って レンダリングアセットと シネマティックモードアセットの 両方を含むよう異なるユーザーデバイス間で AirDropすることができます コーディングに戻りましょう ピックで取得したアセット識別子を使用して シネマティックモードアセットに関する 情報を含むフォトアセットを取得し リクエストします オリジナルバージョンを取得し アセットがiCloud上にある場合は ネットワークアクセスを許可するように リクエストオプションを設定し 最後にAVAssetとしてシネマティック モードアセットをリクエストします ここからが面白いところです シネマティックモードアセットが 手に入りました 再生機能を統合しましょう レンダリングされたアセットは 通常のムービーとして AVPlayerや AVPlayerItemで再生できます シネマティックモードアセット内の ムービートラックも同様です しかしシネマティックモードアセットの 可能性を実現するには カスタムビデオコンポジターを 追加する必要があります このコンポジターは複数のトラックや ユーザーの変更を処理し 最後にCinematicレンダラーを 呼び出して出力を合成します このカスタムコンポジターはサムネイルや オフラインエクスポートにも使用できますが ここではシネマティックモードアセットの 再生と編集への使用に焦点を当てます ここではCinematic APIに 特化した詳細にしか触れませんので カスタムビデオコンポジタークラスと HDRに関するさらなる詳細については WWDC20の「Edit and Play Back HDR Video with AVFoundation」をお勧めします Cinematic APIを使い始めましょう Cinematic APIは CNという接頭辞を使用しているので 被写界深度を浅くレンダリングする レンダリングセッションを セットアップするために必要な3つの APIコールを見つけられるかもしれません 最初の呼び出しはCinematicアセットから レンダリング属性を取得します 2番目はこれらの属性でレンダリング セッションをセットアップします レンダリングセッションは GPUを使用するので メタルコマンドキューを 提供する必要があります そして最後の呼び出しはエクスポートする レンダリング品質を設定します クオリティはパフォーマンスと クオリティの制約に応じて プレビューやエクスポートなど さまざまな列挙型に設定できます これらコードと以下のコードスニペットでは コアコードに集中するために guard let else errorのようなグッド プラクティスエラーチェックを削除します カスタムコンポジターには 出力をレンダリングするために必要な Cinematicアセット情報を含む コンポジションが必要です 一般的なケースでは複数のトラックの 追加には複数のステップが必要ですが 幸い 私たちはこれをたった1ステップで 簡単に行う方法を提供しています アセット情報からすべてのトラックを 直接コンポジションに 追加することができます Cinematicのコンポジション情報は Cinematicのアセット情報と同じですが コンポジションのトラックを指しています 次にCinematicアセットから Cinematicスクリプトを取得します Cinematicスクリプトはすべての検出と フォーカス判定を保持します これについては後で詳しく説明します カスタムコンポジターでは レンダリングセッションや アセットトラックを使ったコンポジション そしてCinematicスクリプト および絞りをF値として インストラクションを設定します このカスタム命令ではレンダリング されたCinematicコンテンツを どのように合成するかを説明します

動画を再生するには ビデオコンポジションが必要です このコンポジションに Cinematicコンポジションの トラックIDを追加し エフェクトを合成するために レンダラーが呼び出される サンプルカスタムコンポジターを追加し コンポジション命令を追加します カスタムコンポジターで何が行われているか 詳しく見てみましょう カスタムコンポジターの startRequest関数の中には Cinematic API 特有のものがいくつかあります Cinematicコンポジションの トラックIDを使って オリジナルビデオトラックや視差トラック そしてメタデータトラックから 現在のフレームのソースバッファを取得し 最後にレンダリング出力用の バッファを作成します これらのバッファによって 編集や新しいレンダリングが可能になります メタデータバッファから レンダリングを駆動する― レンダリングフレーム属性を 得ることができます メタデータは不透明な構造なので CNRenderingSessionを使用して フレーム属性を直接取得します フレーム属性を使用することで この場合は指示に基づいて 絞りのF値を変更し オプションの再生変更を行うことができます これによりUI要素からの 絞りの変更を保持することができます フォーカス視差も同様の方法で 変更できますが 検出を使ったシーン駆動型の 変更については あとで説明します この時点で再生実現まで 本当にあと少しです 合成された出力が GPU上でレンダリングできるように レンダリングコマンドキューに コマンドバッファを取得するだけです 更新されたフレーム属性と 画像および視差バッファを使用して レンダリングをエンコードします 出力バッファの補完ハンドラを追加し ビデオ合成に渡します 最後にコマンドバッファをコミットします それではサンプルアプリで 再生を試してみましょう フォトライブラリからシネマティックモードの アセットを選択できるようになりました

アセットを再生するとエフェクトが リアルタイムで適用されます

前後にスクラブしたり絞りを変更することで ボケの量を変えることができる

絞ると効果は最小になり 開けると大きくなります

絞りを開けると効果が増します これはやりすぎかもしれません

これはいい感じです

このアプリはすでにかなり素晴らしいですが これからの編集セクションで さらに磨かれるでしょう 参考までに各パートの コードはサンプルアプリにあります これから再生アプリと カスタムビデオコンポジターを拡張して Cinematicスクリプトを変更することで より高度で非破壊的な 編集ができるようにします シネマティックモードの写真アプリの 編集環境を再確認し 特にフォーカスについて見てみましょう フォーカスはキャプチャ中に オブジェクトを検出し どこおよび何にフォーカスするかを 判定することで自動的に駆動されます これらの検出と判定は すべてCinematicスクリプトにあり スクリプトはあなたの物語に 合わせて変更できます フォーカス検出は黄色の四角で表示され タイムラインの下にはキーフレームと フォーカス判定の変更があります この仕組みを理解するために 簡単な例でCinematicスクリプトの 構造を分解してみましょう まず 2つのCinematic スクリプトフレームから始めます それぞれ ある時点の すべての検出を保持します この場合は2つの検出だけです 検出は顔と頭と胴体を グループ化したグループIDで 時間経過とともに追跡されます さらに 猫と犬とボールが検出され 追跡されますが ここでは俳優1と俳優2の顔だけです 自動ベース判定により最初のフレームで 俳優1にフォーカスが当てられ 新たな判定があるまで フォーカスはこの軌跡をたどります 俳優3がシーンに入り 新しい顔と検出トラックを導入したあとも フォーカスは俳優1のままです フレーム5では自動キーフレームイベントに より判定とフォーカスが俳優2に変わります そして わずか4フレーム後 俳優3は彼女にふさわしい― フォーカスを得ることなく 意気消沈して退場します シークエンスの残りの時間は 俳優2に焦点が当てられたままです このような自動的な基本判定は 誰がカメラを向いているかや 誰が目をそらしているか そして 誰が近くにいるかや何が面白いかなど 様々なパラメータに基づいて判定されます そして 私たちは良い物語を 作るために最善を尽くしますが あなたには別の物語があるかもしれません 幸い 判定は変更することができ 実際には2つの方法があります 1つ目はユーザーの判定を加えることです これによりシーンに入った 俳優3 にフォーカスが当たります しかし 弱い判定は 次のベース判定またはユーザー判定が フレーム5で起こるまで その軌跡をたどるだけです このフレームではベースの判定により 残りのフレームの焦点が俳優2に変更します つまり 俳優3に 焦点を当て続けたいのであれば フレーム5でもう1つ弱い判定を追加するか もっと強力なものを使うことです お察しの通り 強いユーザー判定です 強い判定は次のユーザー判定が 別の場所に 焦点を合わせるか 検出トラックが終了するまで 被写体に焦点を合わせ続けます 強い判定を追加すると 俳優3にフォーカスが合い 次の基本判定を上書きします 俳優3の検出トラックが終了すると フォーカスは俳優2にフォーカスする― 基本判定に戻ります 判定階層は次のように機能します 基本判定の上にユーザー判定があり 可能な場合にユーザー判定が適用され 基本判定がギャップを埋めます つまり この例のようにユーザーは スクリプトの一部だけを変更できます また どちらの判定も検出トラックが 終了すると基本判定に戻りますが 強い判定はそのフォーカストラックを 可能な限り長く保持します スクリプトの変更に移る前に スクリプトフレームを取得し 検出ボックスを描画してみましょう まず ビデオ合成リクエストから フレーム時間を取得し その時点の Cinematicスクリプトフレームを 取得する必要があります このスクリプトフレームはフォーカス 検出を含むすべての検出を保持します これで検出ボックスを 描くのが簡単になりました スクリプト内のすべての検出を 繰り返し実行することで 各検出矩形を取得し drawコマンドを 使用して renderEncoderに アタッチされたテクスチャに 描画することができます この例では 検出は白で描かれています そして 現在focusDetectionで あることを強調するために 別の色で描画してみましょう Cinematicスクリプトのフレームから 直接フォーカス検出を取得し それに対応する矩形を取得し 目立たせるために フォーカスの矩形を黄色で描画します 検出オーバーレイを追加した 再生アプリを試してみましょう 新しい検出オーバーレイを有効にして 検出を描画できるようになりました

このシーンでは 顔と頭と胴体が 白で表示され フォーカス検出が黄色で表示されます みなさんのアプリにとって合理的であれば 検出の特定のサブセットだけを 表示するようにオーバーレイを カスタマイズできます 再生を開始すると フォーカスとレンダリングが 黄色いフォーカス検出を追って 映像が再生されるのに対し 別の検出は白色で表示されることに 注目してください これらの代替検出を使ってフォーカスを 変更する方法をお見せします 検出ボックスの描き方がわかったら 実際にUIタップポイントで スクリプトを変更するのもよく似ています ここでもすべての検出を繰り返し タッピングポイントが検出の中にあれば 対応するdetectionIDを取得して 新しいデシジョンを作成します 判定強度はUIで設定できます サンプルアプリでは シングルタップで弱ダブルタップで強を 設定していますが UIはユーザー次第です

そして最後に この新しいユーザー判定を Cinematicスクリプトに追加すると スクリプトが変更されました それでは 更新されたスクリプトが どのようにフォーカスを動かすかお話します 通常のクリップの長さを考えて 3つの判定とそれに対応する― フォーカス検出トラックを見てみましょう フォーカスのトラックを時間と距離に従って 2Dプロットに並べてみましょう Cinematicエンジンは 更新されたスクリプト全体を 把握しているため 前もってスムーズな フォーカス遷移を行うことができます このように フォーカスラックが 各キーフレームの最初に フォーカスが合うように 前もって開始されます これは魔法のようなもので フォーカスプラーのように 設定されたマーカーを知ることで事前に 注意を向け 焦点を合わせられます

ラックフォーカスの視差は 更新されたCinematicスクリプトの フレームから直接アクセスできます スクリプトフレームの抽出方法は すでに示しましたが フォーカスのフレーム属性の変更は 絞りの変更と似ています 更新されたスクリプトから スクリプトフレームを入手したら フォーカス視差のフレーム属性を 直接更新することができます これにより更新されたスクリプトに従って フォーカスがスムーズに遷移し レンダラーに渡されます サンプルアプリでスクリプトとフォーカスを 変更するタッピングを試してみましょう 再生モードから編集モードに移行すると Cinematicスクリプトを 更新できるようになりました フォーカスの判定は単タップで 黄色の破線枠で 表示される弱い判定を取得するか ダブルタップで黄色の実線枠で表示される 強い判定を取得することで変更できます 様々な選手をタップしたときに ユーザーの入力によってフォーカスと レンダリングがどのように 変化するか確認できます 素晴らしいことだと思います スクラブ タップ 絞りを変えます スクラブ タップ ダブルタップ

編集が完了したところで 変更の保存の仕方は？ スクリプトの変更は 別のデータファイルに保存することができ 変更を別に保存することは オリジナルが変更されないことを意味します また 変更はいつでも 元に戻すことができます そこで スクリプトの変更を取得し その変更をコンパクトな バイナリ表現として取得し データファイルに書き込みます Cinematic APIは データ表現を処理します そして このデータを あなたのアプリに保存し 必要に応じて リロードできるようにする必要があります スクリプトの変更のロードは 3つの等しく簡単なステップで行われます データファイルからバイナリデータを取得し スクリプトの変更を解凍し シネマティックスクリプトに 変更を再ロードします 変更はオリジナルのスクリプトと同時に ロードすることもできます このようにして Cinematicスクリプトの編集や レンダリングや保存 そして読み込みができるのです 前述したようにカスタムビデオ コンポジターを使ってレンダリングした― 動画をエクスポートすることができます また レンダリングしたビデオをそのまま フォトライブラリに戻すこともできます これはサンプルコードで 詳しく説明されています APIにはCNObjectTrackerという トラッカーも含まれており 自動検出のないオブジェクトに使用できます サンプルコードでは 検出のないオブジェクトをタップすることで トラッカーを作動させる方法を 説明しています そして トラッカーは検出トラックを提供し スクリプトに追加することができます そして より高度な可能性について 独自のトラッカーを提供し 独自のカスタム検出トラックをスクリプトに 追加することで カスタムトラッキングも追加できます さらに フレームごとのレンダリング属性に カスタム変更を加えることもでき カスタムトランジションや 絞り値変更を可能にします 個人的にはシネマティックモードと 新しいAPIを使って みなさんが何を開発されるのか とても楽しみです シンプルなアプリでも 複雑なエディタでも 私たちが思いつかないような アイデアを思いつくでしょう シネマティックモードのビデオアセットを 統合して再生調整したり Cinematicスクリプトや フォーカスを変更して 非破壊編集や新しいレンダリングを行ったり これらのスクリプトの変更を 保存したり読み込んだりすることができる 新しいCinematic APIをご紹介しました 同梱のサンプルアプリで さらに詳しくご確認ください ご視聴ありがとうございました コーディングを楽しんでください ♪ ♪