16
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Unity】Shader GraphでVertex Animation Textureを使う

Posted at

#こんにちは
簡単に自己紹介します。株式会社たき工房 でプログラマーをしていて、インタラクティブなインスタレーションを作っています。個人ではTouchDesignerで映像制作やVJをしたり、HoudiniでCG制作をしています。

HoudiniでシミュレーションしたものをARで動かしたいなと思い、色々調べていくとShader GraphでVertex Animation Textureが使えるようになったのでまとめます!

以前書いたTouchDesignerでVATを使う記事 でVATについて軽く説明しているので、よければ読んでみてください!

#作ったもの

こんな感じで、水のシミュレーション数種類をARで表示できました!

#環境
Unity 2019.4.1f1
Universal RP 7.3.1
SideFX Vertex Animation Texture 2.1.0

Houdini Indie 18.532
SideFX Labs 532-embedded

MacOS 10.14.6
もしくはWindows10

用途がモバイルだったのでURPを使いましたが、HDRPでも同じです。
URPで説明を続けます。

#前置き

HDRPやURPでVATをどうやったら使えるかを検索すると、Keijiro TakahashiさんのUnity道場の動画が一番に出てくると思います。
Shader Graphを使ってVATを読み込む方法です。

上の動画が公開されてから、HoudiniのVATを書き出すROPにアップデートがありました。Vertex Animation Textures ROP 2.1です。
そしてこのアップデートにはなんと、VAT用に組まれたShader Graphが含まれています!!
https://www.sidefx.com/forum/topic/74083/

使い方の解説動画もめちゃわかりやすいです。
Vertex Animation Textures v2.1 Unity Quickstart

今回は新しいVAT ROP2.1を使いました。

#手順

####1. Houdiniですること
1.1 SideFX Labsのインストール
1.2 VATしたいもの作る
1.3 VATの書き出し

####2. Unityですること
2.1 Universal Project Templateから新規作成
2.2 VAT用のShader Graphが入っているUnityPackageをインポート
2.3 VATのインポートと設定

#1. Houdiniですること
##1.1 SideFX Labsのインストール
シェルフツールから、SideFX Labsを追加します。
コメント 2020-08-30 010029.png

Update Toolsetを押して、Houdiniを再起動するとVATのアイコンなどが現れます。
コメント 2020-08-30 152852.png

##1.2 VATしたいもの作る
自由に作ってください。
Keijiroさんのサンプルに、Houdiniのファイルが入っているので参考になりました。

##1.3 VATの書き出し
タブキーを押してVATと入力するとVAT ROP2.1ノードが出ます。
シェルフからノードを作るとなぜかVAT ROPの2.0が生成されるので、タブキーから生成してください!

まずEngineをUnityに変更してInitializeします。
StartとEndのフレームを入力すると、フレームレンジと再生速度が自動で計算されます。
Pack normalsのチェックは外して、Positionとは別のテクスチャとして書き出したほうが見た目がきれいでした。チェックを外した場合、下のNormalにチェックを入れます。

VATの種類がFluidの場合、真ん中あたりのTarget Texture SizeとTarget Prim Countの数値を揃えていたほうがポリゴンが壊れにくいそうです(Keijiro先生談)

iOS の画像 (1).jpg

ポリゴン数が大きいとARでうまく表示できませんでした。これはポリゴン数2048です。
コメント 2020-08-30 160208.png

1024だとうまく表示できたので、PolyReduceで揃えておいたほうがいいです。
コメント 2020-08-30 153503.png

設定した後Renderを押すと、VATが含まれるフォルダが生成されます。

#2. Unityですること
##2.1 Universal Project Templateから新規作成
通常の3Dから新規作成しても構いませんが、URPが予めインポートされていて楽なのでこうします。

##2.2 VAT用のShader Graphが入っているUnityPackageをインポート
1.3の画像で、一番上のUser InterfaceをNormalに変更すると下の方にSample Shader Codeというタブが現れます。
このUnity Package Pathの場所にあるpackage.jsonを、UnityのPackage ManagerのAdd package from diskからインポートします。
コメント 2020-08-31 212005.png

コメント 2020-08-31 212223.png

インポートが完了すると、SideFX Vertex Animation Textures/Shadersフォルダの中にあらかじめ組まれたShader GraphとVATを読み込むためのHLSLファイルが入っています。

このHLSLを読み込むCustom Nodeを使って、Shader GraphでVATを扱えるようにしているという感じです。

##2.3 VATのインポートと設定
Houdiniから書き出したexportファイルをプロジェクトにインポートします。
必要なのは
materials/~.json
materials/~.mat
meshes/~.fbx
textures/~norm.exr
textures/~pos.exr
です。

materials/~.matにはインポートされた時点でSideFXの用意したShader Graphが割り当てられていて、数値も埋まっているはずです。
コメント 2020-08-31 222301.png

もし埋まっていなければこれらの情報はmaterials/~.jsonに書いてあります。

テクスチャは圧縮がかからないように設定します。
ARで使う場合はFormatをRGBA Halfにすると調子が良かったです。
iOS の画像 (2).jpg

以上でVATが無事Unityに持ち込めます。

#アレンジ
Keijiro先生のサンプルだと、個々のオブジェクトにTimelineを持たせることでそれぞれの再生のタイミングを独立させられましたが、SideFXが配布しているShader Graphだと_Time関数を使っているのでタイミングをずらして生成しても全部同じタイミングでアニメーションしてしまいました。

なのでこのように、TimeにOffsetをAddすることアニメーションをずらして違和感をなくしました。iOS の画像 (4).jpg

##おまけ
VATとは全然関係ないですが、テロップ芸がすごいのでぜひ見てみてください!
https://youtu.be/Wq4Sf6GHQ6Y

16
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?