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

26.6K Views

July 08, 20

スライド概要

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

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

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

profile-image

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

シェア

またはPlayer版

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

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

何を行っているか 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行ごとに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.

Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) #UE4 | @UNREALENGINE

73.

Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) #UE4 | @UNREALENGINE

74.

Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) #UE4 | @UNREALENGINE

75.

Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) #UE4 | @UNREALENGINE

76.

Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) #UE4 | @UNREALENGINE

77.

Niagara+ブループリントでのインタラクション ほぼNiagaraで出来たレベル #UE4 | @UNREALENGINE

78.

Niagara+ブループリントでのインタラクション ほぼNiagaraで出来たレベル #UE4 | @UNREALENGINE

79.

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

80.

Niagaraでの量産 現在のエミッターから親となるエミッターを生成 #UE4 | @UNREALENGINE

81.

Niagaraでの量産 現在のエミッターから親となるエミッターを生成 自分の親となる エミッター生成 #UE4 | @UNREALENGINE 亜種エミッター を量産

82.

セル表現について #UE4 | @UNREALENGINE

83.

セル表現について #UE4 | @UNREALENGINE

84.

セル表現について System OverView (システムの概要)ウィンドウでの管理 #UE4 | @UNREALENGINE

85.

セル表現について 「1要素は2~3色」を厳守 煙 #UE4 | @UNREALENGINE 炎

86.

セル表現について 基本のテクスチャはこんな感じ 法線(X) #UE4 | @UNREALENGINE マスク 法線(Y) ディゾルブ用

87.

セル表現について 簡易的にライト対応 #UE4 | @UNREALENGINE

88.

セル表現について 簡易的にライト対応 #UE4 | @UNREALENGINE

89.

セル表現について 簡易的にライト対応 ワールド空間 タンジェント空間 #UE4 | @UNREALENGINE タンジェント空間からワールド空間へ変換

90.

PDO (Pixel Depth Offset) が効果的 #UE4 | @UNREALENGINE

91.

PDO (Pixel Depth Offset) が効果的 テクスチャのグラデーションをそのまま使用した #UE4 | @UNREALENGINE

92.

PDO (Pixel Depth Offset) が効果的 #UE4 | @UNREALENGINE

93.

PDO (Pixel Depth Offset) が効果的 #UE4 | @UNREALENGINE

94.

小ネタ:Spriteの回転制御 #UE4 | @UNREALENGINE

95.

小ネタ:Spriteの回転制御 Spriteの回転制御モジュールスクリプト #UE4 | @UNREALENGINE

96.

小ネタ:Spriteの回転制御 4.25からカメラの値をモジュールから取れるようになった! #UE4 | @UNREALENGINE

97.

小ネタ:Spriteの回転制御 出ましたDot。 #UE4 | @UNREALENGINE

98.

小ネタ:Spriteの回転制御 Dotで得られる値を回転係数として使う #UE4 | @UNREALENGINE

99.

小ネタ:Spriteの回転制御 Dotで得られる値を回転係数として使う #UE4 | @UNREALENGINE

100.

小ネタ:Spriteの回転制御 Spriteの回転制御 あり #UE4 | @UNREALENGINE 回転制御 なし (ランダム回転)

101.

小ネタ:Spriteの回転制御 スクラッチパッドでテスト用モジュール作成ができる #UE4 | @UNREALENGINE

102.

質疑応答 エフェクト本 「HoudiniとUnreal Engine 4で学ぶリアルタイムVFX」 ~ レベルアップのための心得と実践 ~ ボーンデジタルさんから発売中です!(Kindle版もあります) @WataruVFX よかったらフォローしてやってください #UE4 | @UNREALENGINE