Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,611 views

Published on

講演動画: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で制作したエフェクトを使って機能紹介やチップス、制作の流れの説明ならびにブレイクダウンを行います。

Published in: Engineering
  • Be the first to comment

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

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

×