渋谷ほととぎす通信

完全趣味でやってるUnityメモ。説明できないところを説明できるようにするための個人ブログ。昨日の自分より少しでも大きくなれるように。。。 ※所属団体とは一切関係がありません

横にずれるノイズ風イメージエフェクト


f:id:esakun:20170506064942p:plain

前回からの続きで、今回はノイズのイメージエフェクトを作ってみます。 ノイズと言っても様々なものがありますが、今回はこのようなノイズを作ってみました。
※名前が分かりません

f:id:esakun:20170418164011g:plain
画面トランジションや、キャラの登場などで使えなくもない気がしています。

処理の流れを軽く紹介していきます。全ソースコードは記事終盤で貼り付けていますので、そちらをどうぞ。

C#側の処理

C#側は至ってシンプルで、シェーダに各ピクセルが左右にどれだけピクセルを動かすかという最大float値と、ランダムシードを与えているだけです。

ピクセルを横にずらす値は_HorizonValue変数でこの値が大きければノイズの動く幅が大きくなります。
※実際のコードは記事下部に記載しています

m_mat.SetFloat("_HorizonValue", horizonValue);

ランダムシードは、毎フレーム別の値を与える必要があるため、Time.frameCountでカウントアップさせています。
※別の値を与えないとノイズが動きません

シェーダ側の処理

シェーダ側もシンプルで、以下の処理で、uvの値をイイ感じに調整して今回のノイズを生成します。

float2 uv = float2(frac(i.uv.x + rndU), i.uv.y);

_HorizonValueと乱数生成rnd関数で算出したrndUには[0 ~ 1未満]の乱数値が入ります。
この値が最終的なUV座標のジャンプ値となりますので、現在処理するUV座標i.uv.xに加算します。
i.uv.yには変更を加えず座標変換することでピクセルが横方向のみランダムにジャンプし、今回のようなノイズが生成できます。

サンプルコードはコチラ

step関数、frac関数は便利ですね。

f:id:esakun:20170506065231g:plain
_HorizonValueをとても小さい値にすると、いつかどこかで使えそうなチリチリした表現ができて個人的にはお気に入り。

あわせてどうぞ

www.shibuya24.info

www.shibuya24.info

www.shibuya24.info