Unity VFXGraphで遊んでみる

本投稿は TECOTEC Advent Calendar 2020 の5日目の記事です。

コンテンツ開発事業部のUnityクライアントエンジニア持田です。

本記事では、弊社のロゴを点群データ化して消えて行くような演出を

VFXGraphの勉強も兼ねサンプルを作成して行きます。

f:id:mochida_1007:20201125204833g:plain

目次

使用ソフト

  • Unity2020
  • Houdini

演出の全体像

  1. ロゴを表示するパーティクルが表示される

  2. 横に流れるパーティクルが増えると共に、ロゴのパーティクルは徐々に少なくなる

  3. 横に流れるパーティクルが少なくなり完全に消失する

演出は以上の展開となるよう作成しました。

まずは、ロゴを表示する部分で必要なメッシュを作成していきます。

Houdiniで画像をobjモデル化

Houdiniでは、画像の明度を元にメッシュを作成する機能があるのでこれを利用していきます。

白黒画像を用意した上、Trace、PolyExtrude、ROP Geometry Outputノードを接続しメッシュを作成します。

f:id:mochida_1007:20201125185931p:plain

objファイル出力の過程でHoudiniのviewとは異なる形状が生成されてしまうのですが

一部、面を作らない設定であれば正しく出力されました。

原因は判明していないのですが、今回の用途では問題ないのでこのまま利用します。

f:id:mochida_1007:20201125185936p:plain

Unityでモデルを取り込み、PointCacheの生成

PointCacheとは、点群データで座標の集合です。

Unityではメッシュを元に、PointCacheを生成でき

VFXGraphでパーティクルの生成座標に利用することが簡単に出来ます。

ja.wikipedia.org

Unityのプロジェクト作成で、HDRPを選択

Unityに先ほどのobjファイルを取り込み、モデルのScale Factorを10に設定

Window > Visual Effects > Utilities > Point Cache Bake Tool から「Save to pCache file」でpcacheファイルを生成できます。

f:id:mochida_1007:20201125190640p:plain

ここでは元々、文字の輪郭をはっきりさせる為に

元メッシュの頂点で、PointCacheが生成される設定をしていました。

しかし、VFXGraphで利用した際に、同じ文字が2回並んでしまい

細かい隙間が潰れて見づらくなる問題がありました。

そのため、meshの段階で厚みのない状態で生成し

Distributionは「Random Uniform Area」を指定してあります。

VFXGraphでのロゴパーティクルの作成

生成( Spawn)

Rateに5000を指定します

初期化(Initialize Particle)

まず初期化部分で、生存期間や生成する座標を決定させます

f:id:mochida_1007:20201124182732p:plain

右クリックCreateBlockから「Set Position from Map」を追加

カーソルを外し右クリック、「Create Node」から、Point Cacheを追加

f:id:mochida_1007:20201124182808p:plain

作成したPointCacheAssetを指定し

ドラック&ドロップで、図のAttributeMapに接続します。

「Set Position from Map」はPointCacheやTextureからのデータの取得が可能になるブロックで これだけで利用が可能です。

あとは生存時間と、スケール設定のため

「Set Lifetime Random(Uniform)」と「Set Scale.XYZ」ブロックを追加、変更します。

Capacityは同時に存在出来る上限で、5000を指定します。

パーティクル形状の設定( Output Particle Quad)

「Output Particle ~~」系がそれにあたり

今回は最も一般的な、板形状の「Output Particle Quad」です。

Blend Modeを加算合成

ColorMappingを「Gradient Mapped」

テクスチャを「Default-Particle」に変更します

ここまでの処理で、冒頭のロゴが表示されます。

f:id:mochida_1007:20201125200342p:plain

流れるパーティクルの作成

f:id:mochida_1007:20201125201908p:plain

ロゴから横に流れるパーティクルの作成をします。

VFXGraph内での、先ほどまでの一連の処理を複製し、更新処理を付け加えます。

更新処理(Update Particle)を選択し

右クリックでCreate Blockから「Add Velocity (Attribute Set)」を追加

DeltaTimeで処理速度に依存しない移動量を「Add Velocity」のx部分に繋ぎます。

これでロゴにそった座標からパーティクルが移動するようになりました。

フェードアウトの調整

2つのエフェクト間でパーティクルの流量を補間して

切り替わっているように演出します。

まずは実際の流量と、流量を遷移させるためのプロパティ作成です。

f:id:mochida_1007:20201125200350p:plain

Create Nodeから「float (Operator Inline」と「int (Operator Inline」を2つづつ作成

全て、右クリックで Convert to Exposed Propertyを指定し

図のように設定していきます。

Exposedすることで、VFX外部からの操作が可能となります。

f:id:mochida_1007:20201125200354p:plain

FadeOutRateプロパティの変動で、流量が0~最大の変化となるように調整します。

Create Nodeで「Multiply」を作成し

図のようにプロパティ、Multiply、ロゴパーティクルのSpawnを接続します。

f:id:mochida_1007:20201125200357p:plain

横に流れるパーティクルでは、先ほどと流量が反転するように

Create Nodeで「One Minus」を作成しMultiplyで接続します。

そして、最終的にパーティクルが完全に消えるようにFadeOut用のプロパティをMultiplyで接続します。

これで、Visual EffectコンポーネントのInspectorからパーティクルを変化出来るようになりました。

VFXGraphは公式のサンプルを参考にしました。

github.com

最後に

ここまでお読み頂きありがとうございます。

VFXGraphはURPでも対応しているので

Compute Shaderさえ使用可能な環境であれば動作するので

対応端末が増えてくれば非常に夢がある機能ですね。

www.tecotec.co.jp