株式会社GENEROSITYのCGデザイナー丸山です。
今回は、UnrealEngine5(以下UE)上で実写の動画にCGを合成し、
それをAfterEffects(以下AE)でコンポジットする方法を解説します。
マッチムーブとよく呼ばれる手法でプリレンダではメジャーな手法ですが、
UEで作っている人はまだそこまで多くない印象です。
目指すアウトプット
上記のように、スマートフォンで撮影した動画のカメラ情報をAEでトラッキングし、
それをUEにインポートしてUE上でアセットを配置しプレビュー、
MovieRenderQueueでレンダリングしてみようという内容です。
UEを使うメリット
UEを使うメリットとしてはとしては、下記3点です。
- UEマーケットプレイスのアセットを流用できる
- リアルタイムプレビューのため柔軟に修正に対応できる
- UEのDataSmithC4DImpoterでAEのカメラトラッキング情報を手軽に流し込める
参考動画
下記の動画が大変参考になりました。
Joshua M Kerrさんありがとうございます。
バージョン
最初にソフトのバージョン情報です。
- AfterEffects2024
- UnrealEngine5.4
作成手順
行程が多いのですが順を追って解説していきます。
1.カメラトラッキングの座標の抽出(AE)
まず、エフェクト&プリセットで3D カメラトラッカーを検索し適応します。
分析が終わる前で待機します。
動画に特徴点が多ければ特に問題なくバッテン印が追従している結果が確認できるはずです。
平面になっている特徴点を選択し、グリッドと原点ををクリックし、(0,0,0)の位置を定義します。
平面とカメラを作成します。
カメラに追従する平面が表示されます。
この記事ではトラッキングのAEの細かい調整については言及しませんので
わからないことがあれば公式のドキュメントを参照いただければと思います。
トラッキングが完了したらデータを保存し、
書き出し>Maxon Cinema4D Exporterをクリックし、エクスポートします。
その際に2Dレイヤーは書き出せないとアラートができますが、
2Dレイヤーは不要なので問題ありません。
任意のフォルダーにc4dファイルを保存します。
2.UEにAEで抽出したカメラ座標をDataSmithC4DImpoterで流し込む(UE)
UEでカメラ情報を読み込みたいプロジェクトに
C4Dのデータがインポートできるよう設定します。
EditPlugin>Pluginsから、Datasmith C4D importerを探してチェックを入れます。
プロジェクトを再起動されるか聞かれるので、そのまRestart Nowのボタンを押し再起動します。
追加ボタン>Datasmith>File Importを押し先ほどAEから出力したC4DFileをインポートします。
任意のディレクトリを選択。
インポートオプションのポップアップが開くので、
Animationにチェックが入っているかを確認します。
今回はライトなど特に含まれていないですが、OKを押します。
Animationsフォルダの中にレベルシーケンスがインポートされました。
この中にカメラのアニメーション情報が入っています。
シーケンスをダブルクリックして開くと、キーフレームが打たれていることが
確認できましたが、スケールが合っていないためとても大きな動きをしてしまっています。
アクタのスケールを0.01に設定し、カメラのサイズを縮小して、
Pilotで見てみるとアイレベルも問題なさそうな見え方になりました。
3.動画を読み込みマテリアルとして扱う準備をする(UE)
実写の動画がプレビューできるマテリアルを作っていきます。
動画をマテリアルとして扱うには下記3つのアセットが必要です。
- FileMediaSource
- MediaPlayer
- MediaTexture
少しややこしいですが、順を追って説明していきます。
・FileMediaSource
UE上で再生可能な動画データは、インポートするとFileMediaSourceとして扱われます。
ImportのUIもしくはDrag&Dropで、先ほどAEでカメラトラッキングした
ベースの動画データ(mp4)をインポートします。
・MediaPlayer
先ほどのFileMediaSourceをマップ上で再生するにはMediaPlayerが必要になります。
右クリック>Media>Media Playerをクリック で作成。
作成するMediaPlayerに紐づくMediaTextureを作成するかポップアップが出ます。
MediaTextureはマテリアルでテクスチャとしてFileMediaSourceを扱うために必要なアセットです。
問題ないのでチェックしてOKを押します。
MediaPlayerから、再生するFileMediaSourceを指定する必要があります。
ダブルクリックで詳細を開くと、下部のNameに再生可能なFileMediaSource一覧が表示されるので
クリックして指定します。指定すると右上のプレイリストにメディア名が表示され
プレビューできます。
・MediaTexture
MediaPlayerで再生される動画をMaterialGraphのテクスチャノードとして扱うため
MediaTextureを作成し設定する必要があります。
今回の場合は使用したいMediaPlayerが既に紐づいた状態のMediaTextureを
流れで作成したため、ダブルクリックして詳細を一応確認しておきます。
(後から作成する場合は別途紐づけが必要です。)
4.プレーンに動画マテリアルを配置しシーンで再生する(UE)
前述したFileMediaSource/MediaPlayer/MediaTextureの
準備ができたので、MaterialGraphでビデオが再生できるマテリアルを組んでいきます。
・Materialノード
新規Materialを作成し、MaterialGraphを開きます。
動画をプレビューしたいだけなのでライトの影響は不要です。Unlitに設定します。
MaterialGraphを設定します。
-
TextureSample
TextureSampleの詳細で先ほど作成したMediaTextureを指定します。
RGBをEmissiveに繋ぎます。 -
ScreenPosition
カメラの位置に依存せずViewPortの全体で動画をプレビューするために作成します。
ViewportUVとTextureSampleのUVsをつなぎます。
シーンに動画プレビュー用の巨大なPlaneを配置します。
画面全体に動画を表示したいので
トラッキング用のカメラのViewを覆うサイズまで拡大します。
(Floorなどは非表示にしておきます。)
先ほど作成したマテリアルを適応します。
ViewPortのアスペクトで拡縮するので、
トラッキング用のカメラで再生すれば正しいアスペクトで再生されます。
5.BluePrintで再生システムを組む
OpenLevelBlueprintで、Playボタンを押すとトラッキングカメラが動画と同時にループ再生される
簡易プレビューの仕組みを作成します。
(BlankなどでPlayerStartがデフォルトで配置されている場合は消してください。)
左のVariableのパネルからMediaPlayerをObjectとして定義、そこから先ほどのMoviePlayerを探して適応します。
Compileを押すと先ほど作成したMediaPlayerが選択できるようになるのでそちらを選択します。
シーンに出ているアセットをDrag&Dropし、Setを選択することで
BluePrintで扱うことができるようになります。
OpenSourceのMediaSourceは再生する動画を指定しましょう。
EventBeginPlay(始まって再生される瞬間)からの流れを順番に組み立てます。
最終的に画像のような形になりました。
初歩的な実装のためBluePrintの細かい使い方は割愛しますが、
こちらが参考になりました。
6.3Dアセットの配置(UE)
合成したい任意のアセットを配置します。
アイレベルの確認のため、Floorのアクタを表示して
トラッキング用のカメラのPilotモードで置いていくのがよさそうです。
ライティングなど自由に調整します。
7.アルファ付きの連番pngを書き出す(UE)
MovieRenderQueueで背景透過でレンダリングします。
Edit>ProjectSettings>Engine-Renderingから
Enable alpha channnel support in post processingの設定を
"Allow therough tonemapper"に変更します。
設定を反映するためRestartするかポップアップが出るので、
流れでプロジェクトを再起動します。
SkySphereやfog、Floorなど不必要な背景の要素は
シーケンサーの"Actor Hidden In Game"のVisibilityをfalseにすることで
レンダリングに表示されないようにしておきます。
レンダリングの設定をします。
今回はデフォルトで用意されていたStill_Draftを選択し、
png SequenceのExportを追加し、Write Alphaをtrueにします。
透過の連番pngで書き出すことができました。
8.シャドウのみをレンダリングする(UE)
Floorを消してレンダリングしたので、落ち影がレンダリングされていません。
影は別でレンダリングして後からAEで合成していきます。
LightSourceのRotationで日光の時間帯、SourceAngleで落ち影のシルエットを調整して
実写に馴染むよう調整します。
対象のアセットのHiddenShadowとActor Hidden in Gameをtrueにします。
この設定で再生時にメッシュは表示されないけれど影のみが表示できます。
Floorには反射のない真っ白なマテリアルを適応して、
不必要なアセットは先ほどのレンダリングと同様にActor Hidden in Gameで
消した状態で書き出します。
影の連番pngの用意ができました。
これでUEからの書き出しは終了です。
9.コンポジット(AE)
AEでそれぞれを合成していきます。
影のみの動画は乗算で好きな濃度に調整していきます。
任意の拡張子に書き出して完成です。
おわりに
かなりのボリュームですが一度ワークフローを確立すると
汎用的に使いまわせそうですね。
UEはどんどんアップデートしていくので、
現在はもっと簡単な方法があるかもしれません。
ご存知の方は是非教えていただけると嬉しいです。