【UE4】UE4でブロックノイズを作成してみた！

こんにちは、情熱開発部プログラム課の今井です。
早くも3月、暖かくなり桜も咲き始める季節ですね！コロナが落ち着いたら桜の名所など巡りたい気持ちでいっぱいです。

さて、今回は下のGif画像のようにフェードインやフェードアウト、更にはデジタルチックなエフェクト演出などにも活用できるブロックノイズをUE4で作成してみたいと思います。

※この記事ではUE4のVer.4.27.2を使用しています。

ブロックノイズとは

ブロックノイズとは下の画像のように四角形(ブロック)を並べたような模様のノイズです。

ブロックノイズを作成してみる

ブロックノイズを作成するにはランダムの値が必要になります。今回ランダムの値を生成するため、ランダムな値を返す関数 on GLSLのサイト様の擬似ランダム関数を参考にさせていただきました。

Customノードを利用する

今回は調整するパラメータ以外はできるだけCustomノードにまとめようと思います。初めにCustomノードを追加するとこのように表示されます。

Customノードの特徴として詳細のCode欄にhlslを記述することができます。現在は「1」が入力されており白色が渡される状態になっています。Code欄内で受け取りたい変数などは「マテリアルエクスプレッションカスタム」の「Inputs」に追加します。「Inputs」に追加するとノードの入力ピンに反映されます。

今回はCustomノードに「BlockNoiseBW」と名前を付け、4つのinputsを追加しました。
UV：テクスチャUV
SplitU：横の分割数
SplitV：縦の分割数
Variation：他のパターンのための値

次にCode欄に以下のコードを追加します。

float3 output;
float2 split;

// 分割数
split = float2(UV.x * SplitU, UV.y * SplitV);
// 擬似ランダム
output = frac(Variation+sin(dot(floor(split),float2(12.9898,78.233))) * 43758.5453);

return output;

最後にCustomノード「BlockNoiseBW」の入力ピンを分割数などの値を繋げると白黒のブロックノイズが完成します。

ノイズのカラー化

先ほど作成した Customノード「BlockNoiseBW」は白黒の色情報しか出力されないのでカラーに対応したブロックノイズを同じくCustomノードで作成していきます。カラー対応版のCustomノードには「BlockNoiseColor」という名前を付けます。

カラーに対応させるために先ほどの白黒のCustomノードのCode欄の一部分を編集します。

修正する箇所

// 擬似ランダム
output = frac(Variation+sin(dot(floor(split),float2(12.9898,78.233))) * 43758.5453);

修正後

// ベクターノイズ関数から色を取得
output = MaterialExpressionVectorNoise(
			frac(Variation+sin(dot(floor(split), float2(12.9898,78.233))) * 43758.5453) * 100.0f,1,0,1,100).xyz;

変更後に追加されたMaterialExpressionVectorNoise関数はマテリアルエディタのVectorNoiseノード内で扱われている関数です。マテリアルエディタ内でVectorNoiseノードを繋げてもよいですが、よりマテリアルエディタでの見た目をスッキリさせるためにCode欄内に含めました。MaterialExpressionVectorNoise関数はRGBのカラー情報を返すため、この関数の力を借りてカラー化対応します。

本来Positionの値を受け渡す第一引数で100が掛けられていますが、これはカラーの有効数を増やすためです。MaterialExpressionVectorNoise関数またはVectorNoiseノードに入力されたPosition値からカラー情報を生成する際、少数点以下はカラーに影響を与えません。ですので擬似ランダムで生成される0～1の値からカラー情報を生成するには厳しいため100を掛けています。

わかりやすいように1～5の値を掛けた際のカラーを順に下に並べてみました。

掛ける値は用途に合わせて変更いただければと思います。

これでカラー化対応ができました。
レベルにPlaneを配置しマテリアルを適応させると最初の「ブロックノイズとは」の項目で載せた画像のように表示されます。

最後に

今回はUE4でブロックノイズ作成いたしました。
同じようなノイズはVectorNoiseノードのモード、CellNoiseでも作成できますがバリエーションを変えようとすると難しいと思います。
ノイズ系は使用用途が多く、活用例で紹介した方法以外にも様々な用途で活用できそうですね。ぜひブロックノイズを活用して見栄え向上に役立てることができれば幸いです。

参考文献

以下のサイトを参考にさせていただきました。ありがとうございます。

・ランダムな値を返す関数 on GLSL
・【Unityシェーダ入門】シェーダで作るノイズ５種盛り
・シェーダでトランジション（ノイズ） – 空の缶詰

【免責事項】

本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。