Unityエフェクトレシピ 02 - 六角形シールド表現 (1/2)

はじめに

六角形シールド表現を作ってみました。

本記事では、このエフェクトの作り方を紹介したいと思います。

www.youtube.com

記事が長くなりそうなので、今回は3Dモデルの作り方のみ紹介します。

シェーダーの作り方は改めて別の記事で紹介しようと思います。

今回のエフェクトやhiplcはGitHubにて公開中です。

github.com

後編はこちら

Unityエフェクトレシピ02 - 六角形シールド表現 (2/2) - rn.log

環境

Windows 10

Unity 2020.1.0b2

Houdini 18.0.460 (Indie)

第1章. 3Dモデルの作成

Houdiniを利用して、五角形や六角形を球面上にしき詰めた3Dモデルを作成します。

f:id:r-ngtm:20200609104721p:plain

モデル頂点には以下のデータを持たせています。

アトリビュート	説明
uv	テクスチャ座標(モデル全体)
uv2	面それぞれに対して展開したテクスチャ座標
頂点カラー(Rチャンネル)	メッシュの中心から外側へ向かう、0~1のグラデーション
頂点カラー(Gチャンネル)	五角形・六角形の番号(0, 1, 2, ・・・, N)をNで割り、0~1の範囲に収まるようにしたもの

※ 作成したモデルデータを最終的にFBXファイルとして出力しているため、Houdini Indieライセンス以上が必要になります。

3Dモデルの作り方解説

STEP 1 : Sphere

Sphereノードを作成し、Primitive Type = Polygonに設定します。

f:id:r-ngtm:20200609110504p:plain

STEP 2 : Divide

Divideノードを接続し、Compute Dualのチェックを入れます。

六角形と五角形を敷き詰めたような形状になります。

f:id:r-ngtm:20200609110701p:plain

STEP 3 : Subnetwork

Subnetworkの実行結果は以下のようになっています。

f:id:r-ngtm:20200609110925p:plain

Subnetworkの中身はこのようになっています。順番に解説していきます。

f:id:r-ngtm:20200609111007p:plain

STEP 4 : Color

Colorノードを利用し、頂点カラーを{0, 0, 0}に設定します。

f:id:r-ngtm:20200609111128p:plain

STEP 5 : AttributeWrangle

プリミティブ番号(@primnum)が0 ~ 1の範囲に収まるように @numprim - 1 で割り、

結果の値は @id アトリビュートとして保存しておきます。

f:id:r-ngtm:20200609111408p:plain

f@id = (float)@primnum / (@numprim - 1);

※@primnumはint型なので、float型にキャストしてから割っています。

※@idの代わりにf@idと書くことで、@idはfloat型であることを明示することができます。

STEP 6 : For-Each Primitive

For-Each Primitiveでは各メッシュにグラデーションをつけています。

f:id:r-ngtm:20200609111921p:plain

さらに細かく見ていきます。

For-Eachループの開始部分を見ると、六角形(or 五角形)になっています。

f:id:r-ngtm:20200609112338p:plain

STEP 6.1 : PolyExtrude

Poly ExtrudeノードのInsetを利用して、多角形を内側へ押し出します。

また、Front Groupのチェックを入れます。

これにより、押し出したプリミティブに対してextrudeFrontというグループが割り当てられます。 f:id:r-ngtm:20200609112635p:plain

STEP 6.2 : Group Promote

押し出したポイントを一つにまとめる、という操作を下流で行いたいので、

extrudeFrontグループをPrimitiveからPointへ変換します。

f:id:r-ngtm:20200609112846p:plain

STEP 6.3 : Fuse

Fuseノードでポイントを一つにまとめます。

グループにextrudeFrontを設定することで、先ほど押し出したポイントのみをまとめることができます。

f:id:r-ngtm:20200609113652p:plain

STEP 6.4

ColorノードでグループextrudeFrontに対して赤色(1, 0, 0)を割り当てます。

内側から外側へ向かうグラデーションを作ることができました。

f:id:r-ngtm:20200609113913p:plain

ForEach Endノードを見ると、すべての多角形にグラデーションが適用されていることが確認できます。

f:id:r-ngtm:20200609114724p:plain

STEP 7 : UV Texture

下流のUV Textureでは、モデル全体にuvを割り当てています。

ちなみに、UV Quick Shadeを使うとUVをプレビュー表示することができます。

f:id:r-ngtm:20200609115026p:plain

STEP 8 : Attribute Wrangle

f:id:r-ngtm:20200609115250p:plain

v@Cd.g = prim(geoself(), "id", @primnum);

※ここでは、primitiveコンポーネントとして保存されている@idアトリビュート(0~1の値)をとってきて、@Cdアトリビュートのgチャンネルへ代入しています。

※v@Cdと書くことで、@Cdアトリビュートはvector型であることを明示しています。

STEP 9 : UV展開(uv2)

五角形、六角形それぞれに対し、個別にテクスチャ座標を設定します。

uvはモデル全体のテクスチャ座標としてすでに利用されているため、

代わりにuv2へ設定します。

f:id:r-ngtm:20200609120856p:plain

UV Viewモードでuv2を確認すると、UVが0-1の範囲に収まっていません。

今回これは都合が悪いので、uv2が0-1の範囲に収まるように修正を加えていきます。

f:id:r-ngtm:20200609121136p:plain

STEP 9.1 : uv2の最小値の取得

Attribute Promoteでuv2の最小値をuv_min(detail)として保存します。

f:id:r-ngtm:20200609121536p:plain

STEP 9.2 : uv2の最大値の取得

Attribute Promoteノードでuv2の最大値をuv_max(detail)として保存します。

f:id:r-ngtm:20200609121844p:plain

STEP 9.3 : uv2の範囲変換

AttributeWrangleを利用して、uv2の範囲[uv_min, uv_max] を [0, 1]へ変換します。

f:id:r-ngtm:20200609121956p:plain

// detailが持つアトリビュート uv_min を取得
vector uv_min = detail(geoself(), "uv_min", 0); 

// detailが持つアトリビュート uv_max を取得
vector uv_max = detail(geoself(), "uv_max", 0); 

// uv2 を 範囲(uv_min ~ uv_max)から 範囲(0 ~ 1)へ変換
v@uv2 = fit(v@uv2, uv_min, uv_max, 0, 1);

UV View モードを見ると、UVが0~1の正方形に収まっていることが確認できます。

f:id:r-ngtm:20200609122730p:plain

以上でSubnetworkの解説は終わりです。