moyasiエフェクト館

主にエフェクト関係の記事を上げていこうかと思います。


エフェクトに関係する記事上げてきます
エフェクト関係の記事の内容は緩く募集中
自分がわかる範囲であれば書いていこうかなと。

【UE4】Materialで極座標の処理を自作してみる

f:id:tktknkyo:20190426104909p:plain

はじめに

今回の記事はかなり憶測部分が多いので、間違っている部分が有ると思いますのでご了承下さい

(コッソリ教えて頂けれると幸いです)

 

VerはUE4.21.2です

 

画像の加工などで便利な極座標の処理

便利なので、デフォルトの時点で関数で極座標の処理をするノードが用意されています。

f:id:tktknkyo:20190426105354p:plain

Vector To Radial Value というマテリアル関数です

基本はこれで問題無いのですが、スクロールなどの
ほかの移動などと合わせる際に、どうしてもややこしくなりやすい、うまく制御しにくい。

という部分が多少あったので
極座標の処理そのものから作れば制御しやすくなるのでは?

となったのが、今回処理を自作した理由となります。

 

 

そもそもマテリアルのUVs接続について

 

変形の処理を作る際に、このUVsの接続する情報をある程度把握する必要があるのかなと

 

 

f:id:tktknkyo:20190426110055p:plain

まずはタイリングさせたりする基本である

TextureCoordinateをそのまま接続
単体では全く変化がありません。

 

f:id:tktknkyo:20190426110236p:plain

加算すると、座標が動きます、スクロールの処理を入れたりするときに

使ったりする手段でもあります。

 

f:id:tktknkyo:20190426110412p:plain

乗算すると、タイリングされます。

インスタンスでタイリング数を制御したい場合などに使う手段でもあります。

 

f:id:tktknkyo:20190426110907p:plain

加算でノイズテクスチャを混ぜることで

マテリアルそのものの歪み処理なんかも。

ただ、ちゃんと制御するには、ある程度仕組み解ってないと厳しい部分はあるのでは?と。

 

処理内容としては、恐らくですが、UVsに接続されたRとGチャンネルをそれぞれXとYに置き換え

どこの位置にある数値を取得してくるのか?を定義しているのかなと思います。

 

f:id:tktknkyo:20190426112058p:plain

例えば、RとGが0.5の場合は、ちょうど中心を指定します
そして、このように定数を繋げる場合
Texの情報のXとYが0.5の位置にある数値を、TextureSampleに適用する事になります。

定数を接続する場合、色の情報を、一箇所からとってきて、それを全ての場所に適用する事になります。

 

 

極座標を掛ける処理を考える

 

f:id:tktknkyo:20190426115529p:plain

こちらはHoudiniで作ったものですが
極座標で、いわゆるこの様な処理を作ります。

 

X軸を半径

Y軸を角度

にするようにUE4のマテリアルで処理を作ります。

 

半径の処理を作る 

まずは半径から

 

UVsの接続に使われる情報は、接続している情報の座標をもってきます
なので、Xを半径にしたい場合

 

f:id:tktknkyo:20190426120253p:plain

この右側のグラデーションの数値が、そのまま半径にします。

つまり左側が中心に、右側が外側になるようにします。

左側の数値の低い部分を中心に
右側の数値の高い部分を外側に持ってくるので

円を描くようにすれば大丈夫です。

 

f:id:tktknkyo:20190426120814p:plain

0~1の数値になっていますが、黒い部分を中心に持ってきたいので
0.5を減算する事により、-0.5~0.5になり、中心に0が来るようになります。

 

次に、円を作る手段としては、三平方の定理を利用し、中心からの距離を取得します。

但し、三平方の定理には、XとYが両方必要になってくるのでGチャンネルも必要となります。

 

f:id:tktknkyo:20190426121019p:plain

三平方の定理は、高さと幅を2条し、その平方根が距離となるので

XとYを2条し、それぞれを加算のあと、平方根を出します
そうすると、中心からの距離を取得が可能となります。

この数値はそのまま半径として使用できます。

 

角度の処理を作る

次に角度を生成します。

Y軸が角度になるように処理を作りましょう

先ほどの半径は、中心からの半径を出しました

同じように、こちらは中心からの角度を出しましょう。

 

この時にピッタリなArctangent2というノードがあります。

Atan2と検索すれば出てきます。

 

f:id:tktknkyo:20190426125137p:plain

 

Atan2には、XとYの情報から開き角度を取得してくれるノードとなります。

RがXでGがYなので、合うように設定します。

上半分が真っ黒の理由は、0以下の数値になっているからです。

ほかのツールでもそうですが、Atan2は角度を0~360ではなく、-180~180で取得する事が多いので

上半分が0以下になってしまう、というワケです。

また、真っ白の範囲が広いですが、これは角度をラジアン単位で持ってきているのが原因となります。

 

ラジアン単位の場合、-180~180は、-π~π に変換されます。 

 

この状態では非常に扱いにくいので、扱いやすい数値に変換しましょう。

 

f:id:tktknkyo:20190426125544p:plain

 

左下の3.142とあるのが、πの変わりとなります。

表示上では3.142とありますが、数値的には3.141592になっています(これ以上の小数点以下は設定できないようです)

これを加算する事で、全て正の数となります。

(0~2π)

この数値を0~1にしたほうが扱いやすいので

2πで除算する事で、0~1に変換する事が可能です。

 

最終合成

 

f:id:tktknkyo:20190426130857p:plain

作った角度を半径の処理を、それぞれ合わせて、UVsに接続する事で、極座標の処理が完成します。

 

f:id:tktknkyo:20190426131122p:plain

半径の処理のみで接続すると、このようになります。

これは、RとGが同じ数値になるので、中心からの距離が同じ位置には、同じ場所の情報を参照してくる為です。

 

f:id:tktknkyo:20190426131300p:plain

角度の処理のみで接続すると、このようになります。

半径は、同じ半径の部分に同じ情報を持ってきていましたが

こちらは、同じ角度の部分に同じ情報を持ってくるのでこのようになります。

 

調整部分

最後に調整の部分です。

最初の方で、持ってくる位置の情報は、小数点以下の数値を参照して持ってくる。

とありました。

なので、この仕様を使えば、中心から外に動いたり、回したりする処理が簡単に作れます。

 

f:id:tktknkyo:20190426131822p:plain

半径の処理に、Timeで数値を加算すると、外側から中心に移動するようなスクロールとなります。

ここの数値は、そのまま中心からの距離を取得しています。

その数値が増えると、取得する距離が、どんどんと遠くなっていきます。

一番中心であれば、0→0.25→0.5→0.75→1(小数点以下取得なので0)となる為です。

 

f:id:tktknkyo:20190426132231p:plain

こちらは角度の処理にTimeで数値を加算したものです

こちらは左回りとなります。

原理的には、半径のと同じとなります。

 

原理が分かってくれば、非常に色々流用できる部分はあると思います。

 

今回はここまでとなります。