Successfully reported this slideshow.

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

24

Share

#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は、趣味で触って作品を作っています。
自己紹介

YouTube videos are no longer supported on SlideShare

View original on YouTube

YouTube videos are no longer supported on SlideShare

View original on YouTube

YouTube videos are no longer supported on SlideShare

View original on YouTube

YouTube videos are no longer supported on SlideShare

View original on YouTube

YouTube videos are no longer supported on SlideShare

View original on YouTube

1 of 106
1 of 106

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

24

Share

Download to read offline

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

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

More Related Content

Slideshows for you

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

Related Books

Free with a 30 day trial from Scribd

See all

新しいエフェクトツール、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 ありがとうございました!

×