【UE4】Materialでいろんな幾何学模様を作ってみよう【★～★★】

※この記事で使用しているUnrealのVersionは04.23.0です。

※この記事のサンプルプロジェクトは以下URLにアップされています。
サンプルプロジェクト

今回はマテリアルでいろんな幾何学模様を作ってみよう！　というお遊びテーマです（いつもお遊びですが）

簡単な模様作り　レベル【★】

最初は簡単なところで「四角形」をベースにした模様を作ってみましょう。

まずは白黒の四角形が交互に連続するパターンです。

↓マテリアルとその結果（ビューの右下のアイコンの中の真ん中「Plane」を選択した見た目です）

なんでこう組むとこうなるの！？　というと、一つ一つ分解していけば簡単です。

まずはTextureCoord(UV)を見てみます。

UVは２つの数字を持っています。
これを１つ１つ分解すると、U側のほうは、左から右に行くにつれて白く、つまり数字が増えています。
V側は下に行くほど数字が増えています。

どちらも一番黒い部分の値は「0.0」で、一番白い部分の値は、「TextureCoord」ノードの詳細で設定した値になります。
ここではどちらもデフォルト値の「1.0」を設定しているため、「U=0～1,V=0～1」の範囲で徐々に値が変化しています。

もう一つ「Append」というノードを見てみましょう。

Appendノードは、AとBにつないだ数字同士を、組み合わせた数字として１つのピンにまとめます。

例えば1.0と2.0をAppendしたら(1.0,2.0)という風に2Vectorの値なります。
※この (1.0,2.0) は、関数グラフなどの座標を表すものと同意です。

ではさっきのノードのUV部分を説明します。

上記は、UVとAppendした2Vectorとの掛け算を行うものです。
その結果、0～1の値のUVに上図では「10.0」をかけているので、
値の範囲は0～10という風になります。

そのあとの「Floor」は単に小数点以下を切り捨てるノードです。

そして最後の部分の処理の説明です。

「BreakOutFloat2Components」ノードは、2Vectorの値をそれぞれ単独の数字（Scalar値）に分けるノードです。

これによりUとVの要素に分け、その後にそれら同士を「Add」ノードにより足してあげます。

そうすると結果は以下のようになります。

そして、「Fmod」を使うと、Aの値をBの値で割ったあまりを返してくれます。

2で割ったあまりを返しているので、結果的に奇数ならば1,偶数ならば0になります。

これをマテリアルに適応することによって、0は黒、1は白になっていたため、白黒の四角い模様ができていたわけです。

では、ここからはいろいろな模様を紹介していこうかと思います。

色んな模様作り　レベル【★ ★ 】

まずは正方形をベースにした模様です

※すべてのノードのキャプチャー内にある「Custom」ノードの中の記述は以下の通りです。

return step(X,Y);

模様その１

模様その２

模様その３

次に正三角形をベースにした模様です

模様その１

模様その２

模様その３

パラメーター違い

模様その４

続いて円形をベースにした模様です

模様その１

模様その２

模様その３

模様その４

最後に六角形をベースにした模様です

模様その１

模様その２

説明雑ですが以上！

※この記事のサンプルプロジェクトは以下URLにアップされています。
サンプルプロジェクト