VFXGraphとShaderGraphを連携させて綺麗なパーティクルを作ろう
こんばんは。ハツェです。
今回はョョョねこ Advent Calendar 2021の記事として参加しています。
当記事では、VFXGraphの簡単な作例例をご紹介します。よろしくお願いします。
動作環境はUnity(URP) : 2021.2.6f1、VisualEffectGraph : 12.1.2です。
目次
概要
今回は以下のようなパーティクルを作成します。
チュートリアル感覚で記事を書いていくので、よければ見ていってください。
その⓪: VisualEffectGraphをインポートする
Window > Package ManagerからPackages > VisualEffectGraphを選択し、右下のInstallを押します。
その①: Shaderを作る
最初に、Cubeに使うShaderを作成します。
ShaderGraphの詳細な説明は、以下のマニュアルを見てください。
docs.unity3d.com
ShaderGraphを作成する
Projectタブの任意のフォルダ内にてCreate > ShaderGraph > URP > Unlit Shader Graphを選択し、.shadergraphを作成します。名前は任意で大丈夫です。
作成したらダブルクリックしてノードエディタを開きます。
ShaderGraphの下準備をする
Shaderをいじる前に、やっておくことがあるため、先にそれを行います。
ノードエディタ右上にあるGraph Inspectorをクリックして、以下の画像の赤線の箇所を変更してください。特にSupportVFXGraphにチェックを入れておかないと、VFXとShaderGraphの連携が出来なくなります。
もう一つ、Graph Inspectorの左にあるBlackboardボタンを押し、以下の三つのプロパティを作成しておきましょう。それぞれ、Color、Float、Floatです。
Shaderを作る
さて、Shaderを作っていきます。最初はUVを縁取りするようなマスクを作ります。以下の感じです。
UVを分解する
Splitノードを用いて、UVの次元を分解します。ノードエディタの何もないところでスペースキーを押すことで検索画面が出てくるので、そこでノード名のSplitと検索することでSplitノードを出すことができます。同じ要領でUVノードも出した後、UVからSplitへとノードを繋げてみてください。
U軸方向のマスクを作る
詳細なノードの説明は省きます。以下の通りにノードを繋げてください。
V軸方向のマスクを作る
似たような感じでV軸方向のマスクも作ります。以下の通りにノードを繋げてください。
それぞれのマスクを足してマスクを完成させる
U軸側、V軸側それぞれのマスクを足して、輪郭が出るようにします。以下の通りにノードを繋げてください。
ちなみに、saturationはマスクの角が過加算されているのを修正するために使っています。
ここまで綺麗に出来ていれば、Widthを0~1の範囲で動かすと以下の通りになるはずです。
マスクを基に色をつける
最後に、作ったマスクと色を掛け合わせて完成です。以下の通りです。
これで、必要となるShaderを作成することが出来ました。最後に、左上のSave Assetを押して保存しておいてください。
その②: VFXを作って、ShaderGraphと連携する
ここからは、実際にVFXGraphでパーティクルを作りながらShaderGraphと連携していく方法を紹介します。
詳細な使い方は、以下のマニュアルを見てください。
docs.unity3d.com
VisualEffectオブジェクトを作成する
まず、HierarchyでCreate > Visual Effect > VisualEffectからVisualEffectを作成します。
次に、Newボタンから.vfxファイルを作成します。名前は任意で良いです。
すると、GameObjectの位置にこのようなパーティクルが出ると思います。
変数を作成する
ShaderGraphと同様、最初に変数を作成します。以下の五つを用意してください。
Spawnノードをバースト化させる
Spawnノードは文字通りパーティクルのスポーン設定をするシステムです。
初期ノードにおけるSpawnノードは、1秒間に16回パーティクルがスポーンする設定のアトリビュートがアタッチされています。
ですが、今回はこれではなく一定間隔ごとに一気にパーティクルが出るものを用いるため、このアトリビュートは使用しません。なので、最初にConstant Spawn Rateを選択し、キーボードのDeleteボタンを押して削除します。
その後、Press space to add blocksと書いてある部分にカーソルを持ってきた後、Spaceキーを押してPeriodic Burstを生成し、以下の通りに変数を繋げます。
Initialize Particleノードの設定
次にInitialize Particleノードのアトリビュートを変更します。
Initialize Particleノードはパーティクルが生成される瞬間に速度など、様々な初期設定をするシステムです。
先程の要領で、以下の画像の通りに設定してみてください。今回はアトリビュート内の数値まで揃える必要があります。
また、一部検索しても出てこないものがあります。その場合は、似たようなものを一度作った後、そのアトリビュートを選択した状態でInspectorを見ると詳細設定が出るので、そこで調整してあげることで画像と同じ状態にすることが出来ると思います。
初速をランダムにする
VisualEffectGraphでは、プロパティに計算式を入力することも可能となっているので、それについても紹介出来ればと思います。
Initialize Particleノードの外にカーソルを持ってきた後、Spaceキーを押してMultiplyと検索するとMultiplyノードが出てきます。これを用いて変数の値をBに、変数に-1を掛けた値をAにそれぞれSet Velocity Randomに繋げます。
Updateノード
Updateノードはパーティクルが生きている間、ずっと影響し続けるシステムです。例えば、Add VelocityをUpdateノードに入れると、生きている間はずっとパーティクルに力を与え続けます。
このノードでは、抗力係数（空気抵抗みたいなやつ）とかを設定することも出来ますが、今回は特に何も入れていません。
出力するパーティクルの形状決める
最後はOutputノードです。Outputノードはパーティクルの色や形状を決めるシステムです。デフォルトではOutput Particle Quadが繋がっています。
ですが、今回はQuadじゃなくてCubeを出したいのでOutput Particle Quadは消して、Output Particle Meshを作成してUpdateノードから繋げてください。
その後、Meshの箇所をCubeにします。
パーティクルの色合いを決める
Output Particle MeshをUpdateから繋げたら、まずShaderGraphのところに最初作ったShaderを入れてください。
その後、Set Size over LifetimeとSet Color over Lifetimeを追加してSizeのカーブをいじります。このカーブはパーティクルの大きさを決めるものなので好きにいじってもらって構わないですが、本記事では以下のようにしています。
ShaderGraphのプロパティに計算式を当てはめる
最後に、ShaderGraphのプロパティにVFXの変数や計算式を当てはめます。
AlphaとWidthはVFXの変数をそのまま繋げます。
EmissionColorには、HSVで決めた色を渡してあげます。今回は色相をランダム値で決め、それ以外は固定値で決めたHSVカラーをEmissionColorとします。
これでVFXGraph側も完成なので、Saveボタンで保存しておいてください。
Inspectorでプロパティの設定をする
VFXGraphによるシステム作りはこれで終わったので、最後にプロパティでパーティクルの数や枠の太さなどを調整します。ここではShaderGraphのプロパティ値も調整できるので、好きな見た目になるように値を決めてみてください。
完成
完成です。お好みでポストプロセスを入れてみてください。
終わりに
今回はシンプルなVFXとShaderGraphの連携方法について紹介しました。
ShaderGraphを記事で説明するのは難しいですね。どうしても写真だらけになっちゃいますよね。けど、ShaderGraphは途中結果も見れるので、デバッグや試行錯誤がしやすいのが特徴ですね。良いシェーダーを作って良いパーティクルを作ってみてください。
本記事のサンプルはこちらのGithubからclone出来ます。ライセンスを一読した上でご使用ください。
github.com
以上です。ありがとうございました。
明日はqueさんの記事になります！お楽しみにー！
