ゲームエフェクトによく使うメッシュの作り方と便利なノード

こんにちは。今回はこの、スラッシュエフェクトなどによく使われるメッシュをHoudiniで制作します。またその過程で、ゲームエフェクト制作に役立つ基本的なノードやVEXを紹介します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/537f4675-c286-b5df-d191-06c2c4cc328c.png)

最終的なノードはこのような構成です。いたってシンプルです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/d4e2e844-63de-0cd5-f615-8a0ca6cbb843.png)

# 目次
[1. Sweepのためのパーツを作成する](#-1.-Sweepのためのパーツを作成する)
[1.1. Resample](##-1.1.-Resample)
[1.2. Sweep](##-1.2-Sweep)
[2. マテリアルで使用するVertex-Colorを設定する](#2.-マテリアルで使用するVertex-Colorを設定する)
[2.1. Arrtibute Wrangle](##-Arrtibute-Wrangle)

# 1. Sweepのためのパーツを作成する
基本的な形状はSweepで制作するので、そのためのバックボーンとクロスセクションをCircleで作成します。
バックボーン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/9c9b7e9a-3884-90f2-9447-8fa5f3121be4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/13da64af-f13b-16b6-3c6b-1fd4bde659c7.png)

クロスセクション
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/86f84852-a213-9e1c-5257-4f7ac0836d4f.png)
クロスセクションはTransformで少しつぶしておきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/9492bfef-88e9-3f25-4260-3631bcbe92ff.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/4751e69c-cad2-7dab-2752-d907a7b627ec.png)

## 1.1. Resample
Resampleノードは、任意のジオメトリの分割数を変えるのに便利なノードです。ゲーム開発ではポリゴン数をうまく制御する必要があるので、見栄えや用途によってカーブの分割数を調整します。
これをバックボーン、クロスセクション双方に適用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/f6280afe-e0d0-0341-f7de-e4a8686704ad.png)

## 1.2 Sweep
Sweepノードは見ての通り、二つのカーブに基づいてメッシュを制作するノードです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/7c92c85c-7021-c45b-c974-d7d33fe83ea6.png)
このノードの便利なところは、UVも生成してくれるところかなと。このように四角くフィットしたUVを一発で生成してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/ee2e215e-0075-0494-51dd-b5612011c68e.png)

# 2. マテリアルで使用するVertex Colorを設定する
ゲームエンジン内のマテリアルで透明度に乗算するためのVertex Colorを制作します。

## Arrtibute Wrangle
Attribute Wrangleは、Houdini内の言語、VEX codeを書くためのノードです。
まず、バックボーンのカーブにAttribute Wrangleを追加し、以下のコードを書きます
```
//ポイント番号を0-1の範囲にフィットさせたものを@rowとする
@row = fit(@ptnum,0,@numpt-1,0,1);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/5da90b5b-46d3-261c-f0ad-e76ed4f364be.png)

次に、クロスセクションのカーブに以下のようにコードを書きます
```
//ポイント番号を0-1の範囲にフィットさせたものを@colとする
@col = fit(@ptnum,0,@numpt-1,0,1);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/58630dad-5793-f67b-1b77-b37d59b33926.png)

上記二つのVEXは、バックボーン、クロスセクションそれぞれの端から端までのポイントに0-1の値を振り分けるためのものです。ジオメトリスプレッドシートを見ると、colとrowの二つのアトリビュートが追加されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/c7771cd9-a46a-8d37-b8f3-7664d8351b34.png)
そして、Sweepの後にさらにAttribute Wrangleを追加し、以下のVEXを書きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/40b1c1bc-e5ff-a4a4-377e-66bacad84c38.png)
```
//U方向のグラデーションを設定
float red_col = chramp("red_col",@col,0);
//V方向のグラデーションを設定
float red_row = chramp("red_row",@row,0);
@Cd.r = red_col*red_row;
@Cd.g = 0;
@Cd.b = 0;
```
コードを確定したあと、この右上のマークをクリックするとグラフが出てきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/126f7924-779b-e74f-a688-b2fa4f009b6d.png)
グラフをいい感じに調整してグラデーションを作ります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/0ab2a202-9192-0418-b89d-c81697ed1e70.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/7364fb61-0e15-8f8b-386e-fc78f36a4d1c.png)
その後、Normalを追加し不要なアトリビュートを削除し、FBX outputで出力します
(ここまで書いて、Apprenticeバージョンはアウトプットができないことを思い出しました・・・すみません）

このメッシュに、ゲームエンジン内でVertex Colorを透明度に乗算するマテリアルを適用すると、テクスチャをマスクアウトしなくてもフチが出ないメッシュができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/4712338c-8414-aaf6-7a44-2c043148b412.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/46984043-af84-fe36-d97d-0a5fef9ea250.png)

このワークフローを覚えていれば、いろいろな形状のメッシュをプロシージャルに制作できます。必要な機能をHDA化するのもいいですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488949/751fbbcf-ba2a-8c14-5b59-7d3634de2613.png)