最近、諸事情でUE4に触る機会が少ない。しかしドンドン進化するUE4をもっと使えるようになりたい。
というわけで始まった、UE4を触って得た何かを、毎週記事にして、UE4に慣れ親しんでおこうという突発企画。
いつまで続くかはわからないが。
今回の元ネタ・参考記事
Unityシェーダーを使って、お絵かきする人の記事を見て、じゃあUE4のマテリアルで同じことやってみよう、という話。
２色に塗り分ける
以下のようなMaterial Function、「MF_SimpleStep」を用意
中身はUnityのシェーダでいうところのstep関数。UE4標準でValueStepという、同じようなことを実現する関数があるが、個人的に使い勝手が悪いので自作した。
これを使えば、簡単に２色に塗り分けられる。
円
「MF_DrawCircle」を作成。
これを使えば円を描画できる。
アンチエイリアスな円
「MF_DrawSmoothCircle」を作成。
これを使ってアンチエイリアスの効いた円が描ける。
繰り返しの輪
参考スライド43枚目以降を参考に実装。
frequencyの数字を大きくすれば細かい輪を描画できる。
大きさが変化する輪
結果
TimeノードをSin関数に流すことで、-1から1までの範囲でなめらかに変化する値が得られる。その絶対値を取れば、0から1までの範囲でなめらかに変化する値が得られる。
この値を使って、円の内側と外側の円の半径の長さを決定する。先程作成した「MF_DrawCicle」関数を２つ使って輪の外側と内側を作成し、外側を内側の円でくり抜けば、大きさが変化する輪が作成出来た。
縞模様
縦縞を生成する「MF_Strive_U」。
TexCoordにR値でマスクを掛けると、U方向のグラデーションが得られる。
あとは、こちらの記事を参考にすれば実装できる。
横縞を生成する「MF_Strive_V」は、TexCoordをG値でマスクを掛けて得られるV方向のグラデーションを使えばよい。
市松模様
こちらの記事にして実装。
時間で変化するハート模様
ハートを描く数式にはこちらのサイトのものを、実装自体は参考スライド49枚目以降を参考に実装した。
Customノードの中身は以下。
st = (st - float2(0.5, 0.70)) * float2(2.1, -2.8); return pow(st.x, 2) + pow(st.y - sqrt(abs(st.x)), 2);
まとめ
UE4のマテリアルは、Unityのシェーダと違い、作成途中の計算結果を、簡単にプレビューできる為、試行錯誤が容易にできる。触っていてとても楽しいので、もう暫く遊んでみたい。
