狠狠撸
Submit Search
新しいエフェクトツール、狈颈补驳补谤补を楽しもう!~狈颈补驳补谤补作例のブレイクダウン~
?
Download as PPTX, PDF
?
9 likes
?
5,532 views
Wataru Ikeda
Follow
アンリアルフェス贰础厂罢2018の登坛资料です。
Read less
Read more
1 of 102
Download now
Downloaded 79 times
More Related Content
新しいエフェクトツール、狈颈补驳补谤补を楽しもう!~狈颈补驳补谤补作例のブレイクダウン~
1.
UNREAL FEST EAST
2018
2.
#ue4fest 新しいエフェクトツール、 「Niagara」を楽しもう! ~Niagara作例のブレイクダウン~ 池田 亘 (Realtime
VFX Artist)
3.
#ue4fest 1. 今日の内容は、Niagaraの使い方講座ではなく 主に作例のブレイクダウンです。 2. 使用バージョン:
UE4.20.3 & 4.21.0 preview1 3. Niagaraはアーリーアクセス(2018年10月14日時点)です。 細かい点で今後変更の可能性があります。 最初に
4.
#ue4fest 1. リアルタイムエフェクト大好きな、UE4愛好家です。 2. UE4ならびにNiagaraは、趣味で触って作品を作っています。 自己紹介
5.
#ue4fest 1. 新エフェクトツール「Niagara」って? 特徴は? 2.
Niagara 制作例のブレイクダウン 今日の内容
6.
#ue4fest
7.
#ue4fest Cascade Niagara ※イメージです Niagara?
8.
#ue4fest Cascade ? 用意されたモジュールを使ってエフェクトを作る ? プログラマなしにモジュール追加は超困難 Niagara ?
自分でモジュール(機能)を作れる! ? あらゆるパラメータにアクセス可能 → 可能性は無限大 ? HoudiniからNiagaraへ情報を渡せる プログラマブルVFX
9.
#ue4fest Cascade 1つのアセットの中にエミッター群を内包 データの持ち方 Cascadeのアセット
10.
#ue4fest Niagara ? エミッターがアセット ? 他のエフェクトでも使いまわせる ?
使われる先で値の上書きが可能 データの持ち方 アセット化されたエミッター群(Niagara Emitter) エフェクト本体 (Niagara System)
11.
#ue4fest ? 用意されたモジュールでCascadeと似たフローで制作可能 + ? 自分でモジュールを作ったり、エクスプレッションで制御 つまり ?
アーティストも、やりたいことを自分で試せる! ? テクニカル面で強くなれる=プログラマさんの気持ちが少し解る これまで通りの制作 + 自分でいろいろ作れる
12.
#ue4fest 例:パーティクルの位置にオフセットを持たせるモジュール ノードベースでモジュールを作る
13.
#ue4fest ここでどのパラメータを使うか取ってきたもの、作ったものを入れ て ノードベースでモジュールを作る
14.
#ue4fest 真ん中でこねくり回して、 ノードベースでモジュールを作る
15.
#ue4fest ここでどのパラメータにこねくり回した結果を渡すかを決める。 ノードベースでモジュールを作る
16.
#ue4fest パーティクルの位置にオフセットを持たせるモジュール完成 ノードベースでモジュールを作る
17.
#ue4fest カニミソの備忘録(by カニパンチさん) ブログ http://crabpunch.hatenablog.com/ 第8回UE4勉強会のNiagaraの資料(by 塩谷さん) NiagaraでサクッとMorphEffectを作ろう /YuyaShiotani/niagaramorpheffe ct-113524177 作業工程
の動画 https://www.youtube.com/watch?v=Pl4IyfMvt_E 入門として、以下がオススメ
18.
#ue4fest Niagara 制作例のブレイクダウン
19.
#ue4fest 1. Niagaraでエフェクトを作る 2. ブループリントを組んで、そこからNiagaraへ値を送る 1.
値をタイムラインで変化させ、2つの状態をブレンドさせる 2. もしくはNiagaraエフェクトを任意の場所に発生させる 以上 今回、基本的に何をしているか
20.
#ue4fest まずは試せることが大事。 プレイヤーを中心に渦巻く表現の基本形。 Niagaraで、とても簡単にできる。 すぐにこんな感じのエフェクトが試せる
21.
#ue4fest プレイヤーの位置と、渦巻く力の強さを ブループリントから取ってくる場所 User.パラメータ名 これが外から値を拾うパラメータ Niagara側のパラメーター
22.
#ue4fest ここが渦の制御の場所。 VoretexとかCurlNoiseといったフォース は、Niagaraに元から入っているモジュ ール。 Niagara側のパラメーター
23.
#ue4fest Parametersの中にパラメータが網羅さ れている。 ドラッグ&ドロップで、存在している パラメータを見ることが出来るウィン ドウから放り込める。 とても便利。 パラメータのDrag&Dropが便利
24.
#ue4fest Niagaraのエフェクトをレベルに置いて、ブループリントをこれ だけ放り込む。 ここで扱っているのはプレイヤーの位置と、Nキーが押されてい る間に渡される渦の強さ。 これをNiagaraの中の渦のパラメータに渡している。 レベルに置いたエフェクトのブループリント
25.
#ue4fest ちなみにタイムラインの値はこんな感じ。 ここでは、Nキーをを押したら、1秒かけてゼロから1000に なる。 レベルに置いたエフェクトのブループリント
26.
#ue4fest 流れを図にすると、こんな風に値が渡されている。 ブループリントからUser.へ、そしてそれをフォースのモジュー ルへ。 様々なパラメータを自在に繋いだり呼び出したりできるのが Niagaraの強みのひとつ。 これだけで可能 1 2 ブループリント
27.
#ue4fest では本編
28.
#ue4fest 1. プレイヤーが走ると落ち葉が舞う 2. 渦を巻いてパーティクルがプレイヤーに集まる 3.
パーティクルの色替え 4. 立方体状に並べる 5. 落ち葉からキューブに変化 6. びりびり 7. ブロック状の頭蓋骨へ遷移 8. レーザー発射 9. さらさら死に 10.パーティクルの海 どういった要素を入れたか
29.
#ue4fest ひとつめ Curl Noise使ってひらひらさせるが、プレイヤー中心にカールノイズのフ ォースを範囲限定で与えて、そのフォースにはプレイヤーの速度をかけあ わせている。 (もちろんCollisionも入っていて、床で止めている) 走ると落ち葉が舞う
30.
#ue4fest この表現に必要なもの ? プレイヤーから各パーティクルまでの距離 ? プレイヤーの周囲の空気だけが動かされるはずだから ?
プレイヤーの移動速度 ? 動いていないときは、落ち葉が舞うとおかしいから ? カールノイズを使ったフォース ? 空気の複雑な動き(乱流)に向いているから 走ると落ち葉が舞う
31.
#ue4fest ? プレイヤーから各パーティクルまでの距離 = length(プレイヤーの位置
- パーティクルの位置) 走ると落ち葉が舞う
32.
#ue4fest ? 3乗してグラデーションをリニアではないようにしている 走ると落ち葉が舞う
33.
#ue4fest ? 視覚化すると、こんな感じのイメージ。ただ、もとが1以上の値なので、3乗すると大変な数値になるため、そこから10000分の1くらいにしている。 走ると落ち葉が舞う
34.
#ue4fest ? 近いほど値が小さいのを反転しないといけない 走ると落ち葉が舞う
35.
#ue4fest ? プレイヤーの移動速度をブループリントからNiagaraへ送る 走ると落ち葉が舞う プレイヤーが今、 どれくらい動いているか Niagaraの、この名前に 値を送ってあげている
36.
#ue4fest ? User.〇〇〇を使って入ってきた値は、Niagara内で使える 走ると落ち葉が舞う ブループリントから来た User.PlayerForceを モジュールへ渡す
37.
#ue4fest ? プレイヤーの速度に基づいて フォースが働く強さと範囲を制御 走ると落ち葉が舞う プレイヤーから渡される速度がゼロ以外の時 だけ変化があるようにする
38.
#ue4fest Curl NoiseのNoise Strengthに エクスプレッションで値を入れている 走ると落ち葉が舞う
39.
#ue4fest ? プレイヤー位置を中心に強さと範囲を掛け合わせた、 Vortexのフォース制御 =
Curl Noiseと大差ない制御 渦を巻いてプレイヤーに集まる
40.
#ue4fest ? プレイヤーの位置を中心にVortexの強さと範囲のかけ算 渦を巻いてプレイヤーに集まる プレイヤーの中心から上に50cm~100cmが渦の原点
41.
#ue4fest ? Dynamic Mat
Paramsで色替え 範囲内のパーティクル色替え
42.
#ue4fest 範囲内のパーティクル色替え ? Cascadeの「Dynamic」モジュール相当
43.
#ue4fest ? Dynamic Mat
Paramsで色替え 範囲内のパーティクル色替え
44.
#ue4fest エクスプレッションのおまじない 「ブループリントから来る渦の強さ×0.5と、渦の影響範囲をいい感じに足してあげてください」 範囲内のパーティクル色替え 渦の力の半分 + 渦の力
× 影響範囲×影響範囲
45.
#ue4fest 範囲内のパーティクル色替え Emissive Colorに Dynamic Parameterで 値を与えているだけ
46.
#ue4fest ? 16*16*16=4096 particles ?
これも専用のモジュール作成 が必要 立方体状に並べる & 回転
47.
#ue4fest ? 専用のモジュール作成 →これだけでキューブの準備OK 立方体状に並べる
48.
#ue4fest ? Execution IndexノードでパーティクルのIndexを取得 ?
順番に並べ、折り返したい数で次の列にすすむようにする 立方体状に並べる
49.
#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段目
50.
#ue4fest ? 動画にすると、こんな感じ で並べているイメージ 立方体状に並べる
51.
#ue4fest ? 各パーティクルの座標回転計算(XとY軸) 立方体の回転
52.
#ue4fest ? Niagaraのパーティクルは複数のレンダリングを持てる ? いい感じにスケールで入れ替え 葉→キューブに変化
53.
#ue4fest ビーム状のパーティクルにコリジョンイベントを設定し、 どこかに当たったら他のパーティクルが出る 小細工なし =Niagaraの基本機能 のみ使用 びりびり
54.
#ue4fest 親エミッター(ビーム使用) ? 1本50 particles
×3 ? カールノイズとJitterで曲げた びりびり
55.
#ue4fest 親エミッター ? コリジョンイベントのついたビーム(びりびり本体) 子エミッター ? GPUパーティクルの火花(6~22p) =進行方向に少し伸びる ?
シンプルなスプライトの煙(1p) ? ポイントライト(1p) びりびりのコリジョン
56.
#ue4fest 親に必要なものは、 Collision Query ならびに Collision Linear
Impulse さらに Generate Collision Event びりびりのコリジョン
57.
#ue4fest 子には Event Handler Properties と Receive
Collision Event が必要 Sourceで親エミッターの、どの イベントで発生させるかを指定 びりびりのコリジョン
58.
#ue4fest Niagaraは、1つのアセットの中に親と子がいる びりびりのコリジョン
59.
#ue4fest キューブ状に並べたブロックの頭蓋骨に遷移。 なんかネタを放り込みたったのでHoudini使った。 UE4.20.3で作成 ブロック頭蓋骨に遷移
60.
#ue4fest HoudiniからパーティクルのIDを出力 「UE4 Niagara用Houdini Dataインターフェース」で検索を! (いろいろデータを渡せる) ブロック頭蓋骨に遷移
61.
#ue4fest Houdiniを使うメリット 1. 事前に計算しておけるので、負荷の軽減ができる 2. 確実に、思ったような結果を得られる 3.
Houdiniの機能を使った超複雑な挙動をリアルタイムで 動かすことができる ブロック頭蓋骨に遷移
62.
#ue4fest 何をしているか ? 円状に出現するようにポイント情報を Houdini上でソート ? ArcTangent2
(atan2) を使用 ? グラデーションの明るさをもとに IDの順番を整列 ブロック頭蓋骨に遷移 Atan2 シェーダーで見てみると、 こんなグラデーション
63.
#ue4fest 1. Scatterでポイント化 ブロック頭蓋骨に遷移
64.
#ue4fest 2. attributewrangleで 円状に並べる準備 ブロック頭蓋骨に遷移
65.
#ue4fest 3. sortでポイントを並べる By Attributeでソート ブロック頭蓋骨に遷移
66.
#ue4fest 4. pointwrangleで ソート結果を格納 ブロック頭蓋骨に遷移
67.
#ue4fest 5. Niagaraへ出力 ブロック頭蓋骨に遷移 idだけでなく、いろいろNiagaraに持っていけます outから.hcsvで出力
68.
#ue4fest ? UEでHoudini Niagaraプラグインが有効か確認 ブロック頭蓋骨に遷移
69.
#ue4fest 6. Handle Spawned
Houdini Particlesモジュールを使い、 Houdiniから出力したを読み込む ブロック頭蓋骨に遷移
70.
#ue4fest ? 読み込んだCSV(.hcsv)ファイルのパーティクル位置を格納 ? オフセットも付けられるようにした ブロック頭蓋骨に遷移
71.
#ue4fest MorphTimeに入ってくるのはゼロから1の値で、それはブループリントか ら制御。 入ってくるゼロ1を4096倍して、Indexからそれを引き、マイナス1かけ てゼロ1でクランプする。 これでIndexゼロから順番に、時間経過とともに各パーティクルの値、 Particle.CSVSwitchはゼロから1になっていく。 ここまでの結果を使うと、いったんキューブからノイズで散らせたものが ワープするように頭蓋骨を組みあがるようになる。 ? 持ってきたidの使い道 ブロック頭蓋骨に遷移
72.
#ue4fest それではちょっと見た目にアレだったので、わずかな時間の隙間だけ れども、そのゼロから1への変化にカーブを挟んであげることで、 散ったパーティクルがちゃんと移動して集まっているように見せて いる。 ? 持ってきたidの使い道 ブロック頭蓋骨に遷移
73.
#ue4fest ? カーブを使った変化ありと無しの比較 ブロック頭蓋骨に遷移 カーブなし カーブあり
74.
#ue4fest ? マテリアルと似た感じで、Functionを自分で作れる 頭蓋骨とプレイヤーの回転の同期
75.
#ue4fest ? Function Scriptの中身 頭蓋骨とプレイヤーの回転の同期
76.
#ue4fest キーを押し続けていると、タイムラインが走り続ける ブループリントで全部を繋ぐ
77.
#ue4fest キーの位置をずらして、 いい感じになるように 遷移させている タイムラインもいっぱい
78.
#ue4fest ? レーザー本体はメッシュ と頂点アニメーション ? 地面の煙と破片は 見えないパーティクルの コリジョンで発生 ?
Vortexを使った GPUパーティクル2種 (合計約2,200 particles) レーザー発射 特別なことはしていない
79.
#ue4fest ? 身体全体からエフェクトが出る だけではつまらない… ↓ ? Niagaraはパーティクルの 発生範囲も制御可能! さらさら死に
80.
#ue4fest ? 攻撃方向に面した部分だけパーティクルを出す さらさら死に 全体から普通に出した場合 任意の方向の法線部分のみの場合
発生范囲を可视化したマテリアル
81.
#ue4fest ? DOT使う→数値が1.0に近いほどパーティクルが出る さらさら死に 組み込み関数のDOTで得られる数値 1.0 0.5 0 0 -1.0 -0.5 -0.5 0.5 攻撃の方向 (スケルタル)メッシュの 法線方向
82.
#ue4fest ? 結果、攻撃方向に面した部分だけパーティクルが出る さらさら死に
83.
#ue4fest これもモジュールを作った。 ちょっと分けて説明。 この5つの値で制御されている。 パーティクル絶対殺すマン=DataInstance.Alive 比較用の値 さらさら死に レーザーの方向 メッシュの法線方向 Dotの結果の範囲を移動 パーティクル絶対殺すマン 発生範囲制御用の値
84.
#ue4fest 比較用の値 さらさら死に 比較のためのノード 比較用の値よりも大きかったら殺されない こねくり回して、 帯状の範囲を作っている →
85.
#ue4fest マテリアルにも似た制御を入れて消している さらさら死に
86.
#ue4fest パーティクルの海 ? シンプルな機能の組み合わせ
87.
#ue4fest ? パーティクル発生位置の頂点カラーをサンプリング ? 数の暴力(約84,000
particles) ? 動きはカールノイズと渦(Vortex)だけ ? 色を変えるだけでなく、頂点の色などを見て発生範囲を絞る ことができる パーティクルの海
88.
#ue4fest パーティクルの海 ? 頂点カラー、法線方向のサンプリングの 参考ファイル
89.
#ue4fest ? テクスチャを頂点カラーにベイク パーティクルの海
90.
#ue4fest ? めっちゃポリゴンを割った (やりすぎた) パーティクルの海
91.
#ue4fest パーティクルの海
92.
#ue4fest パーティクルの海
93.
#ue4fest ? 色を変えるだけでなく、頂点の色(明るさなども)を見て 発生範囲を絞ることができる。 パーティクルの海 青成分の部分のみ パーティクルを発生 →
94.
#ue4fest ? 雑な方法だが青成分が強いものだけ残すことができるように している。 。 パーティクルの海 青色だけ抽出するための引き算
95.
#ue4fest Photoshopで引き算してみると、こ んな感じ。 梵字とアンリアルマーク、相性がい いです。 違和感があまり仕事をしない。 (結果の部分、プロジェクタだと見 えにくいかもと思ったので、ちょっ とだけ明るくしている) ? 青色(UEのマークのところ)だけ残す雑な方法 パーティクルの海 青(B) -
赤(R) - 緑(G) = マークが残る
96.
#ue4fest アルファゼロにしてるのは、そうしないと真っ白だったから。 パーティクルの海 ここで頂点カラーをパーティクルの Colorに放り込んでいる
97.
#ue4fest ? 4.21 Preview1からテクスチャのサンプリングが可能になった パーティクルの海
98.
#ue4fest ? World座標をUVとして使用(仮出力のため) パーティクルの海
99.
#ue4fest ? 参考程度に… おまけ(Screen Texture
Sampling)
100.
#ue4fest ? むりやりViewMatrix(参考程度に…) おまけ(Screen Texture
Sampling)
101.
#ue4fest ? Niagaraは、ブループリントからの制御がカンタン ? 自分でいろいろ作って試せる &
あらゆる部分に制御を加えられる! ? 自分でモジュールを作らなくても、かなりの表現力 ? エフェクトを組み立てる点ではCascadeに近く馴染みやすい ? とにかく面白い! 皆さんもいっしょに「Niagara」を楽しもう! 今日のまとめ
102.
#ue4fest ありがとうございました!
Download