VFX力を上げていきたいので模写ログ.
完成品
全体像
VFX Graph
VFX ShaderGraph
ShaderGraphの方は、電気線の両端をきれいにアンチエイリアスかけてフェードアウトするために利用.
作り方
ただの模写なので、本家をみてください..!
雑にブロック解説
Spawn
- SingleBurst: 256個生成
InitializeParticleStrip
- particleはつなげて先表示する
- SetProgressでi/255のfloat値をセットして、後のベジェ曲線の補完位置Tで利用
UpdateParticleStrip
- SetPositionで位置の更新 (particleの順番ごとにベジェ曲線の補完位置をそれぞれ代入)
- AddPositionでパーリンノイズをベジェ曲線位置に対してランダムに追加. このノイズ部分がアニメーションする
Output ParticleStrip Quad
- ScreenSpaceSizeでスクリーンスペースに対して、いい感じに細いピクセルラインを引く
- ShaderGraphは両端をいい感じにエイリアスかけるようにしたものを参照
SetProgress
- GetAttribute: attributeIndexInStripでStripLineのindexを取得して0-1のprogressに直してセットしておく. (あとで使う)
Bezier Curve Line Positions
- ベジェ曲線の位置を算出
- Initializeで設定したSetProgressの値をここで参照して中間位置に設定
SourceTransform/TargetTransform
- transformをblackboardのパラメータとして外だしする.
- ベジェ曲線の高さもパラメータとして外出しする.
- transform(position)と高さから2つのsource position, target positionを生成してベジェ曲線に使う
LineNoise
- ベジェ曲線に乗せるノイズを生成する
- Perlin Noise 3Dでノイズ生成.
- ノイズのレンジは中間が多め、先端末端を少なめにするように、SampleCurve+GetProgressで調整.
TransformBinding
- VFXPropertyBinderを使って、exportしたpropertyのtransformを割り当てる.
- これによってオブジェクト位置に連動して先端と終端の放電線の位置が変わる.
感想
VFXPropertyBinderが便利...!
ノイズの使い方やVFX ShaderGraphの使い所なんかもすごく勉強になった.
色んな人のやり方勉強できる模写おすすめ..! Youtubeに色々上がってる