狠狠撸

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

More Related Content

新しいエフェクトツール、狈颈补驳补谤补を楽しもう!~狈颈补驳补谤补作例のブレイクダウン~