Let's Enjoy Unreal Engine

Unreal Engineを使って遊んでみましょう

UE4 レンダリングレイヤー機能を使ってリアルタイムコンポジットする

どうも、こんにちは。今回が平成最後の更新となります。元号が令和になってもここは引き続き更新していく予定ですので、どうぞよろしくお願いします。

今回はUE4.22から導入された非常に強力な新機能であるレンダリングレイヤー機能を使ってリアルタイムコンポジットを行います。本来コンポジットはAfter Effectsなどの専用ツールを使って行いますが、UE4内でも強力なコンポジットを行う事が可能となりました。ちなみにリアルタイムコンポジットについては既に英語だけですが、ドキュメントが用意されており、こちらを読むことで今回の内容についての全容を知ることが可能です。

docs.unrealengine.com

これまでもUE4内でコンポジットするのであれば可能でしたが、それなりに手間がかかってしまっていた事と、レンダリングレイヤーが導入されたので非常に簡単に扱う事が出来るようになりました。

それでは早速使ってみましょう。

プラグインレンダリングの設定

まずはコンポジット機能を使うためにプラグインをオンにする必要があります。Composureプラグインをオンにしましょう。

f:id:alwei:20190430131601p:plain

次にコンポジットするためにプロジェクト設定のレンダリング設定からポストプロセス時のアルファチャンネルをオンにします。下記のように"Enable alpha channnel support ~"で"Linear color space only"にしておきます。

f:id:alwei:20190430132323p:plain

これでひとまず設定はOKです!!これらを設定すると一度エディターの再起動を促されて、全てのシェーダーの再コンパイルが走ります。しばらく時間がかかるかもしれませんので、ゆっくりお待ちください。

コンポジットを行う前の準備

まずはコンポジットを行うための基本の使い方を理解します。エディター上部メニューから、"Composure Compositing"と"レイヤ"の2つのウィンドウを開きます。開いたウィンドウはどこでもいいので、タブとしてドッキングさせておきましょう。

f:id:alwei:20190430133226p:plain

コンポジットをするためには必ずデフォルトのカメラが必要となりますので、何かしらカメラをひとつだけ配置しておきましょう。

f:id:alwei:20190430133749p:plain

更にもしレベル上にAtmospheric Fog(大気フォグ)を配置している場合、意図的にレンダリングオフにするか、削除しておきましょう。大気フォグはライトがない状態でも背景をレンダリングしてしまうため、意図せず合成情報に含まれてしまうことがあります。

f:id:alwei:20190430134100p:plain

これでコンポジットを行うための準備が整いました。

レンダリングレイヤーを使う

今回導入された新機能の中でも、特に強力なのがレンダリングレイヤー機能です。名前の通り、レンダリング自体をレイヤー化できます。これはUE4に既に用意されているアクターのレイヤー機能と組み合わせて利用します。まずは配置されているアクターをレイヤーに入れたいものだけを複数選択しておきます。空のレイヤウィンドウ内で右クリックして、レイヤーにアクターを追加します。レイヤーは必要な数だけ追加してください。レイヤーに追加すると、まとめて選択したり、まとめて表示非表示の切り替えなどが出来るようになります。

f:id:alwei:20190430135040p:plain

これでレンダリングレイヤー機能が使えるようになりました。実際にレンダリングレイヤーが力を発揮するのはこの後の工程となるので、ここではレイヤーだけを先に作っておきましょう。

コンポジットエレメントの追加

次にコンポジット用のエレメント(要素)を追加しておきます。まずはコンポジット全体を管理するルートコンポジットエレメントを配置します。空の"Composure Compositing"ウィンドウ内で右クリックして、"Create New Comp"を選択します。

f:id:alwei:20190430135820p:plain

"Empty Comp Shot"を選択します。

f:id:alwei:20190430135917p:plain

空のComp Shotというものが出来あがりました。この中に様々なコンポジットエレメントを追加していきます。"Composure Compositing"内に作成されたComp Shotを右クリックします。"Add Layer Element"を選択します。

f:id:alwei:20190430140059p:plain

次に作成するレイヤーエレメントを選択します。よく使うクラス内の3つのエレメントのどれかを追加します。

f:id:alwei:20190430140244p:plain

それぞれについてを軽く説明します。

Media Plate

動画や静止画を扱うためのエレメントです。動画はMedia Textureとしてオフラインで作成されたものはもちろん、特定URLから取得した生放送の動画でも利用できます。静止画も通常のTextureが利用可能で、特定の色を抜いて背景と合成するクロマキーカラーも設定可能です。

CG Layer

配置されたアクターをレイヤーとして扱うためのエレメントです。レイヤーとして利用可能なため、特定アクターのみをレンダリング、もしくは特定のアクター以外をレンダリングといった事が可能です。恐らく合成時に最も重要なエレメントです。

CG Matte

配置されたアクターをレイヤーごとに白と黒だけの情報としてレンダリングし、いわゆるマスクテクスチャーとして利用可能となるエレメントです。特定のアクターのみ加工したい時は別途After EffectsPhotoshopなどで利用するために使えるエレメントです。


この他にも、"全てのクラス"から選択可能なDepth Compやエンジンコンテンツとプラグインコンテンツをオンにした時にだけ利用可能なRadial Comp、Ramp Compといったコンポジットエレメントがあります。これらのコンポジットエレメントはブループリントとなっているので、これらのブループリントを継承することで、自作のコンポジットエレメントを作成する事も可能です。

今回はひとまず、CG Layerエレメントを追加してみます。

f:id:alwei:20190430141910p:plain

CG Layerエレメントを2つ追加しました。これらのレイヤーエレメントにアクターを追加しましょう。CG Layerを1つ選択し、詳細内の"Input"にある、"Capture Actors"で+ボタンを1度押してみましょう。"Actor Set"の"None"を選択し、既にアクターが格納されているレイヤーを選択しましょう。ちなみに"IncluesionType"を"Exclude"にすると条件が逆となり、レイヤーに格納されているアクター以外全てをレンダリングする事が可能です。

f:id:alwei:20190430142101p:plain

これでCC Layer内にレイヤーとそのアクターが設定されました。それぞれのレイヤーを選択するとミニプレビューウィンドウが表示されます。

f:id:alwei:20190430142408p:plain

それぞれ個別にレンダリングが行われていることがわかります。ちなみにCG Layerエレメントの代わりに、CG Matteエレメントを追加すると、以下のように特定のレイヤー情報だけのマスクを簡単に作ることも出来ます。

f:id:alwei:20190430143119p:plain

これでコンポジット用のレンダリングエレメントが追加されました。次はいよいよコンポジット作業を行います。

コンポジット用カスタムマテリアルの追加

これらをコンポジットするためのカスタムマテリアルを作成します。やることはレイヤーの数だけ"TextureSampleParameter2D"ノードを用意し、"Over"ノードで"A"と"B"をそれぞれ接続し、"Material Domain"を"Post Process"に変更した状態で、エミッシブカラーに接続するだけです。ここで必ず間違えてはいけないのが、"TextureSampleParameter2D"ノードのパラメーター名を必ずCG Layerエレメントのアクター名と同じものにしておく事です!パラメーターに設定されているデフォルトのテクスチャーは無視されますが、空のままにしておくとエラーが発生するので、デフォルトのままにしておきましょう。

f:id:alwei:20190430144046p:plain

Overノードは"A"のレイヤーを"B"のレイヤーの上に表示するように合成してくれるマテリアル関数となっています。他にもコンポジット用に用意されたマテリアル関数が標準でいくつか用意されていますので、ドキュメントを参考の上でご利用ください。

docs.unrealengine.com

カスタムマテリアルが用意できたら、最初に追加したルートコンポジットエレメントに対して、カスタムマテリアルを適用します。詳細から"Transform Passes"という部分を探します。

f:id:alwei:20190430144942p:plain

カスタムマテリアルを適用すると、複数に別れていたレイヤーの情報が合成されている事がわかります。ルートコンポジットエレメントを選択してみてください。

f:id:alwei:20190430145058p:plain

AとBのレイヤーのみがレンダリングされていることがわかります。これはあくまでも別のレイヤーとなっているので、UE4内での3D位置情報の前後関係も無視します。試しにカスタムマテリアル内で"Over"ノードのAとBの接続を逆にしてみます。

f:id:alwei:20190430145238p:plain

3D上ではキューブやシリンダーの方が後ろに存在するはずですが、カプセルやコーンが後ろにレンダリングされています。つまり別レイヤーとしてそれぞれレンダリングされたものが合成されている事となります。これは非常に強力な機能となり、一度個別にレンダリングしたものを後から参照し、最終的に別の結果として出力が可能となります。

UE4はこれをリアルタイムに可能とするためにリアルタイムコンポジットと呼ぶようになったのでしょう。これはGPUパワーさえ許せば同時に複数の情報をレンダリングし、それをそのまま合成する事が可能となります。もちろん生放送の動画を合成する事も出来ますし、別システムで構築したものでさえUE4上でそのまま流しながらリアルタイムに合成するといった事が可能です。

応用テクニック

このリアルタイムコンポジットにはまだまだ応用テクニックがたくさんあり、合成した映像をそのままシーケンサーレンダリングする事も当然できますし、必要なパス(デプスやノーマルなど)のみを書き出すといった事や、入力、出力要素の切り替えもできますし、コンポジットパスはブループリントでカスタム可能になっているので、独自のコンポジットシステムを作るといった事も可能です。非常に応用範囲が広く、あらゆる映像分野で利用可能な強力な機能です。

今回はそこまで検証しきれていませんが、ひとまずUE4のラーニングプロジェクトのシーケンサーデモを使って簡単な合成を行ってみました。

f:id:alwei:20190430152619p:plain

f:id:alwei:20190430152636p:plain

f:id:alwei:20190430152655p:plain

合成品質としても文句ありません!ぜひもっともっと面白い合成を試してみましょう!!上手く使えばUE4だけでコンポジットが出来るようになるかもしれません。

背景素材提供

フリー素材ぱくたそ(www.pakutaso.com)
www.pakutaso.com