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

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

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

以前書いた[TouchDesignerでVATを使う記事](https://qiita.com/komakinex/items/b97c12b9554e4b492f81) でVATについて軽く説明しているので、よければ読んでみてください！


#作ったもの
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">HoudiniのシミュレーションをVATで書き出して、タップしたとこに生成するAR！<br>VATの再生時間ずらし、色大きさ高さランダム、環境マップ、影、床のオクルージョンとか全部詰め込められた！<br>Shader GraphとURPがだいぶわかった！<a href="https://twitter.com/hashtag/madewithunity?src=hash&amp;ref_src=twsrc%5Etfw">#madewithunity</a> <a href="https://twitter.com/hashtag/ARFoundation?src=hash&amp;ref_src=twsrc%5Etfw">#ARFoundation</a> <a href="https://t.co/Zk5dLrcMf6">pic.twitter.com/Zk5dLrcMf6</a></p>&mdash; komakinex (@komakinex) <a href="https://twitter.com/komakinex/status/1299315769168150529?ref_src=twsrc%5Etfw">August 28, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こんな感じで、水のシミュレーション数種類を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を読み込む方法です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">VATは頂点アニメーションをテクスチャにベイクする機能であり、クロスや流体などのようにボーンでは扱うことの難しい表現を簡単に再現できるのが大きな特徴です。本講演ではShaderGraphを使ってVATを扱う方法を解説します。<a href="https://twitter.com/hashtag/unity%E9%81%93%E5%A0%B4?src=hash&amp;ref_src=twsrc%5Etfw">#unity道場</a> <a href="https://twitter.com/hashtag/unitylm?src=hash&amp;ref_src=twsrc%5Etfw">#unitylm</a> <a href="https://t.co/uDZ10F8Wm0">https://t.co/uDZ10F8Wm0</a> <a href="https://t.co/OimlTKLxkV">https://t.co/OimlTKLxkV</a></p>&mdash; ユニティ・テクノロジーズ・ジャパン (@unity_japan) <a href="https://twitter.com/unity_japan/status/1230698803574915074?ref_src=twsrc%5Etfw">February 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上の動画が公開されてから、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](https://vimeo.com/427443045/6b6f9f63f4)

今回は新しい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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144702/348be3b4-cd13-cd54-6172-cb284aaa0013.png)

Update Toolsetを押して、Houdiniを再起動するとVATのアイコンなどが現れます。
![コメント 2020-08-30 152852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144702/6caffef7-9c31-2aeb-b25e-1afbe60fea3f.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144702/e03f7b75-dcb4-0de3-8d98-7bd022d2fedb.jpeg)


ポリゴン数が大きいとARでうまく表示できませんでした。これはポリゴン数2048です。
![コメント 2020-08-30 160208.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144702/717843f1-9aa9-3cd7-4116-c0f4a8ed77fc.png)

1024だとうまく表示できたので、PolyReduceで揃えておいたほうがいいです。
![コメント 2020-08-30 153503.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144702/e21da765-ce65-a0c1-cb99-08460a9c308b.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144702/cee9f114-6650-79d4-d82f-2925ce814780.png)

![コメント 2020-08-31 212223.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144702/5dbc84af-dd51-f385-75a9-0c7c779ba55b.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144702/677a72f4-daed-119e-851d-d42611aa56bf.png)

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

テクスチャは圧縮がかからないように設定します。
ARで使う場合はFormatをRGBA Halfにすると調子が良かったです。
![iOS の画像 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144702/70773a7f-fddf-724d-66fd-dc094835c659.jpeg)

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


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

なのでこのように、TimeにOffsetをAddすることアニメーションをずらして違和感をなくしました。![iOS の画像 (4).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144702/a3358b2d-6877-a35e-fd70-1fe124a26cd6.jpeg)


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