もっとNiagaraを楽しもう！～UE4.25での作例と解説～【UE4 VFX Art Dive 2020】

28.8K Views

July 08, 20

#ue4 #ue4 vfx art dive 2020 #ue-effect #Niagara #VFX #UE4 #Houdini #Realtime VFX

スライド概要

講演動画はこちら
https://youtu.be/bkZkW-Hblig

スライドデータはこちらからダウンロード可能です
https://epicgames.box.com/s/ew7tcp2duaaruwb2zqrs8bbd5k789nji

発表者：池田亘さま（Naughty Dog）
本スライドは2020年7月5日に行われた勉強会「 UE4 VFX Art Dive Online」の講演資料となります。

エピックゲームズジャパン

@EpicGamesJapan

スライド一覧

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

またはPlayer版

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

ダウンロード

ダウンロード(pdf - 6.07MB)

関連スライド

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1.3M

Unreal Engine5 Lumenの仕組みと肝心なところ

ue5 ue-rendering ue-lumen

エピックゲームズジャパン 1.1M

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】

ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer

エピックゲームズジャパン 797.2K

UE5の最新グラフィクスを使いこなすための4個の勘所 [CEDEC+KYUSHU 2023]

unreal engine 5 ue5 cedec cedec+kyushu

エピックゲームズジャパン 612K

UE4で作成するUIと最適化手法【GAME CREATORS CONFERENCE '20】

ue4 ue-ui ue-optimize

エピックゲームズジャパン 450.9K

マンガで使う！初めての Unreal Engine【UE4 Manga Anime Illustration Dive Online】

ue4 ueart2d ue-beginner

エピックゲームズジャパン 416.4K

各ページのテキスト

もっとNiagaraを楽しもう！ Realtime VFX Artist 池田亘

このブレイクダウンをしていきます環境：UE4.25.1 + Houdini 18.0287 (+SideFX Labs 313) #UE4 | @UNREALENGINE

今日やること 1. VATの応用によるNiagaraでの破壊表現何を行っているか素材作成（Houdini) Niagaraとブリープリントでの制御 2. セル調の表現今回の表現で試したことなど 3. 質疑応答 #UE4 | @UNREALENGINE

自己紹介 ● 16年ほどリアルタイムVFX ● UE4は趣味のひとつ ● Niagara芸人のひとり（代表芸: Unreal Fest East 2018 ～Niagaraを楽しもう！～) @WataruVFX #UE4 | @UNREALENGINE

祝・Niagara正式リリース！ #UE4 | @UNREALENGINE

VATの応用によるNiagaraでの破壊表現 #UE4 | @UNREALENGINE

何を行っているか VATはこんなことをしている #UE4 | @UNREALENGINE

何を行っているか VATの基本: 3次元の位置情報XYZ → カラーのRGB バウンディングの最小値の位置をゼロとみなすことで位置情報を正の値に統一する #UE4 | @UNREALENGINE バウンディングサイズ＝2.4731で割ると 0～1.0に納まる

何を行っているか VATの基本: 3次元の位置情報XYZ → カラーのRGB 最終的にできるカラー R=0.6878, G=0, B=0.55367 バウンディングの最小値の位置をゼロとみなすことで位置情報を正の値に統一する #UE4 | @UNREALENGINE バウンディングサイズ＝2.4731で割ると 0～1.0に納まる

10.

何を行っているかこれは通常のVAT(Fluid) 横軸＝頂点の位置情報縦軸＝ぱらぱらアニメーション #UE4 | @UNREALENGINE

11.

何を行っているか ● VATの応用＝アニメーションとして使っていない ● 複数種類の破片の形状（頂点の位置）を記録したものとして使用横軸＝頂点の位置情報縦軸＝1行ごとに１パーツを格納 #UE4 | @UNREALENGINE (Cropしてます)

12.

何を行っているか ● VATだけどアニメーションさせていない ● 上から順に行ごとに破片パーツの頂点位置情報を格納しているテクスチャサイズ＝1024*128 横幅1024ならば、341三角ポリゴンまで対応縦＝パーツの数（今回は128パーツで作成） ● アニメーションはNiagaraのパーティクルの挙動 #UE4 | @UNREALENGINE

13.

Houdiniで素材制作 #UE4 | @UNREALENGINE

14.

まずはHoudiniでMeshとTexture作成主な作業 1. 破片の生成 2. 破片の位置情報(CSV)の出力 3. 破片の位置補正 4. 法線情報に細工 5. (UV情報に細工 Option) 6. VATとメッシュの出力 #UE4 | @UNREALENGINE

15.

1.破片の生成 ● よくあるISO Offset → Scatter → ボロノイ #UE4 | @UNREALENGINE

16.

2.破片の位置情報(CSV)の出力 (SideFXLabs version 313を使用）

17.

3.破片の位置補正これをやらないと破片が重心あたりで回転してくれない ✕ #UE4 | @UNREALENGINE ◯

18.

4.法線情報に細工 Vertex Animation Textureのノードを少し改造 (SideFXLabs version 313を使用） #UE4 | @UNREALENGINE

19.

4.法線情報に細工法線制御なし #UE4 | @UNREALENGINE 法線制御あり

20.

4.法線情報に細工 Vertex Animation Textureのノードを少し改造 #UE4 | @UNREALENGINE

21.

4.法線情報に細工 Vertex Animation Textureのノードを少し改造発売中（Kindle版もあります） #UE4 | @UNREALENGINE

22.

ここからUE4 #UE4 | @UNREALENGINE

23.

メッシュとテクスチャの読み込み出力された位置情報のテクスチャ出力されたメッシュ #UE4 | @UNREALENGINE 出力されたUV情報のテクスチャ

24.

マテリアル改造 HoudiniからUE4用のマテリアルをコピペして改造 #UE4 | @UNREALENGINE

25.

マテリアル改造 1. Dynamic Parameterを使用 IDとしてNiagaraから値を受け取る #UE4 | @UNREALENGINE

26.

マテリアル改造 2. 頂点位置をオフセット Niagaraから位置情報を取れるようにする #UE4 | @UNREALENGINE

27.

マテリアル改造スケール対応のために必要 #UE4 | @UNREALENGINE

28.

マテリアル改造 3. カラー情報をUVとして扱う #UE4 | @UNREALENGINE

29.

マテリアル改造なぜRだけにする？ #UE4 | @UNREALENGINE ノードを辿ると何がある？

30.

マテリアル改造 #UE4 | @UNREALENGINE

31.

マテリアル改造 #UE4 | @UNREALENGINE

32.

Niagaraでの基本設定 #UE4 | @UNREALENGINE

33.

Niagaraでの基本設定 1. CSVの読み込み 2. 回転対応（簡易） 3. スケール対応 4. パーツのIDをDynamic Parameterに渡す #UE4 | @UNREALENGINE

34.

Niagaraでの基本設定 1. CSVの読み込み（自作のモジュール） #UE4 | @UNREALENGINE

35.

Niagaraでの基本設定 1. CSVの読み込み（自作のモジュール） #UE4 | @UNREALENGINE

36.

Niagaraでの基本設定 2. 回転対応（簡易） #UE4 | @UNREALENGINE

37.

Niagaraでの基本設定 2. 回転対応（簡易） #UE4 | @UNREALENGINE

38.

Niagaraでの基本設定 2. 回転対応（簡易） Niagara #UE4 | @UNREALENGINE

39.

Niagaraでの基本設定 3. スケール対応 #UE4 | @UNREALENGINE

40.

Niagaraでの基本設定 4. パーツのIDをDynamic Parameterに渡す #UE4 | @UNREALENGINE

41.

Niagaraでの基本設定 4. パーツのIDをDynamic Parameterに渡す #UE4 | @UNREALENGINE

42.

Niagaraでの基本設定 4. パーツのIDをDynamic Parameterに渡す IDを渡したとき #UE4 | @UNREALENGINE IDを渡してないとき

43.

IDって？ 1. Dynamic Parameterを使用 IDとしてNiagaraから値を受け取る #UE4 | @UNREALENGINE 16パーツの場合の縦（UVのV）の位置 1行目＝0 2行目＝0.0625 3行目＝0.125 … 16行目＝0.9375

44.

Tips: Attribute Spreadsheet(属性スプレッドシート)が便利 #UE4 | @UNREALENGINE

45.

Niagaraでの基本設定

46.

Niagara+ブループリントでのインタラクション #UE4 | @UNREALENGINE

47.

Niagara+ブループリントでのインタラクション 1. レーザーからの距離で影響範囲設定 2. Vortex、Velocity、Line Attraction Force、Drag、Gravity 3. 元の位置に戻す #UE4 | @UNREALENGINE

48.

Niagara+ブループリントでのインタラクション 1. レーザーからの距離で影響範囲設定 #UE4 | @UNREALENGINE

49.

Niagara+ブループリントでのインタラクション 1. レーザーからの距離で影響範囲設定距離を調べてOne Minus(1-x)で反転。白いところが影響範囲。白黒反転した結果 #UE4 | @UNREALENGINE

50.

Niagara+ブループリントでのインタラクション 1. レーザーからの距離で影響範囲設定（自作モジュール）新しいノードが用意された！ #UE4 | @UNREALENGINE

51.

Niagara+ブループリントでのインタラクション Normalize Distance Rangeの中身を見てみると… 展開展開 #UE4 | @UNREALENGINE

52.

Niagara+ブループリントでのインタラクション 2. Vortex、Velocity、Line Attraction Force、Drag、Gravity #UE4 | @UNREALENGINE

53.

Niagara+ブループリントでのインタラクション今回のブループリント制御の基本形 #UE4 | @UNREALENGINE

54.

Niagara+ブループリントでのインタラクション今回のブループリント制御の基本形 #UE4 | @UNREALENGINE

55.

Niagara+ブループリントでのインタラクション今回のブループリント制御の基本形 #UE4 | @UNREALENGINE

56.

Niagara+ブループリントでのインタラクション今回のブループリント制御の基本形 #UE4 | @UNREALENGINE

57.

Niagara+ブループリントでのインタラクション Niagara Parameter Collection (NPC) とは？ Override 任意のエフェクトがパラメータを名前で取得 #UE4 | @UNREALENGINE

58.

Niagara+ブループリントでのインタラクション Vortex（渦）フォース #UE4 | @UNREALENGINE

59.

Niagara+ブループリントでのインタラクション Vortex（渦）フォース #UE4 | @UNREALENGINE

60.

Niagara+ブループリントでのインタラクション Particles.StoredMoveは何のため？＝フラグです Int値↑ Particles.StoredMove = clamp(0,1, Particles.StoredMove + ((0.01 < Particles.StoredMove)?1:0) ); #UE4 | @UNREALENGINE

61.

Niagara+ブループリントでのインタラクション Particles.StoredMoveは何のため？ #UE4 | @UNREALENGINE

62.

Niagara+ブループリントでのインタラクション Vortex（渦）フォース #UE4 | @UNREALENGINE

63.

Niagara+ブループリントでのインタラクション Vortex Force（渦） #UE4 | @UNREALENGINE

64.

Niagara+ブループリントでのインタラクション Vortex（渦）フォース #UE4 | @UNREALENGINE

65.

Niagara+ブループリントでのインタラクション Add Velocity from Point #UE4 | @UNREALENGINE

66.

Niagara+ブループリントでのインタラクション Line Attraction Force #UE4 | @UNREALENGINE

67.

Niagara+ブループリントでのインタラクション Drag #UE4 | @UNREALENGINE

68.

Niagara+ブループリントでのインタラクション Gravity Force #UE4 | @UNREALENGINE

69.

Niagara+ブループリントでのインタラクション 4. 元の位置に戻す（自作モジュール） Particle Spawn時点のパーティクル位置を保持 ↓ キー入力（ブループリント）があったときにLerpで現在位置と保持した初期位置をブレンドしながら戻していく。 #UE4 | @UNREALENGINE

70.

Niagara+ブループリントでのインタラクション 4. 元の位置に戻す（自作モジュール） ParticleのSpawn時にPositionとMesh Orientationを格納しておく #UE4 | @UNREALENGINE

71.

Niagara+ブループリントでのインタラクション 4. 元の位置に戻す（自作モジュール） Particle Update（パーティクル更新）で元の位置に戻す計算をする #UE4 | @UNREALENGINE

72.