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

スライド概要

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

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

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

profile-image

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

@EpicGamesJapan

作者について:

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

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2020-07-08 18:16:03

各ページのテキスト

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