🌥もこも制作日記🌥

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

UE4.20.3でブラウン管ポストエフェクトを作るの巻

はじめに

前回は「RGBずらし」のPostProcessEffectを作成したのでこれをベースに用いてブラウン管PostProcessEffectを作成してみました。 sim-mokomo.hatenablog.com

結果

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

www.youtube.com

作りかた

全体のノード

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

流れ

  1. 細かい横線を描くノードを組む
  2. 縦線にノイズをマスクさせて粗くする。
  3. 大き目の横線を描くノードを組む
  4. 2と3を結合させて描画をマスクさせる。

1. 細かい縦線を描くノードを組む

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

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

縦線を作りたいので、ここではSin波を使用します。どれだけ大きな値を入れてもSin波は形がループするので繰り返しの表現をしたい時に役立ちます。UV座標をそのまま使用すると横幅の範囲は0~1なのでSin波による縦線は1つしか作れません。なのでUV座標に大きい値を掛け合わせることでSin波の繰り返しを表現しています。

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

そのままSin波をしようすると縦線の間がグラデーションが効きすぎてしまいます。なのでSmoothStep関数を使用することでグラデーションを抑えています。

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

SmoothStep関数を使用すると上の図のようになるます。これで縦線の描画は終わりです。

2. 縦線にノイズをマスクさせて粗くする。

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

1.のままだと線が綺麗すぎてブラウン管っぽくないのでノイズテクスチャを噛ませて粗い線にしてます。 Pannerを使う事でノイズテクスチャに動きを持たせることができます。

3. 大き目の横線を描くノードを組む

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

理論的には1と同じ、ただし今回はブラウン管によくある上から流れてくるノイズを表現したいので1ほどは細かく描画を行わない。

4. 2と3を結合させて描画をマスクさせる。

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

描画結果と合わせます。完成した後は前回作成したRGBずらしのPostProcessEffectと同時に使用することでブラウン管のような表現が可能になります。

パラメータ

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

動画のような描画をする際に設定したパラメータです。

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

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