rn.log

備忘録など

【シェーダーグラフメモ その47】炎の卵を作る

はじめに

炎が燃えさかるような卵を作る方法を解説します。

f:id:r-ngtm:20190213010637g:plain

 

 サンプル

github.com

 

STEP1 : テクスチャ準備

今回は以下のテクスチャを使用します。

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

 

上記のテクスチャはSubstanceDesignerで以下のようなノードを組んで作成しました。

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

BnW Spots1のパラメータを Scale = 1, Disorder = 0.27, Roughness = 0.47としたものをOutputでビットマップ出力しています。

 

STEP2 : シェーダーグラフ作成

次にシェーダーグラフを作成します。

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

 

PBRノードは以下のように設定します。

Workflow = Mettalic, Surface = Opaque, Blend = Alpha, TwoSided = True

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



これを球体に張り付けると以下のようになります。

f:id:r-ngtm:20190213012413g:plain

 

パラメータを以下のように設定することで炎らしい見た目になります。

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

 

f:id:r-ngtm:20190213012712g:plain

 

※光の滲みはPostProcessingStack V2のBloomで実現しています。

シェーダーグラフ単体では光の滲みは出せないので注意です。

STEP3 : 卵型のメッシュを作成(Houdini)

最後に以下のような卵型のメッシュをHoudiniで作成します。

STEP2の球メッシュを卵型メッシュに置き換えることで、炎の卵の完成となります。

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

 

STEP 3.1 非商用版Houdini Apprenticeの準備

まずは非商用版のHoudini Apprenticeをインストールします。

Download | SideFX

 

STEP 3.2 Houdiniを起動する

Houdiniを起動すると以下のようなウィンドウが登場します。

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

 

今回は赤い線で囲った部分を使用します。

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

Houdiniユーザーインターフェース

 

STEP 3.3 Geometryノード作成

ネットワークビューを右クリックするとTABメニューが現れます。

右クリックの代わりにネットワークビュー上でTABキーを押すことでもTABメニューを出せます。

 

TABメニュー上で"Geo"と入力し、Geometryを選択します。

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

 

geo1ノードが作成されます。

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

 

STEP 3.4 geo1ノードの中に入る

geo1ノードをダブルクリックして、中へ入ります。

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

  

何もないウィンドウが表示されるはずです。

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

 

STEP 3.5 Sphereノード作成

ネットワークビュー上で右クリックし、TABメニュー上で"Sphere"と入力してSphereを選択します。

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

 

 Sphereノードが作成されます。

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

 

画面左側のシーンビューには球が表示されます。

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

 

STEP 3.6 球をポリゴンにする

パラメータービューにあるPrimitive Typeを Polygon Mesh にします。

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

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

 

STEP 3.7 UVプロジェクション

次にUV座標を球体に貼り付けます。

ネットワークビュー上でTABメニューを出し、UV Projectを選択します。

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

 

入力と出力を一つずつ持ったUV Projectノードが作成されます。(uvprojection1という名前になっています)

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


丸ポチの部分をドラッグアンドドロップしてSphereノードとuvprojectノードを接続します。

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

 Sphereノードの出力がuvproject1へ入力されるようになりました。

 

STEP 3.8 UVの表示

TABメニューからuvquickshadeノードを作成します。

これをuvprojectノードと接続し、uvproject1の出力がuvquickshade1へ入力されるようにします。

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

 

uvquickshade1ノードの右端をクリックし、ノードのDisplayフラグをONにします。

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

 

シーンビューの球体にUVが表示されるようになります。

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

 

STEP 3.9 UVプロジェクションの調整

uvprojection1ノードををクリックして選択状態にします。

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

 

パラメータービューからProjectionの部分をPolarへ設定します。

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

 

球面のUVがきれいになりました。

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

 

STEP 3.10 球体を歪める

最後にBendノードを利用して球体を卵状に歪ませます。

Bend

 

まずはBendノードを作成し、uvquickshadeノードの出力がBendノードへ入力されるようにします。

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

 

Bendノードの右端のボタンをクリックしてDisplayフラグをON(可視状態)にします。

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

 

シーンビューは以下のような表示になります。

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

 

Bendノードのパラメータを以下のように設定します。

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

 

卵のような形状になります。f:id:r-ngtm:20190213223945p:plain

 

STEP 3.11 UVを90°回転させる

現状だと卵がとがっている方向にX軸、垂直な方向にY軸が向いていますが、

今回は都合が悪いのでこれを90°回転させます。

 

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

 

uvproject1とuvquickshade1の間にTransformノードを挟み込みます。

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

 

TransformノードのRotateのZ成分を-90に設定します。

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

 


UVが90°回転し、卵がとがった向きへUVのY軸、垂直な方向へX軸が向くようになりました。

Bend1ノードによってデフォームをかける前に球体を回転させているため、UVだけがうまい具合に回転してくれています。

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

 

STEP 3.12 卵型メッシュをOBJ形式で書き出し

最後に卵型メッシュをOBJ形式で書き出します。

UnityはOBJをサポートしているため、OBJで書き出すことでUnityで利用できるようになります。

 

まずはネットワークビューのbend1を右クリックします。

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

 

Save/Geometry... を選択するとファイル書き出しウィンドウが表示されます。

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

 

今回は炎の卵を作るということでファイル名をfire_egg.objとします。

Acceptボタンを押すとobjファイルが出力されます。

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

 

ファイル書き出しウィンドウの矢印アイコンをクリックすると出力されたobjファイルを手っ取り早く見ることができます。

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

 

STEP 3.13 卵型メッシュをUnityに取り込む(完成) 

fire_egg.objをUnityに取り込み、

STEP2で作成したシェーダーグラフを張り付けることで以下のような炎の卵になります。(Rotation = (0, 0, -90)にしています)

f:id:r-ngtm:20190213231745g:plain