23
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@r-ngtm

【VisualEffectGraph+ Houdini】煙が広がるスプライトシートをHoudiniで作り、VisualEffectGraphで使用する

23
Posted at

はじめに

今回の記事では、Houdiniを使って作成した煙エフェクトをUnityのVisual Effect Graphで使用するまでの手順を紹介します。

以下はHoudini Apprenticeで作成した煙をUnity上で表示させたものになります。
result_effect.gif

Houdini Apprenticeを使って煙をレンダリングしているため、ウォーターマークがついています。
Houdiniの有料ライセンスを使うとウォーターマークが外れます。

環境

Windows 10
Unity 2018.3.11f1
Houdini Apprentice 17.0

Houdiniの作業

Houdiniを使って以下の煙のスプライトシートを作成します。
6_smoke.rop_comp1.0001.png

1. 煙のシミュレーションを追加

まずは基本となる煙のシミュレーションをHoudiniで作成します。

STEP1. NetworkビューでSphereを作成

まずはNetworkビューでsphere1を作成します。
image.png

STEP2. Dry Iceを追加

sphere1を選択した状態でPyroFxシェルフのDry Iceをクリックするとsphere1にドライアイスのシミュレーションが適用されます。
image.png

球体から冷気が発生するようになりました。
1.gif

2. 煙の出現を最初のフレームに限定

obj/sphere1のUniform Scaleに $FF == 1 と入力します。
image.png

煙が最初のフレームでのみ出現するようになりました。
frame_1.gif

3. 煙の密度・温度を変更

obj/sphere1の中にある、create_densityのパラメータ(density, temperature)を以下のように設定します。
image.png

densityを増やしたことで煙が濃くなり、temperatureを増やしたことで煙の落下が速くなりました。
density.gif

3. シミュレーション領域のサイズを変更

obj/pyro_simの中に入ります。
image.png

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

地面にぶつかって広がるような動きになりました。
close.gif

SizeとCenterはシミュレーション領域の大きさと中心座標を意味しており、
Closed Boundariesはシミュレーション領域の面を閉じるかどうかを意味しています。
今回は-Yにだけチェックを入れているのでY軸下向きの面だけ閉じています。

4. 煙の形状パラメータの変更

pyrosolver1のShapeタブのパラメータを以下のように設定します。
image.png

Dissipationを増やすことで煙が速く消えるようにし、Turbulenceを増やすことで煙にゆらぎを与えています。
result.gif

この煙を真上から見ると以下のようになります。
result_up.gif

今回、この真上から見た煙をスプライトシートとしてレンダリングしてみます。

5. カメラの作成

レンダリングを行うためにはカメラを配置する必要があります。

まずはobj直下にCameraノードを作成します。
image.png

カメラのTransformタブは以下のように設定し、上空から真下を見下ろすようなカメラにします。
image.png

カメラのViewタブではResolutionを(128, 128)に設定します。
これにより、レンダリングで出力する画像データの解像度が128x128になります。
image.png

6. スプライトシートの出力。

Game Development ToolsetシェルフのT Sheetsをクリックします、
image.png

参考リンク : Game Development Toolset について

out直下にrop_texture_sheet1が作成されるので、レンダリングを設定を弄ってRenderボタンでスプライトシートをレンダリングします。
image.png

以下のようなスプライトシートが出力されます。(ファイル形式はexr)
6_smoke.rop_comp1.0001.png

補足:
Houdini Apprenticeでレンダリングすると、レンダリング結果にウォーターマークが追加されてしまいます。
ウォーターマークを外したい場合は有料のHoudiniライセンス(Houdini Indieなど)が必要になります。

7. レンダリング結果のexrを加工してpngとして出力する

img階層へ行くと、comp1ノード(Image Network)があるので、これの中に入ります。
image.png

FileノードにROP File Outputノードを接続します。
image.png

Fileノードには、先ほどレンダリングしたexrファイルのパスを設定します。
image.png

ROP File Outputノードにはpngファイルを出力したいパスを設定します。
Renderボタンをクリックするとpngファイルが出力されます。
image.png

以上でスプライトシートの作成は完了となります。

次にUnity上へ移ります。

Unityでの作業

1. スプライトシートの取り込み

先程レンダリングした煙のスプライトシートをUnityに取り込みます。
image.png

2. Visual Effect Graph の作成

以下のようなVisual Effect Graphを作成します。
image.png

Spawnコンテキスト(パーティクルの生成)

毎秒1個パーティクルが生成されるようにしています。
image.png

Initializeコンテキスト(パーティクルの初期化)

image.png

Updateコンテキスト(毎フレーム処理)

Flipbook Playerブロックを使ってスプライトアニメーションが再生されるようにしています。
image.png

Outputコンテキスト(パーティクルの描画)

Main Textureの部分には先ほどのスプライトシートを設定します。
Uv Mode = Flipbook に設定することで、テクスチャがスプライトシートとして扱われるようにします。
image.png\

完成

上記のVisualEffectGraphをシーンに配置すると、以下のような煙が広がるエフェクトが表示されます。
result_effect.gif

ウォーターマークが邪魔ですね。(実際にゲームで使いたい場合は有料のHoudiniライセンスを使いましょう)

23
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
23
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?