本投稿は TECOTEC Advent Calendar 2020 の5日目の記事です。
コンテンツ開発事業部のUnityクライアントエンジニア持田です。
本記事では、弊社のロゴを点群データ化して消えて行くような演出を
VFXGraphの勉強も兼ねサンプルを作成して行きます。
目次
- 使用ソフト
- 演出の全体像
- Houdiniで画像をobjモデル化
- Unityでモデルを取り込み、PointCacheの生成
- VFXGraphでのロゴパーティクルの作成
- 流れるパーティクルの作成
- フェードアウトの調整
- 最後に
使用ソフト
- Unity2020
- Houdini
演出の全体像
ロゴを表示するパーティクルが表示される
横に流れるパーティクルが増えると共に、ロゴのパーティクルは徐々に少なくなる
横に流れるパーティクルが少なくなり完全に消失する
演出は以上の展開となるよう作成しました。
まずは、ロゴを表示する部分で必要なメッシュを作成していきます。
Houdiniで画像をobjモデル化
Houdiniでは、画像の明度を元にメッシュを作成する機能があるのでこれを利用していきます。
白黒画像を用意した上、Trace、PolyExtrude、ROP Geometry Outputノードを接続しメッシュを作成します。
objファイル出力の過程でHoudiniのviewとは異なる形状が生成されてしまうのですが
一部、面を作らない設定であれば正しく出力されました。
原因は判明していないのですが、今回の用途では問題ないのでこのまま利用します。
Unityでモデルを取り込み、PointCacheの生成
PointCacheとは、点群データで座標の集合です。
Unityではメッシュを元に、PointCacheを生成でき
VFXGraphでパーティクルの生成座標に利用することが簡単に出来ます。
Unityのプロジェクト作成で、HDRPを選択
Unityに先ほどのobjファイルを取り込み、モデルのScale Factorを10に設定
Window > Visual Effects > Utilities > Point Cache Bake Tool から「Save to pCache file」でpcacheファイルを生成できます。
ここでは元々、文字の輪郭をはっきりさせる為に
元メッシュの頂点で、PointCacheが生成される設定をしていました。
しかし、VFXGraphで利用した際に、同じ文字が2回並んでしまい
細かい隙間が潰れて見づらくなる問題がありました。
そのため、meshの段階で厚みのない状態で生成し
Distributionは「Random Uniform Area」を指定してあります。
VFXGraphでのロゴパーティクルの作成
生成( Spawn)
Rateに5000を指定します
初期化(Initialize Particle)
まず初期化部分で、生存期間や生成する座標を決定させます
右クリックCreateBlockから「Set Position from Map」を追加
カーソルを外し右クリック、「Create Node」から、Point Cacheを追加
作成した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」に変更します
ここまでの処理で、冒頭のロゴが表示されます。
流れるパーティクルの作成
ロゴから横に流れるパーティクルの作成をします。
VFXGraph内での、先ほどまでの一連の処理を複製し、更新処理を付け加えます。
更新処理(Update Particle)を選択し
右クリックでCreate Blockから「Add Velocity (Attribute Set)」を追加
DeltaTimeで処理速度に依存しない移動量を「Add Velocity」のx部分に繋ぎます。
これでロゴにそった座標からパーティクルが移動するようになりました。
フェードアウトの調整
2つのエフェクト間でパーティクルの流量を補間して
切り替わっているように演出します。
まずは実際の流量と、流量を遷移させるためのプロパティ作成です。
Create Nodeから「float (Operator Inline」と「int (Operator Inline」を2つづつ作成
全て、右クリックで Convert to Exposed Propertyを指定し
図のように設定していきます。
Exposedすることで、VFX外部からの操作が可能となります。
FadeOutRateプロパティの変動で、流量が0~最大の変化となるように調整します。
Create Nodeで「Multiply」を作成し
図のようにプロパティ、Multiply、ロゴパーティクルのSpawnを接続します。
横に流れるパーティクルでは、先ほどと流量が反転するように
Create Nodeで「One Minus」を作成しMultiplyで接続します。
そして、最終的にパーティクルが完全に消えるようにFadeOut用のプロパティをMultiplyで接続します。
これで、Visual EffectコンポーネントのInspectorからパーティクルを変化出来るようになりました。
VFXGraphは公式のサンプルを参考にしました。
最後に
ここまでお読み頂きありがとうございます。
VFXGraphはURPでも対応しているので
Compute Shaderさえ使用可能な環境であれば動作するので
対応端末が増えてくれば非常に夢がある機能ですね。
