Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

リアルタイム コンポジット クイック スタート

Unreal Engine 4 向け製品ドキュメント (リファレンスおよびガイドを含む)

Choose your operating system:

Windows

macOS

Linux

CompositingOverview_Layered.png

最も基本的なコンポジットは、CG 背景、中間メディア (ビデオ) プレート、および CG フォアグラウンドの 3 ピース コンポジットです。このトピックでは、Composure を使用して基本的な 3 ピース コンポジットを構築する方法について説明します。

1 - Composure をロードする

手順

  1. Composure プラグイン を有効にします。

    image7.gif

  1. プラグインを有効にしたら、 [ウィンドウ] メニューの [Composure Compositing (Composure コンポジット)] にある [Compositing Tree (コンポジット ツリー)] パネルを開きます。

    image3.gif

2 - ルート コンポジット エレメントを追加する

次に ルート エレメントをコンポジット ツリーに追加します。

手順

  1. [Compositing Tree (コンポジット ツリー)] パネルで右クリックして、メニューから [Create New Comp (新規コンポジットを作成)] を選択します。 [Pick a Comp Class (コンポジット クラスを選択)] ダイアログで [Empty Comp Shot (空のコンポジット ショット)] を選択します。

    image24.gif

    このエレメントは、最終的なコンポジットを表しているため、この時点では何もレンダリングされません。このエレメントでは、他のすべてのエレメントが組み合わせられます。

    移植しやすいように、エレメントを独自のサブレベルに追加することをお勧めします。エレメントはレベル アクタであるため、コンポジット ツリーを他のマップにロードできます。

3 - メディア/ビデオ エレメントを追加する

トップレベルのコンポジットエレメントを作成したら、子エレメントを追加する必要があります。子エレメントはその親に (合成のために) フィードされます。

手順

  1. メディア プレート をコンポジット ツリーに追加します。 [Compositing Tree (コンポジット ツリー)] パネルでそのコンポジット エレメントを右クリックして、メニューから [Add Layer Element (レイヤー エレメントを追加)] を選択します。エレメント タイプを選択するように求められたら、 [Media Plate (メディア プレート)] を選択します。

    image13.gif

    メディア ソースを持たないので、 メディア プレート エレメント は空になっています。ゲーム コンフィグ ファイルで、(上記の GIF のような) デフォルトの静止画像をセットアップします。 [/Script/Composure.ComposureGameSettings] StaticVideoPlateDebugImage="/Game/Path/To/My/TextureAsset"

  1. [Media Source (メディア ソース)] を設定します。
    デフォルトでは、メディア エレメントはメディア ソース (ストリーミング ビデオなど) には接続されません。入力として機能するようにメディア テクスチャを適用できます。エレメントの詳細で、新しいメディア エレメントを選択します。次に、[Details (詳細)] パネルで [Media Source (メディア ソース)] セクション ( [Composure] の [入力] にある) を見つけます。 [MediaSource] テクスチャ プロパティは空になっています。

    image17.gif

    キャプチャ カードを介してライブ ビデオ フィードをエンジンにフィードすると、 メディア テクスチャ が生成されます。まったく同じ方法でそれをコンポジット システムにつなぎます。そのセットアップの詳細については、Unreal Engine のメディア バンドルでのキャプチャ カードの使用を調べてください。

  1. [Chroma Key Color (クロマキーの色)] を設定します。 メディア プレート エレメントには、一連の事前定義済みトランスフォーム パスがあります。それらのパスは、合成する前にメディア画像を調整するためのパスです。その最初のパスは クロマキー処理 用です。 [Chroma Key Color (クロマキーの色)] を選択するには、 [Transform Passes (トランスフォーム パス)] 内にあるキー処理パスで [Chroma Keying (クロマキー処理)] という名前のキー処理パスを見つけます。 [Chroma Keying (クロマキー処理)] を展開すると、 [Key Colors (キーの色)] プロパティがあります。カラー ボックスの横にあるピッカー ボタンを使用して、 [Key Colors (キーの色)] に新しいエントリを追加します。

    image22.gif

    ピッカー ボタンをクリックすると、色を選択できる大きいピッカー ウィンドウが開きます。色を選択するには、画像のどこかでマウスをクリックしてピクセルをサンプリングします。クリックしてドラッグすると、サンプリングしたピクセル全体の平均値が算出されるので、より均質なクロマキーを取得できます。満足できる結果が得られたら、 [Accept (承認)] をクリックします。

    必要な数だけキーの色を追加できます。これは、バックドロップ全体に緑色のシェーディングが複数あって、1 色のキー処理では不十分である場合に便利です。ただし、 [Key Color (キーの色)] に追加した各色に対して、エレメントでは完全なパスが行われ、リスト内のそれぞれの色に対してマテリアルのキー処理が一度実行されます。そのため、パフォーマンスがある程度低下する可能性があります。

    キー処理を行うために調整できる設定は、キーの色だけでなく他にも多数あります。パス内の [Material Parameters (マテリアル パラメータ)] セクションを確認してください。

    image5.gif

    ビルトイン キーヤーでは、画像が線形色空間であると想定されています。画像が別のカラー形式 (logC など) である場合は、キー処理が行われる前に色空間トランスフォームを追加する必要があります。または、キーヤーを独自のマテリアルで置き換えることもできます。

    [Chroma Keying Pass (クロマキー処理パス)] 以外にも、サブジェクトでの緑色のバウンスを除去するための [Despill Pass (スピル除去パス)] もあります。クロマキー処理とスピル除去の詳細については、 ここにある ブログ投稿を参照してください。

  2. 結果をプレビューします。 キーヤーによって行われた処理がどれほど適切であるかが分かりにくいことがあります。エレメントごとに、大きいプレビュー ウィンドウを開いて、画像の個々のカラー チャンネルに注目してください。

    image23.gif

    [Key Picker (キー ピッカー)] ウィンドウと [Level Editor (レベル エディタ)] のプレビュー ペインにも、この両方の機能があります。

    プロセスのこの時点では、完璧でなくても気にする必要はありません。後で合成シーン全体をプレビューするときにいつでも調整できます。

4 - CG エレメントを追加する

メディア エレメントを追加するのと同様に、フォアグラウンドとバックグラウンドのレイヤー用のエレメントを追加します。

手順

  1. CG レイヤー を追加します。 ツリー パネルでトップレベルのコンポジット エレメントを右クリックし、メニューから [Add Layer Element (レイヤー エレメントを追加)] を選択し、 [CG Layer (CG レイヤー)] を選択します。

    image21.gif

    フォアグラウンド オブジェクト用とバックグラウンド オブジェクト用の 2 つの CG エレメントを追加して、適切な名前を付けます。ここでは fg_element と bg_element とします。

  1. シーン カメラにリンクします。 CG エレメントでは、ワールド内のカメラがキューを送るように要求します。そのカメラがレンダリング元の視点を CG エレメントに伝えます。シーン内にカメラがない場合、CG エレメントによって "Missing Camera (カメラが見つかりません)" と表示されます。このエラーは、シーンにカメラ アクタを追加するだけで解決できます。

    image10.gif

    シーンに複数のカメラがある場合は、どのカメラを参照するかをエレメントの詳細 ( [入力] 内の [Camera Source (カメラ ソース)] ) で指定できます。

  1. アクタ レイヤーをセットアップします。 2 つの CG エレメント (フォアグラウンド用とバックグラウンド用に 1 つずつ) ができたので、それぞれにどのシーン アクタがレンダリングするかを指定する必要があります。 これを行うために、レベル エディタのレイヤー システムを利用します。テスト シーンでは、基本的なプリミティブ (キューブ、コーン、球体、シリンダー) を追加しました。コーンとシリンダーをフォアグラウンドに配置し、残りすべてをバックグラウンドに配置します。開始するには、コーンとシリンダーだけのためのエディタ レイヤーを作成します。

    image16.gif

    次に、フォアグラウンドのエレメント (fg_element) で [Capture Actors (キャプチャ アクタ)] プロパティ ( [Composure] の [入力] にある) を見つけて、そこにエントリを追加します。 [Capture Actors (キャプチャ アクタ)] リストでは、CG エレメントが何をレンダリングするかが指定されています。

    image8.gif

    新しい [Capture Actors (キャプチャ アクタ)] エントリで、 [ActorSet] プロパティを、前に作成した [ConeAndCylinder] レイヤーに設定します。そのエントリの [InclusionType] は [Include (含める)] に設定されているため、それらのアクタのみがレンダリングされます。

    プロパティ

    説明

    Include

    指定されたレイヤー内のアクタのみをレンダリングします。

    Exclude

    指定されたレイヤー内のアクタ以外のすべてをレンダリングします。

    必要な数の [Capture Actors (キャプチャ アクタ)] レイヤーをいくつでもエレメントに追加できます。[Include (含める)] と [Exclude (除外)] を混在および組み合わせることができます。 フォアグラウンドのエレメントでは、 [ConeAndCylinder] レイヤー以外はすべて必要であるため、同じレイヤーを使用しますが、 [InclusionType] を [Exclude (除外)] に切り替えます。

    image12.gif

CG レンダリングでコンポジットのオパシティが適切になるように、プロジェクト設定で [Enable alpha channel support in post processing (ポストプロセスでアルファ チャンネル サポートを有効にする)] を [Linear color space only enable (線形色空間のみ有効)] に設定する必要があります。 

![](image2.png "image2.png")

5 - コンポジット マテリアルをセットアップする

4 つのエレメント (トップレベル コンポジット、 メディア プレート 、および 2 つの CG エレメント) ができたので、それらすべてをレイヤー化してコンポジットを生成できるようになりました。トップレベル コンポジット エレメントによって、他のすべてのエレメントがマージされます。コンポジット エレメントにトランスフォーム パスを追加して、他の 3 つのレイヤーを合成するようにセットアップします。

image19.png

手順

  1. コンポジット トランスフォーム パスを追加します。 コンポジット エレメントを選択し、詳細パネルで [Transform Passes (トランスフォーム パス)] を見つけます。 [Transform Passes (トランスフォーム パス)] リストにエントリを追加します。デフォルトのエントリは [Custom Material Pass (カスタム マテリアル パス)] であり、ここではそれを使用します。

    image20.gif

  2. コンポジット マテリアルを作成します。

    1. 新しいパスでは、レンダリングのためのマテリアルが必要です。パスの詳細を展開し、 [Material (マテリアル)] プロパティで新しいマテリアルを作成します。

    image1.gif

    1. 新しいマテリアルが ポストプロセス マテリアルになるように設定します。そうすることによって、結果が正しいチャンネルに確実に出力されます。

    image9.gif

    1. 新しいマテリアルでは、3 つのサブエレメントそれぞれにテクスチャ サンプラーが必要です。そのために、3 つのテクスチャ サンプラー パラメータを作成し、子エレメントに合致するようにそれぞれに名前を付けます。

    image18.gif

    1. これらのテクスチャ パラメータは、3 つの子エレメントからの結果を使用して自動的に入力されます。3 つのエレメントを組み合わせるために必要なのは 2 つの Over ノードだけです。 Over ノードは 入力 A を受け取り、 入力 A のアルファを使用して入力 A を 入力 B 上にレイヤー化します。メディア プレートを 2 つの CG レイヤーの間に入れます。

    image4.gif

    • 1 つの Over ノードを、メディア プレート ( A ) がバックグラウンドのエレメント ( B ) 上にレンダリングするように設定します。

    • 次に、その Over ノードからの結果を使用して、それをもうひとつの Over ノード上の B につなぎます。

    • 最後に、 フォアグラウンド のエレメントを 2 番目の Over ノード上の A につないで、最上位に配置します。

    • 2 番目の Over ノードの出力は、マテリアルの [Emissive Color (エミッシブ カラー)] チャンネルにつなぎます。

    • 保存してマテリアルを適用します。

コンポジット ウィンドウに戻って結果を確認します。3 つのエレメントが 1 つに合成された単一の画像が表示されているはずです。

Over ノードでは float4 の入力が想定されているため、テクスチャ サンプラーの RGBA 出力ピンを使用します。上部にある RGB ピンではありません。

Over ノードは入力 A のアルファ値を使用してブレンドします。デフォルトでは、プロジェクトは、ポストプロセス パイプラインを通じてアルファ データをつなぐようにはセットアップされていません。そのため、CG レイヤーが動作するためには、このプロジェクト設定を有効にする必要があります。

image2.png

6 - コンポジットを出力する

エディタでのプレビューで、満足できるコンポジットのが得られた場合は、この最後の手順は無視してかまいません。ただし、コンポジットの結果をディスクにルーティングする場合、またはキャプチャ カードを介してコンポジットを実行する場合は、 [Output Pass (出力パス)] を使用します。

この例では、キャプチャ カードを介してコンポジットをブロードキャストします。

手順

  1. トップレベルのコンポジット エレメントの詳細パネルで、 [出力] プロパティを見つけて、そのリストにエントリを追加します。そのデフォルトは [Media Capture (メディア キャプチャ)] であり、ここではそれを使用します。

    image6.gif

  2. 新しい出力パスの [Capture Output (キャプチャ出力)] プロパティでターゲットを指定し、新しいアセットを作成する必要があります。

    image15.gif

    このアセットをキャプチャ ターゲット用に設定すると、準備がすべて整います。これで、コンポジット エレメントがブロードキャストを開始するはずです。

シーケンサの使用

代わりに、エンジン内シネマティック エディタである シーケンサ を使用して、コンポジットや AOV をレンダリングすることもできます。詳細については、「 シーケンサによるリアルタイム コンポジット 」を参照してください。

image11.gif

Unreal Engine のドキュメントを改善するために協力をお願いします！どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
閉じる