UE4でRGBずらしPostProcessMaterialを作る

はじめに

Twitterで手軽に見た目をよくする加工の代表例として「RGBずらし」があったので作成してみました。 （他にはブルームとかがありました）

作った後に気づいたんですけど 公式サンプルにRGBずらしがありましたね。

RGBずらしとは

私たちが見ている画面はRGBと言われる光の三原色を組み合わされて描画されています。 このRGBをそれぞれの要素ごとに異なる方向ににずらすことでできるエモい表現を RGBずらしといいます。(記事を書いた後に気づきました、色収差って呼ばれているんですね。)

なぜいい感じに見えるのか言語化したかったですができませんでした、なのでエモいという表現を 使わせていただきます。

結果

結果は動画で見てください。

www.youtube.com

通常の描画との比較がなく、わかりにくかったので極端にRGBずらし効果を載せた画像を載せておきます。

作り方

全体のノード

流れ

1. Material を PostProcess用に設定
2. RGBごとに画面の描画を分解
3. RGBそれぞれのUVをずらし、画面描画をずらす。
4. PostProcessVolumeに作成したPostProcessマテリアルを設定

1. Material を PostProcess用に設定

PostProcess用のマテリアルを作成するときは Material Domain を PostProcess にする必要があります。

2.RGBごとに画面の描画を分解

ComponentMaskを使うことで要素の抽出を行うことができます。これを使い画面描画をRGBごとに分けることができます。画面描画は SceneTexture で取得することができますが参照するテクスチャ選ぶ Scene Texture id を PostProcessInput に変更する必要があります。

3.RGBそれぞれのUVをずらし、画面描画をずらす。

OffsetHogeパラメータを使い、画面描画のRGBごとにUVをずらします。UVに従って描画されている画面描画をこれでずらすことができます。

4. PostProcessVolumeに作成したPostProcessマテリアルを設定

パラメータ

動画で設定したパラメータです。このくらいが丁度良いのではないかと思います。

Unreal Engine 4で極めるゲーム開発:サンプルデータと動画で学ぶUE4ゲーム制作プロジェクト