ニッチなblender手記

世の中には自分に似た人が3人いるとされています。その人達へと情報共有するために主にblenderの記事を書いていきます。

create Line Effect with Visual Effect Graph at Unity

概要

YORIMIYA@xRMV さんのツイート にあるエフェクトの手順をそのままなぞった 下記記事の Visual Effect Graph 版

minorblender.hatenablog.com

ノード編集になっているので、構成としては Particle System 版よりも分かりやすい。

構成

ノードは大きく2つの構成に分かれる。

  1. XYZのいずれかの単一軸線上を移動するパーティクル
  2. パーティクルに追従する Trail

コツ

Particle System 版と同じく、このエフェクトの9割は XYZのいずれかの単一軸線上を移動するパーティクル にかかっている。
つまり下図の動きを表現できれば、ほぼクリアしたと言っていい。

f:id:r9aArrowhead:20210628202023p:plain

作り方

準備

新規に Visual Effect Graph を作成しておくこと。 f:id:r9aArrowhead:20210630015705j:plain

XYZのいずれかの単一軸線上を移動するパーティクル

Visual Effect Graph を新規作成した時に追加されている Set Velocity Random は不要なので削除するか無効にしておく。
その後はパーティクルの発生範囲を設定するための Set Position 、今回のキモである単一軸上を移動させるための Set Velocity over Lifetime を設定する。

Particle system では Velocity の設定に Add Velocity を利用していたが、 Visual Effect Graph 版では利用すると挙動が変わる。 理由は単純で、 Visual Effect Graph 版の Add Velocity は指定した時間になると指定した値の Velocity 値を追加するため。 追加するのだから、当然元の速度 + Velocity となる。 Update コンテキストで速度を加算するのだから指定時間毎に速度が加算され続けるという仕組みになっている。
そのため、 速度の値を置き換える Set Velocity over Life へと変更した。

f:id:r9aArrowhead:20210630015714j:plain f:id:r9aArrowhead:20210630015722j:plain f:id:r9aArrowhead:20210630015743j:plain f:id:r9aArrowhead:20210630015809j:plain f:id:r9aArrowhead:20210630015816j:plain f:id:r9aArrowhead:20210630015823j:plain f:id:r9aArrowhead:20210630015829j:plain f:id:r9aArrowhead:20210630015836j:plain f:id:r9aArrowhead:20210630015842j:plain f:id:r9aArrowhead:20210630015849j:plain

ここまで完成すれば、パーティクルの動きが下図のように XYZ の1軸だけで移動するようなパーティクルとなる。

f:id:r9aArrowhead:20210630020642g:plain

パーティクルに追従する Trail

Particle System では Trail で表現していたラインの部分を、 Strip で再現する。 Visual Effect Graph の基本的な説明は割愛。

f:id:r9aArrowhead:20210630015854j:plain f:id:r9aArrowhead:20210630015901j:plain f:id:r9aArrowhead:20210630015908j:plain f:id:r9aArrowhead:20210630015915j:plain f:id:r9aArrowhead:20210630015922j:plain

ここまでできれば、下図のように少ないながらもラインエフェクトが発生するようになる。

f:id:r9aArrowhead:20210630020032g:plain

パラメータ調整

基礎動作は完了したので、 Spawn 数などの設定をしていく。

f:id:r9aArrowhead:20210630015929j:plain f:id:r9aArrowhead:20210630015938j:plain f:id:r9aArrowhead:20210630015944j:plain f:id:r9aArrowhead:20210630015950j:plain

ここまでの設定を終えた状態が下図となる。

f:id:r9aArrowhead:20210630020057g:plain

改善部分

最後まで設定した後の動画を見れば分かるが、動きが単調なのでこれ単体だけでは単調な印象となる。
もとのツイートではこのエフェクトを位置や角度を変えて複数用意することで対応していいたが、 Visual Effect Graph なら位置や速度を動的に変更することもできる。

もっと複雑な、PV や 映画などで出てくるような感じにするためにはラインエフェクトの複雑度を上げる必要がある。