スタイライズド レンダリングのポストプロセス

UE4 に同梱されているスタイライズド レンダリング ショーケースに使用したポストプロセス エフェクトの概要

Windows
MacOS
Linux

PostProcessHeader.png

サンプルの中で優れた機能のひとつとしてポストプロセスがあります。ポストプロセスは主にトゥーンのようなアウトラインをシーンのオブジェクト周りに作成するために使用します。また、シーン全体に紙のようなテクスチャのオーバーレイをもたらしたり、ビューの外側にアーティストのテープ エフェクトを作成するためにも使用します。ポストプロセス エフェクトは、単一のポストプロセス ボリューム内で全て処理されます。この Post Process ボリュームはポストプロセス エフェクトで最も重要な部分であるポストプロセス マテリアルを含んでいます。ポストプロセスのエフェクトとしてマテリアルを機能させるには、2 つのプロセスがあります。以下にその手順を紹介します。

このシーンのために作成したほとんどのマテリアルは、実際に マテリアル インスタンス定数 を用いて適用されています。マテリアルの再コンパイルを待たずにプロパティの調整や微調整を迅速に行うことができます。

ポストプロセス マテリアルは、必要な場合に限り注意して使用してください。色補正や調整、ブルーム、被写界深度や他の様々なエフェクトに対しては、可能な限り最適化がされていてより効率的な Post Process ボリュームに継承された設定を使うようにしてください。

パラメータを取得するには、ポストプロセス マテリアルからマテリアル インスタンスを作成する必要があります。

ポストプロセス マテリアルを設定するためのチュートリアルが必要な場合は「ポストプロセスのマテリアルのドキュメント 」を参照してください。

スタイライズド ポストプロセスのマテリアル

PostStylized.png

このマテリアルは一連のエフェクトに分かれます。概要は以下の通りです。

  • オブジェクトの周囲にアウトラインを作成する。

  • アンビエント オクルージョンが存在しない領域にのみそのラインを描画する。

  • シーンのオブジェクトの周囲のそのラインの全体的な色彩を調整する。

  • ビューの縁部に表示される彩度を調整する。

  • アーティストのテープ エフェクトを作成するためにビューの端部をマスクアウトする。

  • 紙のように見えるテクスチャ オーバーレイを作成する。

ポストプロセス マテリアルはかなり技術的なため、Unreal Engine 4 で初めてマテリアルを作成する場合は難しいかもしれません。ここでの目的は、段階的に再現する説明ではなく、マテリアルが機能する目的と性質を概観することです。

エフェクトの各セクションがどのように作成されているかを理解するために、M_PostProcess_Base および M_PostProcess_Paper Materials を開くことをお勧めします。

ツール アウトライン

Outline.png

上記の画像 では、アウトラインを処理するポストネットワークの一部を抽出して、エフェクトをより鮮明にするためにそれを単独で表示しています。

このエフェクトは M_PostProcess_Base マテリアル内に表示されます。主に Line Render とコメントされているセクションです。

上記の各画像 をフルサイズで表示するには、各画像を 右クリック して [Save As] を選択してください (スタイライズド ショーケース内には、マテリアル ネットワークもあります)。

シーンに表示されるオブジェクト周りのアウトラインは、SceneTexture 式でシーン深度をサンプリングして処理しています。その後 UV 座標を少しだけ正と負の方向へ水平、垂直に凹凸をつけてオフセットしています。結果は組み合わされて、アウトラインの位置を定義するために使用されます。

しかしラインが実際にレンダリングされる前に、2 番目の SceneTexture はアンビエント オクルージョンで計算されています。これはアウトラインを隠すために使用します。ワイヤーフレームの端に表示されるいくつかの内部ラインを防ぐことが目的です。以下でこれらを可視化できます。

AO マスキング前

AO マスキング後

紙のようなエフェクト

ビューの外側付近に見られるアウトラインは、実質的には 2 つの部分から構成されるエフェクトです。スクリーンの最も遠い端は、紙のようなテクスチャに変換されています。そのちょうど内側は、スクリーンの端へ視覚的に関心を引くために過度に彩度の調整がされています。

これは、主に特別にスクリーンに位置合わせしたテクスチャを使用して処理されています。テクスチャはマスクを保持するために R、G、B チャンネルを使用します。以下はテクスチャと各チャンネルです。

T_MaskedPaper_Screen_RGB.png

T_MaskedPaper_Screen_R.png

T_MaskedPaper_Screen_G.png

T_MaskedPaper_Screen_B.png

RGB

R のみ

G のみ

B のみ

緑チャンネルでスクリーンの端をマスクした後に、紙のようなテクスチャと色をオーバーレイすることにより、紙の上にペイントされたような効果をスクリーンにもたらします。

これに加え、紙のようなテクスチャはビュー全体へ乗算されて、シーン全体に紙の性質のようなエフェクトが加えられます。

StylizedPaper.png

このシステムの核心は Paper Mask コメント領域内にあります。このネットワークは上記のテクスチャを使用しますが、ScreenAlignedUVs マテリアル関数を利用しています。テクスチャ座標を受け取ってスクリーン領域に適用することにより、テクスチャが効果的にスクリーン全体に広がります。ポストプロセスのマテリアルの一部として使用すると、ビュー全体に広がったテクスチャとなります。

PaperMaskNetwork.png

Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback