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

31.3K Views

October 18, 18

スライド概要

"講演動画:https://www.youtube.com/watch?v=jzrXrREsAoo
プロジェクト:https://forums.unrealengine.com/international/japan/1543215-unreal-fest-east-2018%E3%81%AEniagara%E8%AC%9B%E6%BC%94%E3%81%A7%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E5%85%AC%E9%96%8B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

2018年10月14日に行われた「UNREAL FEST EAST 2018」における池田様の講演で使用されたスライドです。

●公式サイト
https://unrealengine.jp/unrealfest/
===
待望の新エフェクトツール「Niagara」では、これまでプログラマが居なくてはなかなか出来なかったことが、アーティストでも作ったり試せるようになりました。この講演では、Niagaraで制作したエフェクトを使って機能紹介やチップス、制作の流れの説明ならびにブレイクダウンを行います。"

profile-image

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

新しいエフェクトツール、 「Niagara」を楽しもう! ~Niagara作例のブレイクダウン~ 池田 亘 (Realtime VFX Artist) #ue4fest

2.

最初に 1. 今日の内容は、Niagaraの使い方講座ではなく 主に作例のブレイクダウンです。 2. 使用バージョン: UE4.20.3 & 4.21.0 preview1 3. Niagaraはアーリーアクセス(2018年10月14日時点)です。 細かい点で今後変更の可能性があります。 #ue4fest

3.

自己紹介 1. リアルタイムエフェクト大好きな、UE4愛好家です。 2. UE4ならびにNiagaraは、趣味で触って作品を作っています。 #ue4fest

4.

今日の内容 1. 新エフェクトツール「Niagara」って? 特徴は? 2. Niagara 制作例のブレイクダウン #ue4fest

5.

#ue4fest

6.

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

7.

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

8.

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

9.

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

10.

これまで通りの制作 + 自分でいろいろ作れる • 用意されたモジュールでCascadeと似たフローで制作可能 + • 自分でモジュールを作ったり、エクスプレッションで制御 つまり • アーティストも、やりたいことを自分で試せる! • テクニカル面で強くなれる=プログラマさんの気持ちが少し解る #ue4fest

11.

ノードベースでモジュールを作る 例:パーティクルの位置にオフセットを持たせるモジュール #ue4fest

12.

ノードベースでモジュールを作る ここでどのパラメータを使うか取ってきたもの、作ったものを入れ て #ue4fest

13.

ノードベースでモジュールを作る 真ん中でこねくり回して、 #ue4fest

14.

ノードベースでモジュールを作る ここでどのパラメータにこねくり回した結果を渡すかを決める。 #ue4fest

15.

ノードベースでモジュールを作る パーティクルの位置にオフセットを持たせるモジュール完成 #ue4fest

16.

入門として、以下がオススメ カニミソの備忘録(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

17.

Niagara 制作例のブレイクダウン #ue4fest

18.

今回、基本的に何をしているか 1. Niagaraでエフェクトを作る 2. ブループリントを組んで、そこからNiagaraへ値を送る 1. 値をタイムラインで変化させ、2つの状態をブレンドさせる 2. もしくはNiagaraエフェクトを任意の場所に発生させる 以上 #ue4fest

19.

すぐにこんな感じのエフェクトが試せる まずは試せることが大事。 プレイヤーを中心に渦巻く表現の基本形。 Niagaraで、とても簡単にできる。 #ue4fest

20.

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

21.

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

22.

パラメータのDrag&Dropが便利 Parametersの中にパラメータが網羅さ れている。 ドラッグ&ドロップで、存在している パラメータを見ることが出来るウィン ドウから放り込める。 とても便利。 #ue4fest

23.

レベルに置いたエフェクトのブループリント Niagaraのエフェクトをレベルに置いて、ブループリントをこれ だけ放り込む。 ここで扱っているのはプレイヤーの位置と、Nキーが押されてい る間に渡される渦の強さ。 これをNiagaraの中の渦のパラメータに渡している。 #ue4fest

24.

レベルに置いたエフェクトのブループリント ちなみにタイムラインの値はこんな感じ。 ここでは、Nキーをを押したら、1秒かけてゼロから1000に なる。 #ue4fest

25.

これだけで可能 流れを図にすると、こんな風に値が渡されている。 ブループリントからUser.へ、そしてそれをフォースのモジュー ルへ。 様々なパラメータを自在に繋いだり呼び出したりできるのが Niagaraの強みのひとつ。 1 2 ブループリント #ue4fest

26.

では本編 #ue4fest

27.

どういった要素を入れたか 1. 2. 3. 4. 5. 6. 7. 8. 9. プレイヤーが走ると落ち葉が舞う 渦を巻いてパーティクルがプレイヤーに集まる パーティクルの色替え 立方体状に並べる 落ち葉からキューブに変化 びりびり ブロック状の頭蓋骨へ遷移 レーザー発射 さらさら死に 10.パーティクルの海 #ue4fest

28.

走ると落ち葉が舞う ひとつめ Curl Noise使ってひらひらさせるが、プレイヤー中心にカールノイズのフ ォースを範囲限定で与えて、そのフォースにはプレイヤーの速度をかけあ わせている。 (もちろんCollisionも入っていて、床で止めている) #ue4fest

29.

走ると落ち葉が舞う この表現に必要なもの • プレイヤーから各パーティクルまでの距離 • プレイヤーの周囲の空気だけが動かされるはずだから • プレイヤーの移動速度 • 動いていないときは、落ち葉が舞うとおかしいから • カールノイズを使ったフォース • 空気の複雑な動き(乱流)に向いているから #ue4fest

30.

走ると落ち葉が舞う • プレイヤーから各パーティクルまでの距離 = length(プレイヤーの位置 - パーティクルの位置) #ue4fest

31.

走ると落ち葉が舞う • 3乗してグラデーションをリニアではないようにしている #ue4fest

32.

走ると落ち葉が舞う • 視覚化すると、こんな感じのイメージ。 た だ、も とが1 以上の 値なの で、3乗 すると 大変な 数値に なるた め、そ こから 10000 分の1 くらい にして いる。 #ue4fest

33.

走ると落ち葉が舞う • 近いほど値が小さいのを反転しないといけない #ue4fest

34.

走ると落ち葉が舞う • プレイヤーの移動速度をブループリントからNiagaraへ送る プレイヤーが今、 どれくらい動いているか Niagaraの、この名前に 値を送ってあげている #ue4fest

35.

走ると落ち葉が舞う • User.〇〇〇を使って入ってきた値は、Niagara内で使える ブループリントから来た User.PlayerForceを モジュールへ渡す #ue4fest

36.

走ると落ち葉が舞う • プレイヤーの速度に基づいて フォースが働く強さと範囲を制御 プレイヤーから渡される速度がゼロ以外の時 だけ変化があるようにする #ue4fest

37.

走ると落ち葉が舞う Curl NoiseのNoise Strengthに エクスプレッションで値を入れている #ue4fest

38.

渦を巻いてプレイヤーに集まる • プレイヤー位置を中心に強さと範囲を掛け合わせた、 Vortexのフォース制御 = Curl Noiseと大差ない制御 #ue4fest

39.

渦を巻いてプレイヤーに集まる • プレイヤーの位置を中心にVortexの強さと範囲のかけ算 プレイヤーの中心から上に50cm~100cmが渦の原点 #ue4fest

40.

範囲内のパーティクル色替え • Dynamic Mat Paramsで色替え #ue4fest

41.

範囲内のパーティクル色替え • Cascadeの「Dynamic」モジュール相当 #ue4fest

42.

範囲内のパーティクル色替え • Dynamic Mat Paramsで色替え #ue4fest

43.

範囲内のパーティクル色替え 渦の力の半分 + 渦の力 × 影響範囲×影響範囲 エクスプレッションのおまじない 「ブループリントから来る渦の強さ×0.5と、渦の影響範囲をいい感じに足してあげてください」 #ue4fest

44.

範囲内のパーティクル色替え Emissive Colorに Dynamic Parameterで 値を与えているだけ #ue4fest

45.

立方体状に並べる & 回転 • 16*16*16=4096 particles • これも専用のモジュール作成 が必要 #ue4fest

46.

立方体状に並べる • 専用のモジュール作成 →これだけでキューブの準備OK #ue4fest

47.

立方体状に並べる • Execution IndexノードでパーティクルのIndexを取得 • 順番に並べ、折り返したい数で次の列にすすむようにする #ue4fest

48.

立方体状に並べる • 例えば、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

49.

立方体状に並べる • 動画にすると、こんな感じ で並べているイメージ #ue4fest

50.

立方体の回転 • 各パーティクルの座標回転計算(XとY軸) #ue4fest

51.

葉→キューブに変化 • Niagaraのパーティクルは複数のレンダリングを持てる • いい感じにスケールで入れ替え #ue4fest

52.

びりびり ビーム状のパーティクルにコリジョンイベントを設定し、 どこかに当たったら他のパーティクルが出る 小細工なし =Niagaraの基本機能 のみ使用 #ue4fest

53.

びりびり 親エミッター(ビーム使用) • 1本50 particles ×3 • カールノイズとJitterで曲げた #ue4fest

54.

びりびりのコリジョン 親エミッター • コリジョンイベントのついたビーム(びりびり本体) 子エミッター • GPUパーティクルの火花(6~22p) =進行方向に少し伸びる • シンプルなスプライトの煙(1p) • ポイントライト(1p) #ue4fest

55.

びりびりのコリジョン 親に必要なものは、 Collision Query ならびに Collision Linear Impulse さらに Generate Collision Event #ue4fest

56.

びりびりのコリジョン 子には Event Handler Properties と Receive Collision Event が必要 Sourceで親エミッターの、どの イベントで発生させるかを指定 #ue4fest

57.

びりびりのコリジョン Niagaraは、1つのアセットの中に親と子がいる #ue4fest

58.

ブロック頭蓋骨に遷移 キューブ状に並べたブロックの頭蓋骨に遷移。 なんかネタを放り込みたったのでHoudini使った。 UE4.20.3で作成 #ue4fest

59.

ブロック頭蓋骨に遷移 HoudiniからパーティクルのIDを出力 「UE4 Niagara用Houdini Dataインターフェース」で検索を! (いろいろデータを渡せる) #ue4fest

60.

ブロック頭蓋骨に遷移 Houdiniを使うメリット 1. 事前に計算しておけるので、負荷の軽減ができる 2. 確実に、思ったような結果を得られる 3. Houdiniの機能を使った超複雑な挙動をリアルタイムで 動かすことができる #ue4fest

61.

ブロック頭蓋骨に遷移 何をしているか • 円状に出現するようにポイント情報を Houdini上でソート • ArcTangent2 (atan2) を使用 • グラデーションの明るさをもとに IDの順番を整列 Atan2 シェーダーで見てみると、 こんなグラデーション #ue4fest

62.

ブロック頭蓋骨に遷移 1. Scatterでポイント化 #ue4fest

63.

ブロック頭蓋骨に遷移 2. attributewrangleで 円状に並べる準備 #ue4fest

64.

ブロック頭蓋骨に遷移 3. sortでポイントを並べる By Attributeでソート #ue4fest

65.

ブロック頭蓋骨に遷移 4. pointwrangleで ソート結果を格納 #ue4fest

66.

ブロック頭蓋骨に遷移 5. Niagaraへ出力 idだけでなく、いろいろNiagaraに持っていけます outから.hcsvで出力 #ue4fest

67.

ブロック頭蓋骨に遷移 • UEでHoudini Niagaraプラグインが有効か確認 #ue4fest

68.

ブロック頭蓋骨に遷移 6. Handle Spawned Houdini Particlesモジュールを使い、 Houdiniから出力したを読み込む #ue4fest

69.

ブロック頭蓋骨に遷移 • 読み込んだCSV(.hcsv)ファイルのパーティクル位置を格納 • オフセットも付けられるようにした #ue4fest

70.

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

71.

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

72.

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

73.

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

74.

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

75.

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

76.

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

77.

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

78.

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

79.

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

80.

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

81.

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

82.

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

83.

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

84.

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

85.

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

86.

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

87.

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

88.

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

89.

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

90.

パーティクルの海 #ue4fest

91.

パーティクルの海 #ue4fest

92.

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

93.

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

94.

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

95.

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

96.

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

97.

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

98.

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

99.

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

100.

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

101.

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