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

新しいエフェクトツール、 「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

Niagara？ Cascade Niagara ※イメージです #ue4fest

プログラマブルVFX Cascade • 用意されたモジュールを使ってエフェクトを作る • プログラマなしにモジュール追加は超困難 Niagara • 自分でモジュール（機能）を作れる！ • あらゆるパラメータにアクセス可能 → 可能性は無限大 • HoudiniからNiagaraへ情報を渡せる #ue4fest

データの持ち方 Cascade １つのアセットの中にエミッター群を内包 Cascadeのアセット #ue4fest

データの持ち方 Niagara • エミッターがアセット • 他のエフェクトでも使いまわせる • 使われる先で値の上書きが可能 エフェクト本体 （Niagara System) アセット化されたエミッター群(Niagara Emitter) #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

Niagara側のパラメーター プレイヤーの位置と、渦巻く力の強さを ブループリントから取ってくる場所 User.パラメータ名 これが外から値を拾うパラメータ #ue4fest

Niagara側のパラメーター ここが渦の制御の場所。 VoretexとかCurlNoiseといったフォース は、Niagaraに元から入っているモジュ ール。 #ue4fest

パラメータのDrag＆Dropが便利 Parametersの中にパラメータが網羅さ れている。 ドラッグ＆ドロップで、存在している パラメータを見ることが出来るウィン ドウから放り込める。 とても便利。 #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番目から順に 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 ・・・63番目まで並べる ここから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

ブロック頭蓋骨に遷移 • 持ってきたidの使い道 MorphTimeに入ってくるのはゼロから１の値で、それはブループリントか ら制御。 入ってくるゼロ１を4096倍して、Indexからそれを引き、マイナス１かけ てゼロ１でクランプする。 これでIndexゼロから順番に、時間経過とともに各パーティクルの値、 Particle.CSVSwitchはゼロから１になっていく。 ここまでの結果を使うと、いったんキューブからノイズで散らせたものが ワープするように頭蓋骨を組みあがるようになる。 #ue4fest

ブロック頭蓋骨に遷移 • 持ってきたidの使い道 それではちょっと見た目にアレだったので、わずかな時間の隙間だけ れども、そのゼロから１への変化にカーブを挟んであげることで、 散ったパーティクルがちゃんと移動して集まっているように見せて いる。 #ue4fest

ブロック頭蓋骨に遷移 • カーブを使った変化ありと無しの比較 カーブなし カーブあり #ue4fest

頭蓋骨とプレイヤーの回転の同期 • マテリアルと似た感じで、Functionを自分で作れる #ue4fest

頭蓋骨とプレイヤーの回転の同期 • Function Scriptの中身 #ue4fest

ブループリントで全部を繋ぐ キーを押し続けていると、タイムラインが走り続ける #ue4fest

タイムラインもいっぱい キーの位置をずらして、 いい感じになるように 遷移させている #ue4fest

レーザー発射 • レーザー本体はメッシュ と頂点アニメーション • 地面の煙と破片は 見えないパーティクルの コリジョンで発生 • Vortexを使った GPUパーティクル２種 （合計約2,200 particles） 特別なことはしていない #ue4fest

さらさら死に • 身体全体からエフェクトが出る だけではつまらない… ↓ • Niagaraはパーティクルの 発生範囲も制御可能！ #ue4fest

さらさら死に • 攻撃方向に面した部分だけパーティクルを出す 全体から普通に出した場合 任意の方向の法線部分のみの場合 発生範囲を可視化したマテリアル #ue4fest

さらさら死に • DOT使う→数値が1.0に近いほどパーティクルが出る 組み込み関数のDOTで得られる数値 0.5 0 -0.5 攻撃の方向 1.0 -1.0 （スケルタル）メッシュの 法線方向 -0.5 0.5 0 #ue4fest

さらさら死に • 結果、攻撃方向に面した部分だけパーティクルが出る #ue4fest

さらさら死に 発生範囲制御用の値 比較用の値 レーザーの方向 これもモジュールを作った。 ちょっと分けて説明。 この５つの値で制御されている。 パーティクル絶対殺すマン＝DataInstance.Alive メッシュの法線方向 Dotの結果の範囲を移動 パーティクル絶対殺すマン #ue4fest

さらさら死に 比較のためのノード 比較用の値よりも大きかったら殺されない 比較用の値 こねくり回して、 帯状の範囲を作っている → #ue4fest

さらさら死に マテリアルにも似た制御を入れて消している #ue4fest

パーティクルの海 • シンプルな機能の組み合わせ #ue4fest

パーティクルの海 • パーティクル発生位置の頂点カラーをサンプリング • 数の暴力（約84,000 particles） • 動きはカールノイズと渦（Vortex)だけ • 色を変えるだけでなく、頂点の色などを見て発生範囲を絞る ことができる #ue4fest

パーティクルの海 • 頂点カラー、法線方向のサンプリングの 参考ファイル #ue4fest

パーティクルの海 • テクスチャを頂点カラーにベイク #ue4fest

パーティクルの海 • めっちゃポリゴンを割った （やりすぎた） #ue4fest

パーティクルの海 #ue4fest

パーティクルの海 #ue4fest

パーティクルの海 • 色を変えるだけでなく、頂点の色（明るさなども）を見て 発生範囲を絞ることができる。 青成分の部分のみ パーティクルを発生 → #ue4fest

パーティクルの海 • 雑な方法だが青成分が強いものだけ残すことができるように している。 。 青色だけ抽出するための引き算 #ue4fest

パーティクルの海 • 青色（UEのマークのところ）だけ残す雑な方法 Photoshopで引き算してみると、こ んな感じ。 梵字とアンリアルマーク、相性がい いです。 違和感があまり仕事をしない。 （結果の部分、プロジェクタだと見 えにくいかもと思ったので、ちょっ とだけ明るくしている） 青（B) － 赤（R) － 緑（G) ＝ マークが残る #ue4fest

パーティクルの海 ここで頂点カラーをパーティクルの Colorに放り込んでいる アルファゼロにしてるのは、そうしないと真っ白だったから。 #ue4fest

パーティクルの海 • 4.21 Preview1からテクスチャのサンプリングが可能になった #ue4fest

パーティクルの海 • World座標をUVとして使用（仮出力のため） #ue4fest

おまけ（Screen Texture Sampling) • 参考程度に… #ue4fest

おまけ（Screen Texture Sampling) • むりやりViewMatrix（参考程度に…） #ue4fest

今日のまとめ • Niagaraは、ブループリントからの制御がカンタン • 自分でいろいろ作って試せる ＆ あらゆる部分に制御を加えられる！ • 自分でモジュールを作らなくても、かなりの表現力 • エフェクトを組み立てる点ではCascadeに近く馴染みやすい • とにかく面白い！ 皆さんもいっしょに「Niagara」を楽しもう！ #ue4fest

ありがとうございました！ #ue4fest