Search Unity

シェーダーグラフでインタラクティブな頂点エフェクトを作成する

, 2月 12, 2019

シェーダーグラフライトウェイトレンダーパイプラインの機能を使ってエフェクトをデザインする方法をお見せするため、これらのツールを使用して、インタラクティブな頂点ディスプレイスメントエフェクトの例を作成しました。本記事ではその手順をステップ毎にご紹介します。シェーダーグラフで作成したシェーダー、サンプルシーン、3D Game Kit のゲームアセットのいくつかのサンプルを含んだデモプロジェクトをダウンロードし、この先を読み進めてください!

下の動画サンプルの球体には、スペースキーを押すとアクティベートされる、シェーダーベースのディスプレイスメントエフェクトが使用されています。こ皆様のゲームで使用される場合は、これを関連のゲームプレイイベントにアサインします。本記事では、シェーダーグラフパッケージを使用してこのシェーダーを作成し、「スペースキーの押下」のトリガーを実装する方法をご説明します。本記事が皆様にとって「シェーダーグラフでエフェクトをデザインして他の C# スクリプトからそのエフェクトとインタラクトする」方法をより良く理解するための一助となれば幸いです。デモプロジェクトには、シェーダーと、そのシェーダーを制御するスクリプト、そして事前設定済みのライトウェイトレンダーパイプライン(LWRP)アセットのほか、出発点としてお使いいただけるサンプルシーンが含まれています。このチュートリアルを文章ではなく動画でご覧になりたい方は、Unity の YouTube チャンネルをご利用ください(※動画は英語になります)。

シェーダーグラフと LWRP パッケージをインストールする

まず始めに、シェーダーグラフとライトウェイトレンダーパイプラインの設定方法をご説明します。パッケージマネージャーを開き、Lightweight RP パッケージと Shader Graph パッケージの両方で「Install」を選択してください。

ライトウェイトレンダーパイプラインのインストールが完了したら、プロジェクト内に新しいパイプラインアセットを作成する必要があります。メニューを Create->Rendering->Lightweight Render Pipeline Asset の順に選択してください。

上記が完了したらこのパイプラインアセットをアクティベートできます。これは、メニューを Edit->Project Settings->Graphics と進み、LightweightRenderPipelineAsset を Scriptable Render Pipeline Settings フィールドにドラッグアンドドロップすることで行えますが、上記でダウンロードしたデモプロジェクトのアセットをお使いの場合は、このステップは事前に完了されているので行う必要はありません。

ライトウェイトレンダーパイプラインのインストールが完了したら、新しいシェーダーグラフの作成を開始できます。プロジェクト内に新しいグラフを作成してみましょう。メニューを Create->Shader->PBR Graph の順に選択してください。PBR Graph では、Unity の物理ベースレンダリングシステムから入力を取得する(つまりシャドウや反射などの機能を使用できる)新しいシェーダーを作成できます。このシェーダーの作成が完了したら、新しいマテリアルにこれを追加し、そのマテリアルをサンプルシーン内の球体にドラッグアンドドロップでアタッチします。

シェーダーグラフを使用した頂点ディスプレイスメント

このエフェクトを作るには、PBR Master 出力ノード内の出力 Position を変更することで、頂点をメッシュ内でその法線に沿って動かします。これは各頂点のベースの Object Position に Add ノードを使用して行います。ベースの Object Position に Normal Vector を追加すると全ての頂点が押し出されて球体が大きく見えるようになります。この動き(ディスプレイスメント)に変化を付けるために、Simple Noise ノードを使用して法線ベクターのディスプレイスメントを半ランダムに Multiply します。

「Save Asset」をクリックすると、Simple Noise に基づいて球体が変形したのがシーンビューで確認できます。

残念ながら、Simple Noise が UV 空間に基づいて抽出されているため、ディスプレイスメントに裂け目が現れてしまっています。この修正は簡単です ― オブジェクトに Position ノードセットを追加するだけで、Simple Noise に UV 空間ではなくオブジェクト空間が使用されるようになり、裂け目が修正されます。

脈打ちのエフェクトを作るには、この Position 出力を Simple Noise ノードに送る前に Time ノードに追加することでスクロールします。また Multiply を Time ノードと併用してスクロールの速度に変化を付けることもできます。

シェーダーグラフのプロパティを C# で制御する

ディスプレイスメントを制御するために、シェーダーグラフ内で新しいシェーダープロパティを使用可能にします。シェーダープロパティを使用すると、インスペクター内での値の入力によって、あるいは(この例のように)独自の C# スクリプト経由で、シェーダーに入力を提供できます。Amount という名前の新しい Vector1 プロパティを作成し、参照を _Amount に変更します。参照フィールドがストリング名となり、このストリング名を使用してスクリプト経由でディスプレイスメントへのアクセスと変更を行います。この変更を行わなかった場合は、自動生成された値が使用されます。ストリングが完全に一致しないと、スクリプトからプロパティを扱えなくなるので、大文字・小文字の別も含めて入念に確認してください。

この Amount シェーダープロパティを Multiply ノード内で Simple Node と共に(Simple Node が法線ベクターによって Multiply される前に)使用します。こうすることでノイズが頂点位置に適用される前にそれをスケーリングできます。これで、メッシュ内の各メッシュがどの程度ディスプレイスされるかが Amount 変数によって制御されるようになりました。

この Amount 変数を制御するために、DisplacementControl という名前の C# スクリプトを作成し、それを DisplacementSphere ゲームオブジェクトにアタッチしました。このスクリプトは、MeshRenderer コンポーネントにアサインされたマテリアル内に作成したプロパティとインタラクトすることで、 _Amount 変数を制御します。MeshRenderer コンポーネントへの参照を変数 meshRender 内に格納し、新しいフロート変数 displacementAmount を宣言します。

単純な lerp を Update 関数内で使用して displacementAmount 変数の値を 0 に補間します。そしてシェーダー変数 _Amount を displacementAmount 変数内に格納されている値に設定します。これによりシェーダーグラフの _Amount 変数が更新され、時間の経過と共に徐々に変化して 0 になるようになります。

Unity のデフォルトの入力軸「Jump」(デフォルトでスペースキーにアサインされています)を使用して、押下された時に displacementAmount の値が 1 に設定されるようにしています。

これで、シーンで再生モードを開始すると、スペースキーを押した時に displacementAmount の値が 1 に設定され、その後ゆっくりと補間によって 0 に戻されるのが確認できます。

シェーダーグラフでボロノイ分割を用いたグローエフェクトを作成する

調整可能なグローエフェクトを作成するには、PBR Master ノード内の Emission に出力します。Voronoi Noise ノードを使用し、それを Color ノードへ Multiply します。これによりグローエフェクトに若干の変調と暗点が加わります。そして Lerp ノードに別の Color ノードをベースの色として使用して、T 入力に Amount 変数を使用します。こうすることで、ベースの Color ノードと Voronoi Noise の Color ノードを、Amount 変数によってブレンドすることができます。

そして、先のステップと類似した設定によってグローをスクロールします。Object に設定された Position ノードを使用し、これを Time ノードに追加して、出力を Voronoi Noise ノードの UV スロット内に接続します。

さらに、グローの 2 枚目のレイヤーを追加して、バリエーションを加えることも可能です。Simple Noise ノードを追加の Time レイヤーでスクロールし、2 つの Noise 出力を共に Multiply します。これにより 2 枚目のノイズのレイヤーが加わり、さらに深みのあるビジュアル表現が作り出せます。

このグローエフェクトは Lerp ノード内の Amount 変数によって調整されるので、再生モードでスペースキーを押すと、球体の両方のエフェクト(頂点ディスプレイスメントとグロー)がアクティベートされた後にゆっくりと通常の状態に戻るのが確認できます。

さらに面白味を加えるために、DisplacementControl スクリプト内で単純なパーティクルシステムも接続しました。

最終的に、以下のようなエフェクトが完成しました。

これらの機能をご自分でお試しになりたい方のために、全てのアセット、メッシュ、シェーダー、サンプルシーンを含んだ完全なプロジェクトを提供しています。こちらからダウンロード可能が可能です。。皆様の作成された面白いエフェクトを拝見できるのを楽しみにしています!

Unity をより深く学びたい方は、Unity コースのウェブサイトをご利用ください。また Unity アセットストアでは、この他の面白いエフェクトもご覧いただけます。

20 コメント

コメントの配信登録

コメント受付を終了しました。

  1. I’ve just started to familiarize myself with Shader Graph and really like the workflow.

    I cannot find a way to add comments to the graph and maybe add an outline to parts of the graph to improve readability of the graph, is this available or planned for a future version?

    These are features that I do see in the node editor for Substance Designer e.g. but I’m missing here and converting parts to sub-graphs may not always solve this.

  2. Thank you so much! It’s amazing!

  3. Please make tutorial how to manipulate Visual effect graph with script and use trigger events with node.

  4. I’ve been doing vector displacement testing and have not found a way to mask the effect with a texture or Lerp.

  5. Mattheiu Brooks

    2月 17, 2019 1:15 am

    Can this tutorial be done with HDRP instead of LW?

  6. Really appreciate this kind of post – Thanks!
    Had a brief look at the demo project and then set up my own solely via your text tutorial without needing to refer back to the demo. So the info vs. length balance is about right.

    The diagram appears to show the Amount being multiplied with the product of Simple and Normal rather than directly with Simple and preceding Normal in the chain as noted in the text. However, I don’t see any precedent issues with two consecutive mults, so either way seems equivalent – but I stand to be corrected.

  7. Any reason this is a downloadable zip rather than a Github repo like most of your other stuff?

  8. Great blog article, just what I like to see!
    Is there a timeline for when LWRP and HDRP (+ Shader Graph) will be out of experimental status and should be used in production?

  9. This blog is far too focused, please could you talk about PlasticSCM, holographic display and Cloud services?

    1. Glad you thought it was focused :)

  10. Alaslipknot

    2月 13, 2019 2:23 am

    I just like this

    1. Thank you! Appreciate your comment.

  11. Yes! More blog posts like this, please! More Shader Graph, some VFX Graph, please keep them coming!

    1. We’re working on some more about various topics, glad you enjoyed this one!

  12. great , also when will refraction output be supported in shader graph as in shader forge and amplify shader ?

    1. Thank you!

      I got the following answers from some of the developers:

      For LWRP there is no “refraction output”. Refraction should be done manually and added to the desired material channels (we wont be adding these restrictive abstractions). HD Lit has refraction outputs as offsets. For us refraction is like distortion but driven by index of refraction and normal so we don’t expect the user to replace that, they can specify the IOR or thickness of the object. For distortion they can do what they want. Short version, this is very pipeline dependent and we think its implemented correctly for each already.

      1. awesome , thanks for clarification . and great work all around . I’m also a fan of your tutorials and videos x) big thanks

  13. Isaac Surfraz

    2月 12, 2019 4:47 pm

    praise the lord, the return of useful blog posts is here!

    1. Thanks Isaac! Glad you found it useful.

      1. Anthony Johnson

        2月 28, 2019 9:05 am

        In the event that you snap to surface while in turn mode the item will snap the rotate purpose of the article to the surface. On the off chance that in focus mode the article will snap the closest vertices of the chose item to the surface.