VATを使用しない液体表現 ｰ スタティックメッシュを使った血しぶき

こんにちは。今回は、Static Meshで表現する血しぶきの作り方を紹介します。

↓完成形動画
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="en" dir="ltr">My latest favorite fluid VFX method. I came up on this idea when I wanted 3D flip vfx without VAT.<a href="https://twitter.com/hashtag/VFX?src=hash&amp;ref_src=twsrc%5Etfw">#VFX</a> <a href="https://twitter.com/hashtag/Houdini?src=hash&amp;ref_src=twsrc%5Etfw">#Houdini</a> <a href="https://twitter.com/hashtag/RealTimeVFX?src=hash&amp;ref_src=twsrc%5Etfw">#RealTimeVFX</a> <a href="https://twitter.com/hashtag/UnrelEngine?src=hash&amp;ref_src=twsrc%5Etfw">#UnrelEngine</a> <a href="https://twitter.com/hashtag/UE5?src=hash&amp;ref_src=twsrc%5Etfw">#UE5</a> <a href="https://twitter.com/hashtag/GameDev?src=hash&amp;ref_src=twsrc%5Etfw">#GameDev</a> <a href="https://t.co/Xt4GQPb6M0">pic.twitter.com/Xt4GQPb6M0</a></p>&mdash; kosuke/こすけ (@kmknksm) <a href="https://twitter.com/kmknksm/status/1619826111999004673?ref_src=twsrc%5Etfw">January 29, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 1. Houdiniで通常通りしぶきを作る
どんなアプローチでもいいので、パーティクルでしぶきを作ります。しぶきの作り方は素晴らしいチュートリアルがたくさんあるのでそちらを参考に
（例:https://vimeo.com/266717949）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/0943e239-1c25-4f14-88f7-deb2d20542a7.png)

# 2. メッシュ化し、Vertex Colorを作成する
しぶきがいい感じの形になっているところで、Timeshiftノードを使って止め、Particle Fluid Surfaceノードなどを使いメッシュ化します。その後頂点数、細かいしぶきの数などを調整し最適化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/1519d008-4515-6438-a43d-261a88601e91.png)

ここからはいい感じにディゾルブするための頂点カラーを適用します。

Distanceノードを使用し、しぶきの発生地点をoriginとしたアトリビュートを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/1da11c4b-8c72-1bd8-6a20-e34f53f8764f.png)
distアトリビュートにノイズを少し入れます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/c82da176-def5-8726-9ee3-ec326e9aef0f.png)

このdistアトリビュートを頂点カラーとして使用したいのですが、値はしぶきのサイズによっては1を超えます。そこでこの値をプロシージャルにfit rangeする処理を追加したいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/cf55c89a-232e-4b48-cf6a-8ab86c040594.png)
流れとしては
<em> 最小・最大値をdetailアトリビュートとして格納→pointアトリビュートにpromote→値をfitさせる </em>
みたいな感じです。
なんか回りくどいな～とは思っていますが、今のところこれ以外思いつきません。もっといいやり方ご存じの方がいましたら教えてください･･･

###### 最小・最大値を格納
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/ee8b71a0-cd0d-dcad-c081-eaa6db9fb46f.png)
```
//distアトリビュートをCdに適用
@Cd = @dist;
//fit rangeで参照するため、MinとMaxをDetail Attributeにセット
setdetailattrib(0, "cd_min", @Cd.r, "min");
setdetailattrib(0, "cd_max", @Cd.r, "max");
```
###### 最小・最大値をpointアトリビュートにpromoteする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/b38572b7-aa04-f5b8-8eb8-3e110e088234.png)

###### 頂点カラーの値をfitさせる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/0992e4a4-0395-eed0-ce3d-9cdfd2e93003.png)
```
@Cd.r = fit(@Cd.r,@cd_min,@cd_max,0,1);
@Cd.g = 0;
@Cd.b = 0;
```
これで、発生源から放射状にいい感じにグラデーションがついたstaticメッシュができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/29023868-2d9e-dab5-3871-6695a61fcfc2.png)
エクスポートしてUE5に読み込みます。

# 3. Vertex Colorを透明度に乗算したマテリアルを適用、Niagaraで発生させる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/b996a8b6-5269-fb58-6e6c-d23ef691bef3.png)
Vertex ColorとParticle Color､Dynamic Material Parameterなどと乗算し、Opacity Maskに適用したマテリアルを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/b1fd7811-df03-24bf-1112-6ead4b77f3f8.png)
*マテリアルのBlend ModeはMaskedです。

作成したメッシュ、マテリアルを使用したNiagara Systemで、いい感じにOpacityを調整します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/ecbfd987-a8d1-e53b-e4fe-6bcac31a0527.png)
これで、アルファチャンネルでいい感じに消える血しぶきの完成です。VATを使用していないながらなかなか立体的な表現ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/d65e4528-84d1-287c-cfb1-ce9e4d0aec93.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/d2720a33-f9f0-0f86-36b3-16e93bc85d41.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/9bd0269b-f27d-f4ec-afca-9719b2e67aa1.png)