電通総研 テックブログ

電通総研が運営する技術ブログ

VAT(Vertex Animation Texture)でトゥーン調スプラッシュエフェクトを実装する

こんにちは!金融ソリューション事業部の山下です。
本記事ではHoudiniで作成したトゥーン調エフェクトを、VAT(Vertex Animation Texture)という手法を用いてUnreal Engineで利用する方法を紹介します。

Houdiniはプロシージャルにノードベースで3DCG制作が可能なDCCツールです。特にシミュレーションの機能が充実しており、特に映画/ゲーム業界等のVFX領域で活用されております。

VAT(Vertex Animation Texture)とは

VATとは文字通り、メッシュの各頂点(Vertex)に対応するアニメーション情報を、テクスチャ画像としてマッピングしたデータを用いてゲームエンジンなどで利用する手法です。

以下画像のように、横軸に頂点情報、縦軸を時系列(フレーム)情報としてマッピングしています。これを用いて、アニメーションに必要な位置情報や回転情報を伝えることができます。

VATを用いるメリットは、クオリティとパフォーマンスです。
今回のようにHoudiniで作成したアニメーションを、Unreal EngineやUnityなどで比較的低いパフォーマンス負荷で利用可能になります。その為、VATは主にゲーム業界などで活用されています。
こちらのような素晴らしい作例もあるので、ぜひご覧いただけると幸いです。
VATの詳細についてはこちらのSidefx公式チュートリアルが詳しいので、ご興味ある方はご覧ください。

実施環境/ツール

実施手順

  1. Houdiniで元となるジオメトリを作成
  2. FLIP Solverでシミュレーションを実施
  3. シミュレーション結果をメッシュに加工してVATとしてExport
  4. Unreal EngineでVATを読み込み
  5. Niagara Systemでエフェクトを作成
  6. BluePrintでエフェクト発生ロジックを組み込み

1. Houdiniでベースとなるジオメトリを作成

シミュレーションを適用する為のソースを作成します。 ネットワークの全体像は以下のとおりです。主要な処理に絞って解説します。

最初にSphereを作成します。 後続工程でノイズをかける為、Primitive Typeを「Polygon」、Frequencyを6に設定します。

Mountain(Attribute Noise)ノードでノイズを適用します。 好みの形になるようにNoise ValueやNoise Patternを調整します。

Nullノードとして「SOURCE」と命名します。 ここまでのジオメトリデータを用いて、シミュレーションのソースとして扱います。

法線ベクトルを用いて、シミュレーションの初期速度値を定義していきます。 Normalノードで法線ベクトルを作成します。 Add Normals toは「Points」に設定します。

fluidsourceノードで、法線ベクトルからVolumeを作成します。

法線ベクトルデータをvelとして変換する為に、Velocity VolumesタブのSource Attributreを「N」と入力します。 速度が追加されました。 Node Infoを見ると、Voxelデータが確認できます。 Voxel数は9,660、Sizeは0.1。density以外に、速度データとしてvelが追加されていることを確認できます。

「VEL」という名称でNullノードを作成して、ソースジオメトリの作成は完了です。

2. FLIP Solverでシミュレーションを実施

1.で作成したVELノードを選択した状態で、Particle Fluidsタブの「FLIP Fluid from Object」を選択し、Enterを押下します。

AutoDopNetworkが作成されます。

DOPネットワーク内で、以下のシンプルなネットワークを作成します。

FLIP Objectノードで、ソースとなるParticleの情報を設定します。

Particleを細かくする為に、Particle Separationを0.05に設定します。 Initial DataタブのSOP Pathに、1.で生成したSOURCEを設定します。

Source Volumeノードを設定します。

Volume Pathに、1.で作成したVELノードのパスを設定します。 Volume OperationのVelocityプルダウン項目に「Add」を設定します。 SOP To DOP BindingsタブのVelocity Volumeに「vel」を設定します。

FLIP Solverノードに対して、FLIP ObjectノードとSource Volumeノードを接続します。こちらはデフォルトのままで構いません。

デフォルトで配置されているGravityノードなどは削除します。 以下のシミュレーションが完成しました。

3. シミュレーション結果をメッシュに加工してVATとしてExport

新たにGeometoryを作成して、以下のネットワークを構築します。名称はPrepare_Meshとします。

最初にDOP Import FieldsノードでDOPのシミュレーション結果をimportします。

Particle Fluid SurfaceノードでParticleからメッシュを作成します。

メッシュを自然に消滅させる為に、FilteringタブのErodeにキーフレームを打ちます。 今回は25フレームを2、50フレームで4に設定することで、自然な消滅を表現します。 33フレーム時点: 40フレーム時点: 50フレーム時点:

初期のアニメーションは不要なので、Time Shiftノードを使用します。 Frameに「$F+10」とすることで初期10フレームを省略します。

ConvertノードでMeshからPolygonに変換します。

PolyReduceノードでPolygon数を削減します。 Number To Keepに2500を指定します。 Polygon数は58955から2599、15.55%に削減されました。

Attribute Blurノードで各ポリゴンの位置を滑らかにします。 ポリゴン数の削減によるクオリティ低下を補う効果があります。 Blur前: Blur後:

Normalノードで、Pointsに対して法線ベクトルを追加します。レンダリング時により滑らかな表面になります。

Labs Delete Small Partsノードで、微細なポリゴンを削除します。

UV UnwrapノードでUVを設定します。

Nullノードに「VAT_OUT」と命名して、Houdiniのジオメトリは完成です。

最後にoutコンテキストに移動して、Labs Vertex Animation Texturesノードを作成します。

Modeを「Dynamic Remeshing(Fluid)」、Target Engineを「Unreal Engine」に設定します。 Input Geometryに先ほど作成した「VAT_OUT」を設定します。

RenderPassを「First Pass(Geometry, Lookup Table, Data/Material)」と「Second Pass(Animation Textures)」それぞれに設定して、「Render All」ボタン押下でマテリアルを生成します。 「data」「geo」「tex」フォルダにアウトプットが格納されていたらVATの生成は完了です。

4. Unreal EngineでVATを読み込み

今回は、Unreal EngineのFirst Personテンプレートを用います。 3.にてHoudiniで作成したLabs Vertex Animation Texturesノードの以下リンクから取得したPluginフォルダを、UEプロジェクトフォルダに「Plugin」フォルダを作成した上でコピー&ペーストします。 UEプロジェクトを再起動して、正しくPluginが読み込まれていることを確認します。

3.で生成したファイルをUnreal EngineのContent Drawerにimportします。

HDR(.exr)のデータを選択して、Scripted Asset ActionsからSide FX Set VAT HDR Texturesを実行します。

同様にNon-HDR(.jpg)のデータに対してide FX Set VAT Non HDR Texturesを実行します。

新規マテリアルを作成します。 ResultノードのNum Customized UVsに4を入力します。 任意のColorとMF_VAT_DynamicRemeshingノードを作成して、Resultノードに接続します。

上記マテリアルから、マテリアルインスタンスを生成します。 画像の通り、Houdini VATタブで、FPS、importしたテクスチャそれぞれ適用します。 また、importしたDataTableの値を参考に、Houdini VAT - InstancingタブでBound値を設定します。 設定元: 設定先:

これでVATによるマテリアルは完成しました。

5. Niagara Systemでエフェクトを作成

新規Niagara Effectを作成します。 今回はSimple Sprite Burstをベースにエフェクトを作成します。

Renderタブでデフォルトで入っているSprite Renderereを削除して、Mesh Rendererを追加します。 Meshesにimportしたfbx、Materialに4.で作成したマテリアルインスタンスを設定します。

Particle Spawnタブで、Lifetimeを1にします。

作成したNiagara SystemをSceneViewにドラッグ&ドロップして、エフェクトが再生されたらエフェクトは完了です。

6. BluePrintでエフェクト発生ロジックを組み込み

本記事ではVAT解説記事にフォーカスするためBPの詳細説明は割愛します。 FirstPersonプロジェクトでは、クリック押下で銃弾(Projectile)を発射するBluePrintが組み込まれているので、こちらの既存BPに対してエフェクトを追加します。

作成したネットワークはこちらです。 ProjectileのEvent Hit後、Projectileの位置に対してエフェクトを発生させています。 また、そのままだとProjectileが跳ね返ってしまうのでStop Movement Immediatelyノードで動きを止めつつ、Destroy Actorノードで削除しています。

また、Projectileが当たった壁に対して水しぶきを表現する為に、Destroy Actorの後に以下BPも追加しています。

別途Houdiniでシミュレーションして作成した以下マテリアル画像を用いて、Decalを発生させています。Houdiniからの画像Exportには、Labs Maps Bakerノードを用いました。 シミュレーション結果: ExportしたNormal: ExportしたOpacity:

完成イメージ

以下、Unreal Engineでの動作イメージです。

所感

今回はVAT(Vertex Animation Texture)という手法を用いて、HoudiniのシミュレーションをUnreal Engineに導入しました。 この手法は流体だけでなく、剛体の破壊シミュレーションや布などのソフトボディ、煙や爆発などあらゆるアニメーションに使用できます。また、UnrealEngineだけでなくUnityなど他のツールにも使用できる点も利便性が高いです。

Houdiniは非常に強力かつ精緻なシミュレーションが可能になる為、VATを利用することでゲームエンジンなどに組み込まれたツールよりも表現の幅の広がりが期待できます。

現在ISIDはweb3領域のグループ横断組織を立ち上げ、Web3およびメタバース領域のR&Dを行っております(カテゴリー「3DCG」の記事はこちら)。 もし本領域にご興味のある方や、一緒にチャレンジしていきたい方は、ぜひお気軽にご連絡ください!
私たちと同じチームで働いてくれる仲間を、是非お待ちしております!
ISID採用ページ(Web3/メタバース/AI)

参考

執筆:@yamashita.yuki、レビュー:@wakamoto.ryosukeShodoで執筆されました