29.1K 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」の講演資料となります。
Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/
もっと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に納まる
何を行っているか これは通常のVAT(Fluid) 横軸=頂点の位置情報 縦軸=ぱらぱらアニメーション #UE4 | @UNREALENGINE
何を行っているか ● VATの応用=アニメーションとして使っていない ● 複数種類の破片の形状(頂点の位置)を記録したものとして使用 横軸=頂点の位置情報 縦軸=1行ごとに1パーツを格納 #UE4 | @UNREALENGINE (Cropしてます)
何を行っているか ● VATだけどアニメーションさせていない ● 上から順に行ごとに破片パーツの頂点位置情報を格納している テクスチャサイズ=1024*128 横幅1024ならば、341三角ポリゴンまで対応 縦=パーツの数(今回は128パーツで作成) ● アニメーションはNiagaraのパーティクルの挙動 #UE4 | @UNREALENGINE
Houdiniで素材制作 #UE4 | @UNREALENGINE
まずはHoudiniでMeshとTexture作成 主な作業 1. 破片の生成 2. 破片の位置情報(CSV)の出力 3. 破片の位置補正 4. 法線情報に細工 5. (UV情報に細工 Option) 6. VATとメッシュの出力 #UE4 | @UNREALENGINE
1.破片の生成 ● よくあるISO Offset → Scatter → ボロノイ #UE4 | @UNREALENGINE
2.破片の位置情報(CSV)の出力 (SideFXLabs version 313を使用)
3.破片の位置補正 これをやらないと破片が重心あたりで回転してくれない ✕ #UE4 | @UNREALENGINE ◯
4.法線情報に細工 Vertex Animation Textureのノードを少し改造 (SideFXLabs version 313を使用) #UE4 | @UNREALENGINE
4.法線情報に細工 法線制御 なし #UE4 | @UNREALENGINE 法線制御 あり
4.法線情報に細工 Vertex Animation Textureのノードを少し改造 #UE4 | @UNREALENGINE
4.法線情報に細工 Vertex Animation Textureのノードを少し改造 発売中(Kindle版もあります) #UE4 | @UNREALENGINE
ここからUE4 #UE4 | @UNREALENGINE
メッシュとテクスチャの読み込み 出力された位置情報のテクスチャ 出力されたメッシュ #UE4 | @UNREALENGINE 出力されたUV情報のテクスチャ
マテリアル改造 HoudiniからUE4用のマテリアルをコピペして改造 #UE4 | @UNREALENGINE
マテリアル改造 1. Dynamic Parameterを使用 IDとしてNiagaraから値を受け取る #UE4 | @UNREALENGINE
マテリアル改造 2. 頂点位置をオフセット Niagaraから位置情報を取れるようにする #UE4 | @UNREALENGINE
マテリアル改造 スケール対応のために必要 #UE4 | @UNREALENGINE
マテリアル改造 3. カラー情報をUVとして扱う #UE4 | @UNREALENGINE
マテリアル改造 なぜRだけにする? #UE4 | @UNREALENGINE ノードを辿ると何がある?
マテリアル改造 #UE4 | @UNREALENGINE
マテリアル改造 #UE4 | @UNREALENGINE
Niagaraでの基本設定 #UE4 | @UNREALENGINE
Niagaraでの基本設定 1. CSVの読み込み 2. 回転対応(簡易) 3. スケール対応 4. パーツのIDをDynamic Parameterに渡す #UE4 | @UNREALENGINE
Niagaraでの基本設定 1. CSVの読み込み(自作のモジュール) #UE4 | @UNREALENGINE
Niagaraでの基本設定 1. CSVの読み込み(自作のモジュール) #UE4 | @UNREALENGINE
Niagaraでの基本設定 2. 回転対応(簡易) #UE4 | @UNREALENGINE
Niagaraでの基本設定 2. 回転対応(簡易) #UE4 | @UNREALENGINE
Niagaraでの基本設定 2. 回転対応(簡易) Niagara #UE4 | @UNREALENGINE
Niagaraでの基本設定 3. スケール対応 #UE4 | @UNREALENGINE
Niagaraでの基本設定 4. パーツのIDをDynamic Parameterに渡す #UE4 | @UNREALENGINE
Niagaraでの基本設定 4. パーツのIDをDynamic Parameterに渡す #UE4 | @UNREALENGINE
Niagaraでの基本設定 4. パーツのIDをDynamic Parameterに渡す IDを渡したとき #UE4 | @UNREALENGINE IDを渡してないとき
IDって? 1. Dynamic Parameterを使用 IDとしてNiagaraから値を受け取る #UE4 | @UNREALENGINE 16パーツの場合の縦(UVのV)の位置 1行目=0 2行目=0.0625 3行目=0.125 … 16行目=0.9375
Tips: Attribute Spreadsheet(属性スプレッドシート)が便利 #UE4 | @UNREALENGINE
Niagaraでの基本設定
Niagara+ブループリントでのインタラクション #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 1. レーザーからの距離で影響範囲設定 2. Vortex、Velocity、Line Attraction Force、Drag、Gravity 3. 元の位置に戻す #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 1. レーザーからの距離で影響範囲設定 #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 1. レーザーからの距離で影響範囲設定 距離を調べてOne Minus(1-x)で反転。白いところが影響範囲。 白黒反転した結果 #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 1. レーザーからの距離で影響範囲設定(自作モジュール) 新しいノードが 用意された! #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Normalize Distance Rangeの中身を見てみると… 展開 展開 #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 2. Vortex、Velocity、Line Attraction Force、Drag、Gravity #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 今回のブループリント制御の基本形 #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 今回のブループリント制御の基本形 #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 今回のブループリント制御の基本形 #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 今回のブループリント制御の基本形 #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Niagara Parameter Collection (NPC) とは? Override 任意のエフェクトがパラメータを 名前で取得 #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Vortex(渦)フォース #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Vortex(渦)フォース #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Particles.StoredMoveは何のため? =フラグです Int値↑ Particles.StoredMove = clamp(0,1, Particles.StoredMove + ((0.01 < Particles.StoredMove)?1:0) ); #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Particles.StoredMoveは何のため? #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Vortex(渦)フォース #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Vortex Force(渦) #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Vortex(渦)フォース #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Add Velocity from Point #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Line Attraction Force #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Drag #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション Gravity Force #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) Particle Spawn時点のパーティクル位置を保持 ↓ キー入力(ブループリント)があったときにLerpで現在位置と保持した初期位置 をブレンドしながら戻していく。 #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) ParticleのSpawn時にPositionとMesh Orientationを格納しておく #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) Particle Update(パーティクル更新)で元の位置に戻す計算をする #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション 4. 元の位置に戻す(自作モジュール) #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション ほぼNiagaraで出来たレベル #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション ほぼNiagaraで出来たレベル #UE4 | @UNREALENGINE
Niagara+ブループリントでのインタラクション インタラクション完成! #UE4 | @UNREALENGINE
Niagaraでの量産 現在のエミッターから親となるエミッターを生成 #UE4 | @UNREALENGINE
Niagaraでの量産 現在のエミッターから親となるエミッターを生成 自分の親となる エミッター生成 #UE4 | @UNREALENGINE 亜種エミッター を量産
セル表現について #UE4 | @UNREALENGINE
セル表現について #UE4 | @UNREALENGINE
セル表現について System OverView (システムの概要)ウィンドウでの管理 #UE4 | @UNREALENGINE
セル表現について 「1要素は2~3色」を厳守 煙 #UE4 | @UNREALENGINE 炎
セル表現について 基本のテクスチャはこんな感じ 法線(X) #UE4 | @UNREALENGINE マスク 法線(Y) ディゾルブ用
セル表現について 簡易的にライト対応 #UE4 | @UNREALENGINE
セル表現について 簡易的にライト対応 #UE4 | @UNREALENGINE
セル表現について 簡易的にライト対応 ワールド空間 タンジェント空間 #UE4 | @UNREALENGINE タンジェント空間からワールド空間へ変換
PDO (Pixel Depth Offset) が効果的 #UE4 | @UNREALENGINE
PDO (Pixel Depth Offset) が効果的 テクスチャのグラデーションをそのまま使用した #UE4 | @UNREALENGINE
PDO (Pixel Depth Offset) が効果的 #UE4 | @UNREALENGINE
PDO (Pixel Depth Offset) が効果的 #UE4 | @UNREALENGINE
小ネタ:Spriteの回転制御 #UE4 | @UNREALENGINE
小ネタ:Spriteの回転制御 Spriteの回転制御モジュールスクリプト #UE4 | @UNREALENGINE
小ネタ:Spriteの回転制御 4.25からカメラの値をモジュールから取れるようになった! #UE4 | @UNREALENGINE
小ネタ:Spriteの回転制御 出ましたDot。 #UE4 | @UNREALENGINE
小ネタ:Spriteの回転制御 Dotで得られる値を回転係数として使う #UE4 | @UNREALENGINE
小ネタ:Spriteの回転制御 Dotで得られる値を回転係数として使う #UE4 | @UNREALENGINE
小ネタ:Spriteの回転制御 Spriteの回転制御 あり #UE4 | @UNREALENGINE 回転制御 なし (ランダム回転)
小ネタ:Spriteの回転制御 スクラッチパッドでテスト用モジュール作成ができる #UE4 | @UNREALENGINE
質疑応答 エフェクト本 「HoudiniとUnreal Engine 4で学ぶリアルタイムVFX」 ~ レベルアップのための心得と実践 ~ ボーンデジタルさんから発売中です!(Kindle版もあります) @WataruVFX よかったらフォローしてやってください #UE4 | @UNREALENGINE