moyasiエフェクト館

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


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

このブログについて

ブログの名前の通り、エフェクトに関係することを上げていこうかと思います

自分がわかる範囲で、エフェクトに関係することであれば何でもいいかな?とは

エフェクト自体の作り方は勿論の事

エフェクトの再生手段や、エフェクトに使うテクスチャ等

 

エフェクト素材の配布も始めました

(http://tktknkyo.hatenadiary.jp/entry/2017/12/31/095520)

 

 

なお、情報はTwitter(moyasi@エフェクト垢 (@torisutamoyasi) | Twitter)

でも出していたりするので、興味のある方は是非

Twitterではmoyasiという名前になっていますので、tktkでもmoyasiでもどちらでも呼びやすい方で

 

また、Discordにて「エフェクト交流所」というサーバーというのも作りました

ここは、エフェクトを作ろうとしているor作っている人同士で

相談したり、情報の共有したりするのを目的としております。

discord.gg

 

乗算ではなく減算で合成するあれこれ

f:id:tktknkyo:20210125225518p:plain

今回は特定のツールの話というわけではありません

なので、ツールを問わずに影響のある内容だとは思います。

 

【初めに】

 

エフェクトではシームレス(繋ぎ目のない)テクスチャと

●などの形状を乗算して使う事がよくあります。

f:id:tktknkyo:20210125225841p:plain

非常に定番なのはこのような

形状と、ディテール用のテクスチャをそれぞれ乗算するという手法

白い部分だけ映るという、計算結果としては、分かりやすい手段な事に加え

 

f:id:tktknkyo:20210125230049p:plain

ディテール用のテクスチャ同士の乗算や

同じテクスチャでも、タイリング数のみ変えたものの乗算でディテールを細かくしたりもできます。

同じテクスチャを使う場合であれば、使うテクスチャの数も増えないというメリットもあります。

 

乗算、いわゆる掛け算にはなるのですが

こういう場合での乗算は主に暗くする場合に使われます。

そして減算はそのまま引き算なので、当然暗くなります。

 

ではこの二つの違いの部分について色々と書いていきます。

 

 

【原理的な内容】

 

原理そのものは非常に簡単で

両方とも普通の計算式でしかありません

例えば1に対して0.5の場合

 

乗算であれば

1*0.5=0.5

 

減算であれば

1-0.5=0.5

 

で変化はありません

ですが1の部分や0.5の部分の数字か変われば当然結果は変わってきます。

画像同士の合成でも、これがそのまま当てはまります。

(画像同士で想定する場合、両方0-1の数字で考えてください)

 

【色々違い検証】

 

f:id:tktknkyo:20210125230956p:plain

まずは乗算でよく使う形状を取るための乗算

乗算は明るい部分、減算は黒い部分が残るので

減算する場合は白黒を反転させましょう。

 

 

f:id:tktknkyo:20210125231131p:plainf:id:tktknkyo:20210125231159p:plain

左が乗算でしたもの

右が減算でしたもの

 

同じ画像ベースでしている場合、中央を抜いてきているのは同じではあるが

結果としてはこのような違いがある。

乗算の方が、合成に使った円の形状が見えやすい

 

理由としては、先ほどの計算式で当てはめる場合

減算でのみ真っ黒になっている部分というのは

計算でいえば0.5同士の部分というのが近いと思われる。

 

乗算は0.5*0.5=0.25で

薄いながらも灰色がしっかり残っているが

減算は0.5-0.5=0で

完全に真っ黒になる

 

f:id:tktknkyo:20210125231807p:plain

つづいてノイズ同士の合成の場合

 

f:id:tktknkyo:20210125231855p:plain

ノイズ同士を乗算した結果がこちら

暗めではあるが、全体にノイズがしっかり残っている

 

 

f:id:tktknkyo:20210125232018p:plain

つづいてこちらが減算したもの。

合成する側の白黒反転は入れたものの

 

非常に暗いです、当然選んだテクスチャが悪かったなどなどはあると思いますが...

その辺は実際に合成してみて色々試すしかないという部分は当然ありますが

 

基本的に減算は、真っ黒な領域が出てきやすいです。

真っ黒=0なので

減算したあとに、定数で乗算しても真っ黒のままです

そうなってくると、どうしても都合の悪い部分も出てきたりします。

 

そしてなによりUE4のマテリアル内などでする場合だと負の数にいきやすいです。

そうなってくると、定数で乗算するとどんどん暗くなります

ブルームで発光させたいのに一部はむしろかなりくらいなど、そういうのが起こります。

Clamp入れれば解決しますけど、あくまで一つの例として

 

f:id:tktknkyo:20210125233153p:plain

個人的に好きな例としては

雲模様とグラデーションで減算して炎のベースを作るものなどがあります。

これは小さい黒い領域の出やすい減算なのでやりやすい所もあると思います。

 

 

ゲームエンジン内で減算を使う場合は色々処理で面倒な部分があるのが正直な所ではありますが

画像そのものを作る段階で、形状を出したい場合であれば減算は中々便利な手段だと思います。

 

 

【差の絶対値について】

※2020/01/30追記

 

記事を完成した後でしたが

差の絶対値も触れておいたほうが良いと思ったので追記しておきます。

 

差の絶対値、PhotoShopなどにある合成方法の一つで

計算としては【引き算した後に負の数を正の数に変換したもの

 

負の数を正の数への変換は内部的にはおそらく二乗してから平方根だと思われます

(内部の計算式は自分で実装する場合以外は気にしなくてもいいです。)

 

f:id:tktknkyo:20210130183904p:plain

まずはグラデーションと雲模様の合成結果

雲模様から、グラデーションで差の絶対値で計算しています。

 

 

f:id:tktknkyo:20210130183951p:plain

先ほどの画像では解りにくいと思うので

拡大したものがこちら

 

減算の結果は上の部分は大体真っ黒になっていましたが

その黒い部分も白くなっています。

 

ただ、これではどのようなものに使うのか?が解りにくいと思うので

もう一つ例を出します

f:id:tktknkyo:20210130184311p:plain

三つ縦に並んだものの、一番下が差の絶対値での結果です

今度は〇の形状のものを使用しました。

 

そして一番右にあるのは、解りやすく色を極端にしたものです

 

f:id:tktknkyo:20210130184500p:plain

拡大するとこのような模様が出来上がっています。

ノイズの影響で四角に近いですが

計算に使った〇の形状と似た形状の、ノイズの掛かったラインが出来ているのが解ると思います。

差の絶対値を使う場合のメリットとしては

ノイズの掛かった細い筋などを作りたいときに便利な手法の一つです。

 

使う場面としては、減算や乗算に比べれば少ないとは思いますが

このような細い筋のようなものを作りたいときは、試してみるのもありだとは思います。

 

一つ注意としては、差の絶対値の場合

計算途中に負の数を持つことが必須になります

ツールによってはやりにくい場合もあると思うので、そこは注意してください。

 

SubstanceDesignerで差の絶対値を使う場合は以下の記事を参考にしてください。

tktknkyo.hatenadiary.jp

 

 

 

 

 

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

ちょっと変わった内容になりましたが、また何か思いついたら定期的に記事を書いていければなと。

 

 

 

【Photoshop】オーラ系のテクスチャを標準機能で作る

f:id:tktknkyo:20210109151525p:plain

 

 

【初めに】

Photoshopでエフェクトでよく使うオーラ系のテクスチャを作ろう、という内容です。

プラグインにその手の機能はありますが、今回は標準機能だけでできる内容です。

 

また、サムネイルはやや雑ですが、この記事は手描きがメインとなるので

どのくらい綺麗で使いやすいものができるかは、人によってだいぶ違うと思います

 

 

【実際に作っていきます】

 

f:id:tktknkyo:20210109152058p:plain

まず、黒塗りつぶしてからの雲模様のレイヤーを二つ作ります

そして上のレイヤーを「比較(暗)」で合成します。

雲模様は違う模様が必要なので、雲模様を作ってからのコピーは不可です

 

とはいえ、この部分はあくまでも目安で使うので、必ず必須というわけではありません。

 

f:id:tktknkyo:20210109152248p:plain

その合成結果はこのようになります。

そこまで変化があるわけでありませんが、赤枠の部分にひっそりと筋みたいなのが出来ていると思います。

 

一応似たようなディテール自体は、雲模様1を適用後の雲模様2でも出来るのはできます。

今回大事なのは、レイヤーの合成でこのディテールを作ったことです。

 

f:id:tktknkyo:20210109152523p:plain

そして今回は、三つの赤枠の部分から、一番右の部分をなぞるように

白で、両方のレイヤーに塗りました

どちらかのレイヤーを白で塗るとわかりますが、筋のようになっていた部分が若干動いたり明るくなったりします。

 

あとはこの要領で、白や黒を塗っていくだけです

 

f:id:tktknkyo:20210109153317p:plain

コツの一つとしては、このような白と黒の緩急の激しい場所を作りたい場合

真ん中の左右(もしくは上下)が黒くなっていますが

片方のレイヤーで右側を黒く塗り、もう片方のレイヤーでは左側を黒く塗る

というように、黒い場所が二つのレイヤーで被らないようにするといいです。

 

暗い方の色をとってくるので、片方だけ黒かったら結果は黒くなります

逆に白色を足す場合は、両方のレイヤーを白く塗ります

 

ただ位置が一緒だと、そのまましろ塗っただけになるので

そこから、二つのレイヤーで別の場所に黒色を足していくといいです

 

 

とはいえ、この部分はおそらく普段から手描きに慣れている人の方が私より慣れやすいと思います。

 

 

 

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

 

 

【Niagara】スクラッチパットで三角関数を使った発生位置の制御

f:id:tktknkyo:20210103164544p:plain

Verは4.26です

 

 

【初めに】

発生位置に三角関数を使うやり方

以前にも似たような内容は書きましたが

tktknkyo.hatenadiary.jp

 

こちらの記事は

既存の「Niagara Dynamic Imput Script」

が主体のやり方だったので、別の手法のやり方として

 

とくに以前のVerではなかったスクラッチパットの機能のおかげで

作りつつ、アセットにもできるような機能も増えたので

今後はスクラッチパットで作る機会も増えそうなのでこの機会に

 

 

【スクラッチパットについて】

いわゆるモジュールを作るのと同じノードベースで作れる機能ではありますが。

こちらは、Niagaraのエミッターやシステム編集中でも新しく作り

それをそのまま適応するのもそうですが

アセットとして出力することもできます

 

試しで作ってみて、汎用性があったらアセット化して

そうでない場合はそのエミッターやシステム内でのみ使う、という選択が可能です。

 

 

【下準備】

今回はあくまでスクラッチパットの機能の記事なので

f:id:tktknkyo:20210103165434p:plain

エミッターはテンプレートのこれから作っていきます。

 

上に動く動きがついているので、それでわかりにくい場合はチェックを外していきます。

座標は最後に上書きすればいいので、必須ではありません。

 

【実際に作っていきます】

f:id:tktknkyo:20210103165641p:plain

パーティクルのスポーンのところの+ボタンから

下の方にある「新しいスクラッチパットモジュール」をクリックして追加します。

 

f:id:tktknkyo:20210103165747p:plain

そうすると、このようなものが生成されるはずです

 

f:id:tktknkyo:20210103165857p:plain

その後、必要な情報を入れるためのFloatのパラメータを二つ生成します

名前は任意でいいですが、今回は「Length」と「Rot」としました。

 

 

f:id:tktknkyo:20210103170015p:plain

作ったパラメータ二つをマップ取得に登録します。

右下の+ボタンから追加できます。

 

f:id:tktknkyo:20210103170211p:plain

Rotの出力からSin(Degrees)とCosine(Degrees)に接続します。

その後Vectorに変換します。

 

このVectorのノードは3を押しながら右クリックでショートカットで作成できます。

普通にVectorと検索しても出すことができます。

 

f:id:tktknkyo:20210103170535p:plain

あとは出力したVectorとLengthと名づけたFloatのパラメータをMultplyで乗算します。

最後のMapSetは、座標としてそのまま使う場合はパーティクルのPositionに

ほかに計算をする場合は、自身で任意のパラメータに接続してください。

 

当然ですが、直接Positionに繋ぐ場合は、レベルの中心位置基準になるので注意してください。

 

 

f:id:tktknkyo:20210103170916p:plain

最後に、エミッター側で数値を入れておきましょう

発生位置を変えていきたい場合は

NormalizeLoopAgeなどと乗算すれば完成です

 

f:id:tktknkyo:20210103171016p:plain

Velocityなどの移動のモジュールを無効にすれば

このように発生位置がわかりやすくなると思います。

 

 

 

 

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

今回は分かりやすそうなテーマとしてSinとCosをつかったうずまきの形状にしましたが

四則演算などでできる形状であれば恐らく基本出来ると思います。

 

【UE4】雲模様テクスチャで出来ること

f:id:tktknkyo:20210103152242p:plain

Verは4.26です

 

 

【初めに】

 

エフェクトに使うテクスチャは、いわゆるノイズ系のテクスチャも比較的に多く

そのようなテクスチャだけで、結構様々なものが作れます

 

が、使い方が解らないとテクスチャが作れてもエフェクトに組み込めないと思うので

単純な例として書いてみます。

 

【使用するテクスチャ】

ノイズテクスチャをどう用意するのか?もありますが

今回は定番のPhotoshopで作ったものを使います

カンバスサイズを1024*1024にして、黒で塗りつぶしてから、フィルターの雲模様を掛けます

今回はあくまで一例なので、使用するテクスチャが変われば結果も変わってきます。

 

また、どのように変化するのかを見せるために、

f:id:tktknkyo:20210103152705p:plain

このような単純なグラデーションのテクスチャも使用します。

 

 

【乗算】

f:id:tktknkyo:20210103152928p:plain

これはUE4のプレビューにある球体に貼ったものです

 

f:id:tktknkyo:20210103153008p:plain

単純にMultply(乗算)を重ねただけです。

 

使う場面としては、エフェクトにラインが欲しいけど、そのままだと、ラインが目立ってしまう場合などに

このようなテクスチャを乗算することで、目立ちすぎるのを防ぎます。

 

f:id:tktknkyo:20210103153218p:plain

また、ノイズテクスチャに対して、Power(べき乗)を加えることで、描画面積を操作することもできます。

このようにして描画面積の調整もできます。

 

【歪み】

 

f:id:tktknkyo:20210103153906p:plain

サムネイルのようなのをつくる場合は、この歪みの機能を利用します。

UVsに接続している情報で表示されるのが変わってきます。

 

tktknkyo.hatenadiary.jp

極座標がメインの記事ではありますが、この機能自体に関する部分が気になる方は

この記事を参考にしてください。

 

 

f:id:tktknkyo:20210103154938p:plain

先ほどの状態から、タイリング数や歪みの強度を変えたものがこちら

ノイズテクスチャを横にタイリングしているので、若干ギザギザした形状が作れます

(今回はこのギザギザが欲しいので横にタイリングする例を)

 

f:id:tktknkyo:20210103155046p:plain

プレビューで球体に張るとこのようになります。

移動量がやや強い印象がありますが、それは手軽に調整できるので

必要なものに応じて調整しましょう。

 

f:id:tktknkyo:20210103155300p:plain

また、Pannerというノードでスクロールしつづける処理を作れます

この処理をノイズテクスチャに対して使うことで

上に流れ続ける処理が作れます

 

単純に雲模様を使う場合、地面から出てくる水の柱や、炎などでは便利なやり方の一つです。

またオーラ系のテクスチャを用意できれば、光魔法や闇魔法のような、エネルギー系のエフェクトにはおおよそ流用出来ると思います。

 

この辺はどのようなテクスチャを使うかで非常に変わってくるので。

ノイズテクスチャがあれば、このような処理を試してみるとエフェクト作り始めた場合には非常に便利だと思います。

 

 

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

既にエフェクト作ってる人ならおおよそ知ってるような内容だとは思いますが

初歩的な内容として

 

 

 

【SD】Pixel Processorでブレンドノードにない合成を作る

 

f:id:tktknkyo:20210101211608p:plain

Verは2019.1.3です

 

【初めに】

画像同士を混ぜたりする合成方法

SubstanceDesignerの場合は、基本的にブレンドノードを使いますが

例えばその場合に、Photoshopなどにある合成方法の全てがあるとは限りません。

 

その場合はブレンドノードによる合成はできませんが

計算の内容さえ知っていればPixel Processorで作ってあげることができます。

 

【Pixel Processorについて】

このブログでもたまに書いている記事の中に入っていることもありますが

主に四則演算などを使って編集するものだと考えてもらえればいいと思います。

 

 

【実際に作っていきます】

 

f:id:tktknkyo:20210101212319p:plain

とりあえず合成したいものを同士を繋ぎましょう

 

f:id:tktknkyo:20210101212413p:plain

その後、パラメータのこの部分から中に入ります

 

入ると、Float4のノードが一つだけ出てると思います。

そのノードは必要ないので消しても問題無いです。

 

f:id:tktknkyo:20210101212527p:plain

そして「Get Float2」ノードを出して$posというパラメータを設定しましょう。

このFloat2は座標の情報となります。

 

f:id:tktknkyo:20210101212647p:plain

次にSample Grayノードを出して繋げます。

ここのinputは、このノード自体に繋いでいる情報から、何を取るかを取得します。

今回の場合0には雲模様、1にはグラデーションが入っています。

 

f:id:tktknkyo:20210101212833p:plain

その後は、自分のしたい合成方法の計算を入れていきましょう。

今回は差の絶対値をした場合です。

また、Pixel Processor内では負の数値や1を超える数値も扱う事ができるので

計算の途中でこれらを超える場合は、ブレンドノードだけでなくPixel Processorを使とスムーズに計算が出来ると思います。

 

 

今回は短いですがここまでとなります。

 

 

 

【Niagara】DynamicParameterの動的パラメータを16個使う方法

f:id:tktknkyo:20201229114742p:plain

Verは4.25です

 

【初めに】

UE4でエフェクトを使う場合に便利な「DynamicParametr」

カスケードでも便利ですが、Niagaraだと特に改造などしなくても、16種類までパラメータを扱えます(DynamicParametの4つのピン*四つのDynamicParametr)

 

そもそもDynamicParameterとは?という方は

tktknkyo.hatenadiary.jp

この記事を先に見るのをオススメします。

 

そもそもNiagaraでDynamicParameterどうやって使うの?という方は

tktknkyo.hatenadiary.jp

この記事を先に見るのをオススメします。

 

【Materialの設定方法】

f:id:tktknkyo:20201229115120p:plain

DynamicParameterを選択後、詳細の部分はこのようになっているはずです。

一番下の「Parameter Index」は0~3までの数値が入ります

ここでどのDynamicParameterかを判断するので

16種類の動的パラメータを使う場合は、DynamicParameterを4つ出して

それぞれ0,1,2,3と設定しましょう。

 

f:id:tktknkyo:20201229115557p:plain

それぞれ別に設定すると、パラメータもそれぞれ別の名称を設定することができます。

Indexの数値が同じものがあると、パラメータ名を変更すると、連動して変わります。

 

Niagara側の設定】

f:id:tktknkyo:20201229115807p:plain

Niagara側の設定としては

「Dynamic Material Parameter」のモジュールのここのチェックを入れるだけで完了です。

デフォルトだと0にのみチェックが入った状態でモジュールが作られます

 

 

f:id:tktknkyo:20201229120029p:plain

きちんとマテリアルのを認識していれば

ここの名前も、マテリアルで設定した名前で出てきます。

出てきていない場合は、右上にあるボタンで更新しましょう。

 

ここを出してからマテリアルのみ変えた場合だと、名前は自動で更新はしてくれません。

 

ただここはカスケードでも同様なので。

カスケード触ってた方なら特に困ることはないと思います。

 

 

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

場所が少し解りにくいという程度でしかないので、そんなに書ける内容が多いわけではありませんね...