【Unity】ShaderGraphでディゾルブエフェクトを作成する

今回はUnity 2018からの機能、ShaderGraphを使用してディゾルブエフェクトを作成してみました。作成方法は下記動画をみて同じことを実施しています。その中で説明していた内容で、自分のなかで理解が必要だった部分について書いていきます。

learning.unity3d.jp

使用したツール

  • Unity 2018.2.20f1

ShaderGraphとは?

シェーダをノードベースで作れる機能です。こんな感じで作成できます。
f:id:c_taquna:20190210201000g:plain:w300

ShaderGraphの使用方法

Projectビュー内で右クリックをして、Create -> Shader -> xxx Graph と書かれているものを選択します。ただ、デフォルトのままだとこの表示はでてこないので、表示するようにしてあげます。ちなみにShaderGraphを使用するための方法は2つあります。

テンプレートから

Unityでプロジェクトを作成する時にLightweight RPを選択します。これを使用してプロジェクトを作成すれば、最初からShaderGraphが使用できるようになっています。
f:id:c_taquna:20190210201654j:plain:w300

PackageManagerから

特殊なテンプレートではなく、通常の3Dテンプレートから使用できるようにする場合は、プロジェクト作成後にPackageManagerを使用して必要なソフトウェアをインストールします。赤枠で囲った場所です。
f:id:c_taquna:20190210202020j:plain:w300

ただ、通常のプロジェクトの場合、もう2つ対応する必要があります。このあたりは詳しいわけではないので、手順だけ書きます。


1つ目は描画のためのRendering Pipelineを変更すること。これは、今回のLightweight PRを指定してあげます。ProjectビューにてCreate -> Rendering -> Lightweight Pipeline Asset を選択します。次に、Edit -> Project Settings -> Graphicsを選択します。

f:id:c_taquna:20190210203442j:plain:w300

先程作成したLightweight Pipeline Asset をScriptable Render Pipeline Settingsで選択します。これで1つ目はOKです。


2つ目ですが、これは既存のプロジェクトにおいてRendering Pipelineを変更したことによる既存Shaderへの対応です。新規だったら基本問題ありません(ないはず)。既存のプロジェクトで上記の対応をすると、この様に対応していないShaderが真っピンクになってしまいます
f:id:c_taquna:20190210214602j:plain:w300

その対応のために、下記サイトに書かれている内容を実行します。このサイトのとおりやれば問題ありません。
tsubakit1.hateblo.jp

ここまでで準備が完了です。

ディゾルブエフェクトとは?

ディゾルブエフェクトとはなんなのか・・・ですが、まるで分解されていくように各部がどんどん消えていくエフェクトです。

f:id:c_taquna:20190210201000g:plain:w300

どのような仕組みか

これは動画の中で説明されているのですが、Alpha Cutoutにて実現しています。このあたりを今回改めて自分の理解した範囲で説明したいと思います。まず、Alpha値のグラデーションがあります。

f:id:c_taquna:20190210212838j:plain:w300

左端が0で右端が1になります。1に近づくほど透明になっていきます。ここで、0 - 1の範囲でCutoff値という値を設定します。

f:id:c_taquna:20190210213220j:plain:w300

このCutoff値よりも低いAlpha値の部分は、透明に描画されます(内部処理の説明としてあっているのかわからないですが、少なくとも使用者側ではそう見えます。)。なので、このCutoff値を0 - 1 に変化させる、つまり上のグラデーションの左端から右端まで値を変化させることができれば、色の濃い部分から順に透明に描画していくことができます。つまり、グラデーションを用意して、Cutoff値を変更させることでグラデーションの濃い部分からどんどん透明にしていく、というのが大きな流れになります。これを踏まえた上で最初に紹介した動画をみると理解が進むと思います。

どういうシーンで使用できるのか

今回、VRoidで作成したモデルを使用したかったのですが、Shaderがオリジナルであるためかどうしても真っピンクになってしまう状態を改善できませんでした。なので、デフォルトのShaderを使用したりするシーンで利用しやすいんじゃないかなと。実際、Shaderを作成するううえでコードを読むよりも何倍も楽だったので。今後もっと汎用性がたかまってきたら使用していきたいと思いました。