[Traverse Skeletal Mesh]スケルタルメッシュ上で移動するパーティクル

## メッシュ上でパーティクルを這わせるサンプルは数あれど

そのほとんどがDistanceFieldを用いてメッシュ上を這わせる物で、StaticMesh向けの物です。(Distance Field Traversalなど)

## スケルタルメッシュメッシュでも同等の表現ができます！

![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/8a4a55db-475a-4c33-a45e-5f8bf21ae284.gif)

特に自前で何か用意する事無く標準の機能だけで実現する事が出来ます。
しかもノーコードです。

## 今回使う機能
### Traverse Skeletal Mesh
意外と認知度低いモジュールの名前はその名もTraverse Skeletal Meshです。
今回はその使い方を紹介します。

## おなじみのテンプレートFountainを改造して実装してみる。

それではおなじみFountainをカスタマイズして実装していきましょう

### 新規NiagaraSystemの作成
まずは新規データの作成からです。
ここでテンプレートを用いて作られたシステムに対して改変を加えていきます。


コンテンツブラウザ上で新規NiagaraSystemを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/afd383e0-f66e-417e-ba75-1d6ac9ad3176.png)

テンプレートからFountainを選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/9d7f57ff-6a14-48dc-9b40-7f9a6646cc35.png)

出来上がった物を開くと噴水のようにパーティクルが噴き出ています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/c2257f9c-b94b-4b69-a40a-8fbe70a8172c.png)

### 事前のパラメータ準備
#### GPUで動くようにする
ついでにバウンディングをFixedにしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/0392c4ed-8202-4206-8fc0-d51f1c053011.png)
#### 不要なモジュール削除
初速や初期位置の為の位置設定は不要なので削除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/0a5f21df-41fe-4ed7-b20a-5330b51084a2.png)

#### ユーザーパラメーターの追加
ユーザーパラメーターとしてSkeletalMeshを追加し、適当なメッシュをアサインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/e8e02a28-19fb-4c61-9dfd-740397fcea82.png)

#### スケルタルメッシュの表面位置から出す
SkeletalMeshLocationを追加して、作成したユーザーパラメーターをアサインします。
サンプリングはトライアングル単位にします。
必須な機能はポリゴン上の位置と、TriCoordなので、この2つが出力できれば自前のモジュールスクリプトでも構いません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/49666842-12ab-49fc-8438-866dfca35dbd.png)

#### ステージ追加
Updateの下にステージを追加します。後ほど使います
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/f866d7fe-208b-4d9d-a306-236949f8ba0e.png)

ここまでが下準備です。

### Traverse Skeletal Meshのセットアップ
いよいよTraverse Skeletal Meshの設定をしていきます。

#### InitializeTraverse Skeletal Meshを追加
TriCoodinateにSkeletalMeshLocationの出力したTriCoordを指定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/f5b816ad-f81f-42de-ab80-3fdc7dfe4078.png)
#### Updateの一番下にPrepareTraverse Skeletal Meshを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/450fa426-32b0-4da4-b3e7-d1b6f5b1280c.png)
#### Prepareの下に Traverse Skeletal Mesh本体を追加
スケルタルメッシュパラメータにユーザーパラメータをアサインしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/1ce4c42a-b668-4d92-95e3-c387714d0877.png)

#### 追加されたシミュレーションステージにApplyTraverse Skeletal Meshを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/f26b6f77-fd78-478e-a930-f08e08faa243.png)

### 一旦完成
スケルタルメッシュの表面上に沿ってパーティクルが動くようになりました。
![result1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/248d896c-f9bc-45ba-9b9a-6c82e3058984.gif)

## ブラッシュアップ

### 埋まってしまうことに対する対応
パーティクルの中心がメッシュ表面上を動くので、単純実装しただけだと刺さった見た目になってしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/05aea4d3-d41d-4115-b5f8-a4fe2c718d6c.png)

### カメラオフセット
Traverse Skeletal Meshの後にカメラオフセットモジュールを追加し、5cmほどカメラ方向に押し出します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/a664ce5a-1bb1-43e2-891c-8d5000c91aa9.png)

### 今度こそ完成
埋まってるような見た目は回避する事が出来ました。
![output2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502600/8a4a55db-475a-4c33-a45e-5f8bf21ae284.gif)

## まとめ
強力で、標準の機能にもかかわらず、資料が少ない機能であるTraverse Skeletal Meshについて紹介しました。
実戦投入するにはTSRやブラー対応を工夫する必要があるかもしれません。
今回は基本的な使い方でしたが、マテリアルやモジュールの組み合わせで大きく可能性が広がるので是非色々試してみてください。

## 参考
https://forums.unrealengine.com/t/niagara-traverse-skeletal-mesh/1176875