Shader Graphでディゾルブエフェクト【Unity】

前に作ったPBRマテリアルのシェーダーグラフにディゾルブエフェクトを重ねがけする作り方をまとめました。
ディゾルブは値を動かすとオブジェクトが溶けるように消えていくエフェクトで、オブジェクトが現れたり消えたりするのに使われることが多いかと思います。
特に消える際にふちを光らせるようになっているのをよく見かけるので、今回はこのタイプで作ってみました。
見た目が綺麗で華やかなのに、作るのはとても簡単です！

事前準備

まずディゾルブをかけたいLitのシェーダーグラフを用意します。
今回は、以前の記事で作ったスタンダードシェーダー風のシェーダーを使います。

URPのスタンダードシェーダー互換のShader Graphを作る【Unity】

追加エフェクトがない素の状態のシェーダーは今後いろいろ使えるので、前回のシェーダーはサブグラフに変換しておきました。
サブグラフからの出力とFragmentの間に追加のエフェクトを作っていくことになります。

必要な素材

ディゾルブの元になるグレースケールテクスチャについては自分で用意しておく必要があります。
ただのノイズテクスチャでもいいですし、オブジェクトのシャープな角部分が残るように手塗りで作っても良いかと思います。
今回はモデルの形状に合わせてこんな感じのものを用意しました。

（完全にただのノイズでよければ、シェーダーグラフのノードの中にもパーリンノイズやボロノイがあります）

シェーダーグラフの設定

半透明部分があるマテリアルにディゾルブを追加することもできますが、今回は分かりやすくアルファカットアウトで作ることにしました。
シェーダーの設定を「Transparent」で「Alpha Clipping」をオンにしておきます。

カットアウトのしきい値を作る

スクリプトから動かす用のfloatのプロパティを作ります。名前は何でも良いですが、今回は分かりやすく「Dissolve Value」にしました。
スライダーにして値は0〜1の範囲になるようにしておきます。
0の時は完全に見えない状態、1の時はディゾルブしていない状態になる予定です。

Sample Texture 2Dノードを新しく1つ作り、ディゾルブ用グレースケールテクスチャをつなぎます。

テクスチャのRの出力をStepノードのInにつなぎ、Edgeに先ほど作っておいたDissolve Valueをつなぎます。その後、Stepノードの出力をFragmentのAlphaにつなぎます。
作ったマテリアルのスライダーを動かすと、オブジェクトのカットアウトの範囲が変わるのが分かるかと思います。

カットアウトのふちを光らせる

ここまででもディゾルブとしてはOKですが、今回はふち部分を光らせるようにしていきます。
プロパティに新しくColorで光の色とfloatで光の幅を作ります。
名前はそれぞれDissolve ColorとDissolve Widthにしました。

まず、先ほどのカットアウトの処理はそのままでOKです。
色の境目の領域を作るために、Subtractノードでテクスチャの値からDissolve Widthの値を減算します。
SmoothStepノードで減算済みの値と減算していない値を滑らかに変化させます。

このSmoothStepの出力をグレースケールで見るとこんな感じです。

この白になっている部分を発光させて黒い部分は元のテクスチャにしたいので、
SmoothStepからの出力にDissolve ColorをMultiplyノードで乗算してから元々のEmissionに出力にAddノードで加算します。

こんな感じです！

使い方

シェーダーグラフをProjectフォルダから確認するとプロパティの名前が分かるので、これをスクリプトから動かせばOKです。

Material material;
material = meshObject.GetComponent().material;

material.SetFloat("_Dissolve_Value", 0.1f);

光の色にHDRカラーを使ってポストエフェクトのBloomを入れたりするととても華やかなのでオススメです！
色を3段階にして灰になった部分を作ったりしても面白そうです。

Shader Graphでディゾルブエフェクト【Unity】