moyasiエフェクト館

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


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

【UE4】UE4によるパーティクルの歪み

f:id:tktknkyo:20171217083246p:plain

今回はUE4での、パーティクル自体の歪みについての記事となります。

歪みというのは、X軸とY軸を動かす事で、屈折の原理と似たようなものかなと。

 

歪みを使う利点としてテクスチャそのものを変えるような処理であるために、同じテクスチャでも、差分をつくりやすくなるなどの利点があります。

 

歪みを使うには、マテリアルの「TextureSample」のUVの入力ピンに、歪み用のノードを接続します。

f:id:tktknkyo:20171217083804p:plain

ただし、そのまま繋いでもうまく表示してくれません、理由はUVは座標のことであり、テクスチャ(2D)なので、X軸とY軸の2つのチャンネルの情報なのに

テクスチャそのまま繋いでいるので、3チャンネル(RGB)の情報を入れているからです。

間に「componentMask」というノードを挟むと、ちゃんと表示されるようになります。

f:id:tktknkyo:20171217084206p:plain

このノードの役割は、チャンネル数を削減するノードであり

ノード名の横の()内に、削減して使うチャンネルを表示します

この画像の例の場合、テクスチャそのままから持ってきた3チャンネル(RGB)の情報を、2チャンネル(RG)に変えてくれます。

このノードはこのような役割の他に、RとGとBチャンネルにそれぞれ別のグレースケールの情報を入れておき、個別に取り出すこともできます。

f:id:tktknkyo:20171217084928p:plain

ただ「TextureSample」のノードには、この用に元々個別に出力するピンがあります。

なのでこのノードから、ComponentMaskにて1チャンネルの情報を取り出すことは不要になるのですが

f:id:tktknkyo:20171217084735p:plain

この様な、ほかのノードで加工した後に、取り出したい場合には有用です、UE4でのマテリアルエディタで色々加工したい場合には、所々で使う機会はあると思います。

f:id:tktknkyo:20171217085148p:plain

 

上の方で歪みを適用した元のテクスチャはどんなのかといいますと

f:id:tktknkyo:20171217084206p:plain

f:id:tktknkyo:20171217085531p:plain

このような、短調な粒子状のテクスチャになっています

ただ、このままだと全体に模様が出来てしまい、エフェクトとしては使いにくくなってしまっています

なので、もう一つ同じテクスチャを追加し、「Multiply」で乗算すると、丸い形に切り抜かれます。

f:id:tktknkyo:20171217085810p:plain

 

ただ、この状態では、元々あったテクスチャ同士を合わせて、歪みを適用しただけなので、色々な用途に使いやすいか?と言われると正直疑問だと思います。

むしろ、このくらいであれば、テクスチャ自体に加工をしてやれば良いのでは?と、その方がテクスチャの枚数少なくなります。

なので、サムネイルに使った画像の様な、差分を作りやすくする様に組んでいきます。

 

f:id:tktknkyo:20171217090356p:plain

まずは、この歪み処理とある部分です

 

 

f:id:tktknkyo:20171217090534p:plain

この紫の部分の説明です

歪み用のテクスチャを「componentMask」に繋いだあと

Multiply」にて「constant」の定数ノードを掛け算をしています

歪ませるのはX軸とY軸を移動させているのですが、その数値を2倍にすることで、移動量を強くしています、この数値を強くしていくと、模様がどんどん変わっていきます。

DynamicParameter」を代わりにつないで、カスケード上で歪みの強度を操作した動きを作る事も出来ますし

ScalarParameter」を使うことで、マテリアルインスタンスやBP上から操作することも可能です。マテリアルインスタンスについては、下の公式ドキュメントを参考にしてください。

Unreal Engine | インスタンス化マテリアル

BP上での操作について、カスケードで使っているマテリアルのパラメータを変えることもできるのですが、長くなってしまうのと、記事を見かけなかったので、いずれ記事は書きたいと思います。

 

f:id:tktknkyo:20171217091731p:plain

次は、右の方のこの部分

TextureCropping」このノードはUのショートカットキーがあるので、それで出しましょう。

このノードはタイリング処理を行うためのノードであり、シームレスなテクスチャを使う場合は接続する事が多くなるであろうノードです。

また、ノードの詳細部分に

f:id:tktknkyo:20171217092301p:plain

この様な項目があり、ここでタイリング数を変えることができます

シームレスに作ったテクスチャであれば、ここを高い数値にして上げることで、模様が細かくなります。

この後ろの「Add」のノードは、こうやってつなぐもの、と覚えておけばOKです

今回の例ですと、タイリング処理をする部分と

歪みで模様と付ける部分の2種類を適用したかったので

その用な場合は、この「Add」ノードで加算してからUVにつなぐと綺麗につながってくれます。

 

 

f:id:tktknkyo:20171217092853p:plain

次にこの紫で囲った部分です

最初の方の

f:id:tktknkyo:20171217085810p:plain

この部分との違いは

間に「Power」ノードが挟まっていることです

これは、マスク用テクスチャとコメントが入れてあるテクスチャでは

外の方まで白すぎるのではないか?と判断したのでマテリアルエディタ上で調整しています。

このノードの例ですと、このテクスチャを4乗している結果になります

ノード自体に数値を入れていますが、Expとあるピンに、定数ノードなどを入れれば、その数値になるので

こちらも

【「Multiply」にて「constant」の定数ノードを掛け算をしています】

と上の方にある部分同様、「DynamicParameter」や「ScalarParameter」によって、動的に数値を動かすことも可能です。

 

f:id:tktknkyo:20171217093450p:plain

最後のこの部分は、言うまでもないかもしれませんが

カスケード上にて、色を変えれるように「ParticleColor」を繋いでいるだけです。

 

今回はここまでとなります、マテリアルでの歪みは、少々面倒な部分もあるかもしれませんが

画像全体を動かすという、かなり影響の大きい処理であり、更に動的に数値の変更も可能なので

テクスチャをそのまま使っただけではできない用な、内側が蠢いていたりするようなエフェクトを作れたりもしますので、是非活用してくれればと思います。