🌥もこも制作日記🌥

創作に関することを書いていきます。だいたいゲーム系

UE4でRGBずらしPostProcessMaterialを作る

はじめに

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

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

RGBずらしとは

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

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

結果

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

www.youtube.com

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

f:id:sim-mokomo:20180924045937p:plain

作り方

全体のノード

f:id:sim-mokomo:20180924041251p:plain

流れ

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

1. Material を PostProcess用に設定

f:id:sim-mokomo:20180924043548p:plain

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

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

f:id:sim-mokomo:20180924041254p:plain

f:id:sim-mokomo:20180924044405p:plain

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

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

f:id:sim-mokomo:20180924041255p:plain

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

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

f:id:sim-mokomo:20180924043749p:plain

パラメータ

f:id:sim-mokomo:20180924043332p:plain

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

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

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