新しいエフェクトツール、Niagaraを楽しもう！～Niagara作例のブレイクダウン～

新しいエフェクトツール、Niagaraを楽しもう！～Niagara作例のブレイクダウン～
#ue4fest 新しいエフェクトツール、「Niagara」を楽しもう！～Niagara作例のブレイクダウン～池田亘 (Realtime VFX Artist)
#ue4fest 1. 今日の内容は、Niagaraの使い方講座ではなく主に作例のブレイクダウンです。 2. 使用バージョン： UE4.20.3 & 4.21.0 preview1 3. Niagaraはアーリーアクセス（2018年10月14日時点）です。細かい点で今後変更の可能性があります。最初に
#ue4fest 1. リアルタイムエフェクト大好きな、UE4愛好家です。 2. UE4ならびにNiagaraは、趣味で触って作品を作っています。自己紹介
#ue4fest 1. 新エフェクトツール「Niagara」って？特徴は？ 2. Niagara 制作例のブレイクダウン今日の内容
#ue4fest
#ue4fest Cascade Niagara ※イメージです Niagara？
#ue4fest Cascade • 用意されたモジュールを使ってエフェクトを作る • プログラマなしにモジュール追加は超困難 Niagara • 自分でモジュール（機能）を作れる！ • あらゆるパラメータにアクセス可能 → 可能性は無限大 • HoudiniからNiagaraへ情報を渡せるプログラマブルVFX
#ue4fest Cascade １つのアセットの中にエミッター群を内包データの持ち方 Cascadeのアセット
#ue4fest Niagara • エミッターがアセット • 他のエフェクトでも使いまわせる • 使われる先で値の上書きが可能データの持ち方アセット化されたエミッター群(Niagara Emitter) エフェクト本体（Niagara System)
#ue4fest • 用意されたモジュールでCascadeと似たフローで制作可能 + • 自分でモジュールを作ったり、エクスプレッションで制御つまり • アーティストも、やりたいことを自分で試せる！ • テクニカル面で強くなれる＝プログラマさんの気持ちが少し解るこれまで通りの制作 + 自分でいろいろ作れる
#ue4fest 例：パーティクルの位置にオフセットを持たせるモジュールノードベースでモジュールを作る
#ue4fest ここでどのパラメータを使うか取ってきたもの、作ったものを入れてノードベースでモジュールを作る
#ue4fest 真ん中でこねくり回して、ノードベースでモジュールを作る
#ue4fest ここでどのパラメータにこねくり回した結果を渡すかを決める。ノードベースでモジュールを作る
#ue4fest パーティクルの位置にオフセットを持たせるモジュール完成ノードベースでモジュールを作る
#ue4fest カニミソの備忘録（by カニパンチさん）ブログ http://crabpunch.hatenablog.com/ 第8回UE4勉強会のNiagaraの資料（by 塩谷さん） NiagaraでサクッとMorphEffectを作ろう https://www.slideshare.net/YuyaShiotani/niagaramorpheffe ct-113524177 作業工程の動画 https://www.youtube.com/watch?v=Pl4IyfMvt_E 入門として、以下がオススメ
#ue4fest Niagara 制作例のブレイクダウン
#ue4fest 1. Niagaraでエフェクトを作る 2. ブループリントを組んで、そこからNiagaraへ値を送る 1. 値をタイムラインで変化させ、２つの状態をブレンドさせる 2. もしくはNiagaraエフェクトを任意の場所に発生させる以上今回、基本的に何をしているか
#ue4fest まずは試せることが大事。プレイヤーを中心に渦巻く表現の基本形。 Niagaraで、とても簡単にできる。すぐにこんな感じのエフェクトが試せる
#ue4fest プレイヤーの位置と、渦巻く力の強さをブループリントから取ってくる場所 User.パラメータ名これが外から値を拾うパラメータ Niagara側のパラメーター
#ue4fest ここが渦の制御の場所。 VoretexとかCurlNoiseといったフォースは、Niagaraに元から入っているモジュール。 Niagara側のパラメーター
#ue4fest Parametersの中にパラメータが網羅されている。ドラッグ＆ドロップで、存在しているパラメータを見ることが出来るウィンドウから放り込める。とても便利。パラメータのDrag＆Dropが便利
#ue4fest Niagaraのエフェクトをレベルに置いて、ブループリントをこれだけ放り込む。ここで扱っているのはプレイヤーの位置と、Nキーが押されている間に渡される渦の強さ。これをNiagaraの中の渦のパラメータに渡している。レベルに置いたエフェクトのブループリント
#ue4fest ちなみにタイムラインの値はこんな感じ。ここでは、Nキーをを押したら、１秒かけてゼロから１０００になる。レベルに置いたエフェクトのブループリント
#ue4fest 流れを図にすると、こんな風に値が渡されている。ブループリントからUser.へ、そしてそれをフォースのモジュールへ。様々なパラメータを自在に繋いだり呼び出したりできるのが Niagaraの強みのひとつ。これだけで可能１ 2 ブループリント
#ue4fest では本編
#ue4fest 1. プレイヤーが走ると落ち葉が舞う 2. 渦を巻いてパーティクルがプレイヤーに集まる 3. パーティクルの色替え 4. 立方体状に並べる 5. 落ち葉からキューブに変化 6. びりびり 7. ブロック状の頭蓋骨へ遷移 8. レーザー発射 9. さらさら死に 10.パーティクルの海どういった要素を入れたか
#ue4fest ひとつめ Curl Noise使ってひらひらさせるが、プレイヤー中心にカールノイズのフォースを範囲限定で与えて、そのフォースにはプレイヤーの速度をかけあわせている。（もちろんCollisionも入っていて、床で止めている）走ると落ち葉が舞う
#ue4fest この表現に必要なもの • プレイヤーから各パーティクルまでの距離 • プレイヤーの周囲の空気だけが動かされるはずだから • プレイヤーの移動速度 • 動いていないときは、落ち葉が舞うとおかしいから • カールノイズを使ったフォース • 空気の複雑な動き（乱流）に向いているから走ると落ち葉が舞う
#ue4fest • プレイヤーから各パーティクルまでの距離＝ length(プレイヤーの位置 - パーティクルの位置) 走ると落ち葉が舞う
#ue4fest • 3乗してグラデーションをリニアではないようにしている走ると落ち葉が舞う
#ue4fest • 視覚化すると、こんな感じのイメージ。ただ、もとが1以上の値なので、3乗すると大変な数値になるため、そこから10000分の１くらいにしている。走ると落ち葉が舞う
#ue4fest • 近いほど値が小さいのを反転しないといけない走ると落ち葉が舞う
#ue4fest • プレイヤーの移動速度をブループリントからNiagaraへ送る走ると落ち葉が舞うプレイヤーが今、どれくらい動いているか Niagaraの、この名前に値を送ってあげている
#ue4fest • User.〇〇〇を使って入ってきた値は、Niagara内で使える走ると落ち葉が舞うブループリントから来た User.PlayerForceをモジュールへ渡す
#ue4fest • プレイヤーの速度に基づいてフォースが働く強さと範囲を制御走ると落ち葉が舞うプレイヤーから渡される速度がゼロ以外の時だけ変化があるようにする
#ue4fest Curl NoiseのNoise Strengthにエクスプレッションで値を入れている走ると落ち葉が舞う
#ue4fest • プレイヤー位置を中心に強さと範囲を掛け合わせた、 Vortexのフォース制御＝ Curl Noiseと大差ない制御渦を巻いてプレイヤーに集まる
#ue4fest • プレイヤーの位置を中心にVortexの強さと範囲のかけ算渦を巻いてプレイヤーに集まるプレイヤーの中心から上に50ｃｍ～100ｃｍが渦の原点
#ue4fest • Dynamic Mat Paramsで色替え範囲内のパーティクル色替え
#ue4fest 範囲内のパーティクル色替え • Cascadeの「Dynamic」モジュール相当
#ue4fest • Dynamic Mat Paramsで色替え範囲内のパーティクル色替え
#ue4fest エクスプレッションのおまじない「ブループリントから来る渦の強さ×0.5と、渦の影響範囲をいい感じに足してあげてください」範囲内のパーティクル色替え渦の力の半分 + 渦の力 × 影響範囲×影響範囲
#ue4fest 範囲内のパーティクル色替え Emissive Colorに Dynamic Parameterで値を与えているだけ
#ue4fest • 16*16*16＝4096 particles • これも専用のモジュール作成が必要立方体状に並べる＆回転
#ue4fest • 専用のモジュール作成 →これだけでキューブの準備OK 立方体状に並べる
#ue4fest • Execution IndexノードでパーティクルのIndexを取得 • 順番に並べ、折り返したい数で次の列にすすむようにする立方体状に並べる
#ue4fest • 例えば、4×4×4の64個並べる場合、0番目から順に・・・63番目まで並べる立方体状に並べる 0 1 2 3 4 5 6 7 8 9 Ⅹ 0 1 2 3 0 1 2 3 0 1 Y 0 0 0 0 1 1 1 1 2 2 Z 0 0 0 0 0 0 0 0 0 0 10 11 12 13 14 15 16 17 18 19 20 2 3 0 1 2 3 0 1 2 3 0 2 2 3 3 3 3 0 0 0 0 1 0 0 0 0 0 0 1 1 1 1 1 ここから2段目
#ue4fest • 動画にすると、こんな感じで並べているイメージ立方体状に並べる
#ue4fest • 各パーティクルの座標回転計算（XとY軸）立方体の回転
#ue4fest • Niagaraのパーティクルは複数のレンダリングを持てる • いい感じにスケールで入れ替え葉→キューブに変化
#ue4fest ビーム状のパーティクルにコリジョンイベントを設定し、どこかに当たったら他のパーティクルが出る小細工なし＝Niagaraの基本機能のみ使用びりびり
#ue4fest 親エミッター（ビーム使用） • 1本50 particles ×3 • カールノイズとJitterで曲げたびりびり
#ue4fest 親エミッター • コリジョンイベントのついたビーム（びりびり本体）子エミッター • GPUパーティクルの火花(6～22p) ＝進行方向に少し伸びる • シンプルなスプライトの煙(1p) • ポイントライト(1p) びりびりのコリジョン
#ue4fest 親に必要なものは、 Collision Query ならびに Collision Linear Impulse さらに Generate Collision Event びりびりのコリジョン
#ue4fest 子には Event Handler Properties と Receive Collision Event が必要 Sourceで親エミッターの、どのイベントで発生させるかを指定びりびりのコリジョン
#ue4fest Niagaraは、１つのアセットの中に親と子がいるびりびりのコリジョン
#ue4fest キューブ状に並べたブロックの頭蓋骨に遷移。なんかネタを放り込みたったのでHoudini使った。 UE4.20.3で作成ブロック頭蓋骨に遷移
#ue4fest HoudiniからパーティクルのIDを出力「UE4 Niagara用Houdini Dataインターフェース」で検索を！（いろいろデータを渡せる）ブロック頭蓋骨に遷移
#ue4fest Houdiniを使うメリット 1. 事前に計算しておけるので、負荷の軽減ができる 2. 確実に、思ったような結果を得られる 3. Houdiniの機能を使った超複雑な挙動をリアルタイムで動かすことができるブロック頭蓋骨に遷移
#ue4fest 何をしているか • 円状に出現するようにポイント情報を Houdini上でソート • ArcTangent2 (atan2) を使用 • グラデーションの明るさをもとに IDの順番を整列ブロック頭蓋骨に遷移 Atan2 シェーダーで見てみると、こんなグラデーション
#ue4fest 1. Scatterでポイント化ブロック頭蓋骨に遷移
#ue4fest 2. attributewrangleで円状に並べる準備ブロック頭蓋骨に遷移
#ue4fest 3. sortでポイントを並べる By Attributeでソートブロック頭蓋骨に遷移
#ue4fest 4. pointwrangleでソート結果を格納ブロック頭蓋骨に遷移
#ue4fest 5. Niagaraへ出力ブロック頭蓋骨に遷移 idだけでなく、いろいろNiagaraに持っていけます outから.hcsvで出力
#ue4fest • UEでHoudini Niagaraプラグインが有効か確認ブロック頭蓋骨に遷移
#ue4fest 6. Handle Spawned Houdini Particlesモジュールを使い、 Houdiniから出力したを読み込むブロック頭蓋骨に遷移
#ue4fest • 読み込んだCSV(.hcsv)ファイルのパーティクル位置を格納 • オフセットも付けられるようにしたブロック頭蓋骨に遷移
#ue4fest MorphTimeに入ってくるのはゼロから１の値で、それはブループリントから制御。入ってくるゼロ１を4096倍して、Indexからそれを引き、マイナス１かけてゼロ１でクランプする。これでIndexゼロから順番に、時間経過とともに各パーティクルの値、 Particle.CSVSwitchはゼロから１になっていく。ここまでの結果を使うと、いったんキューブからノイズで散らせたものがワープするように頭蓋骨を組みあがるようになる。 • 持ってきたidの使い道ブロック頭蓋骨に遷移
#ue4fest それではちょっと見た目にアレだったので、わずかな時間の隙間だけれども、そのゼロから１への変化にカーブを挟んであげることで、散ったパーティクルがちゃんと移動して集まっているように見せている。 • 持ってきたidの使い道ブロック頭蓋骨に遷移
#ue4fest • カーブを使った変化ありと無しの比較ブロック頭蓋骨に遷移カーブなしカーブあり
#ue4fest • マテリアルと似た感じで、Functionを自分で作れる頭蓋骨とプレイヤーの回転の同期
#ue4fest • Function Scriptの中身頭蓋骨とプレイヤーの回転の同期
#ue4fest キーを押し続けていると、タイムラインが走り続けるブループリントで全部を繋ぐ
#ue4fest キーの位置をずらして、いい感じになるように遷移させているタイムラインもいっぱい
#ue4fest • レーザー本体はメッシュと頂点アニメーション • 地面の煙と破片は見えないパーティクルのコリジョンで発生 • Vortexを使った GPUパーティクル２種（合計約2,200 particles）レーザー発射特別なことはしていない
#ue4fest • 身体全体からエフェクトが出るだけではつまらない… ↓ • Niagaraはパーティクルの発生範囲も制御可能！さらさら死に
#ue4fest • 攻撃方向に面した部分だけパーティクルを出すさらさら死に全体から普通に出した場合任意の方向の法線部分のみの場合発生範囲を可視化したマテリアル
#ue4fest • DOT使う→数値が1.0に近いほどパーティクルが出るさらさら死に組み込み関数のDOTで得られる数値 1.0 0.5 0 0 -1.0 -0.5 -0.5 0.5 攻撃の方向（スケルタル）メッシュの法線方向
#ue4fest • 結果、攻撃方向に面した部分だけパーティクルが出るさらさら死に
#ue4fest これもモジュールを作った。ちょっと分けて説明。この５つの値で制御されている。パーティクル絶対殺すマン＝DataInstance.Alive 比較用の値さらさら死にレーザーの方向メッシュの法線方向 Dotの結果の範囲を移動パーティクル絶対殺すマン発生範囲制御用の値
#ue4fest 比較用の値さらさら死に比較のためのノード比較用の値よりも大きかったら殺されないこねくり回して、帯状の範囲を作っている →
#ue4fest マテリアルにも似た制御を入れて消しているさらさら死に
#ue4fest パーティクルの海 • シンプルな機能の組み合わせ
#ue4fest • パーティクル発生位置の頂点カラーをサンプリング • 数の暴力（約84,000 particles） • 動きはカールノイズと渦（Vortex)だけ • 色を変えるだけでなく、頂点の色などを見て発生範囲を絞ることができるパーティクルの海
#ue4fest パーティクルの海 • 頂点カラー、法線方向のサンプリングの参考ファイル
#ue4fest • テクスチャを頂点カラーにベイクパーティクルの海
#ue4fest • めっちゃポリゴンを割った（やりすぎた）パーティクルの海
#ue4fest パーティクルの海
#ue4fest パーティクルの海
#ue4fest • 色を変えるだけでなく、頂点の色（明るさなども）を見て発生範囲を絞ることができる。パーティクルの海青成分の部分のみパーティクルを発生 →
#ue4fest • 雑な方法だが青成分が強いものだけ残すことができるようにしている。。パーティクルの海青色だけ抽出するための引き算
#ue4fest Photoshopで引き算してみると、こんな感じ。梵字とアンリアルマーク、相性がいいです。違和感があまり仕事をしない。（結果の部分、プロジェクタだと見えにくいかもと思ったので、ちょっとだけ明るくしている） • 青色（UEのマークのところ）だけ残す雑な方法パーティクルの海青（B) －赤（R) －緑（G) ＝マークが残る
#ue4fest アルファゼロにしてるのは、そうしないと真っ白だったから。パーティクルの海ここで頂点カラーをパーティクルの Colorに放り込んでいる
#ue4fest • 4.21 Preview1からテクスチャのサンプリングが可能になったパーティクルの海
#ue4fest • World座標をUVとして使用（仮出力のため）パーティクルの海
#ue4fest • 参考程度に… おまけ（Screen Texture Sampling)
#ue4fest • むりやりViewMatrix（参考程度に…）おまけ（Screen Texture Sampling)
#ue4fest • Niagaraは、ブループリントからの制御がカンタン • 自分でいろいろ作って試せる＆あらゆる部分に制御を加えられる！ • 自分でモジュールを作らなくても、かなりの表現力 • エフェクトを組み立てる点ではCascadeに近く馴染みやすい • とにかく面白い！皆さんもいっしょに「Niagara」を楽しもう！今日のまとめ
#ue4fest ありがとうございました！

Check these out next

新しいエフェクトツール、Niagaraを楽しもう！～Niagara作例のブレイクダウン～

Recommended

More Related Content

Slideshows for you(20)

More from エピック・ゲームズ・ジャパン Epic Games Japan(20)

Recently uploaded(20)