STYLYでShader Graphを使う方法

はじめに

本記事ではUnityの機能であるShader GraphをSTYLYで使用する方法を解説します。

今回はUnity2022.3.24f1、STYLY Plugin 2.0.0、Shader Graph 14.0.11を使用しています。

最新版のSTYLY Plugin は下記の記事からダウンロードしてください。

サンプルシーン

Shader Graphの導入方法

Package ManagerのUnity RegistryにあるShader Graphを選択し、Installをクリックします。

Package Managerが表示されていない場合はWindow→Package Managerをクリックしてください。

Assetsで右クリックしてCreate→Shader Graph→Builtin→Lit Shader Graphを追加します。

Shader Graphを追加したらアイコンを右クリックしてCreate→Materialをクリックしてマテリアルを作成します。この方法で作成したマテリアルは自動でShader Graphと紐づいています。

ヒエラルキーで右クリックして3D Object→Sphereを作成します。

先ほど作成したマテリアルをSphereにドラッグアンドドロップします。

これでShader Graphの準備は完了です。

Shader Graphの使い方

ここからはShader Graphでサンプルを作成していきます。

今回はこのようなShaderを作ります。

まずは先ほど作成したShaderGraphをダブルクリックしてShaderGraphの編集画面を開きます。

画面構成は以下の通りです。

BaseColorを作る

ここではノイズテクスチャを使用するので下記のサイトからテクスチャをダウンロードしてAssetsに追加しておいて下さい。自分で用意していただいても大丈夫です。

https://www.textures4photoshop.com/tex/bokeh-and-light/electric-power-lightning-texture-seamless.aspx

まずBlackboardの＋アイコンをクリックして[Texture2D]を追加します。

追加したらドラッグアンドドロップしてノードとして追加します。

Blackboardは変数を置いておく場所のようなイメージです。

ShaderGraphの内容を保存、更新するには画面左上のSave Assetをクリックします。

こまめに押して保存しておくことをおすすめします。

追加したTexture2DのDefaultに画像をドラッグアンドドロップします。

ShaderGraphでノードを追加するには右クリック→CreateNodeで追加することができます。

Create Nodeの検索窓でSampleと検索して[Sample Texture 2D]を追加します。

[Sample Texture 2D]のTexture(T2)に[Texture2D]を接続します。

テクスチャが表示されました。

次にテクスチャがアニメーションする様にします。

BlackboardでFloatを追加して名前を[Tilling Speed]とし、Defaultを0.1にします。

[Time]、[Multiply]、[Tilling And Offset]を追加します。

追加して下記の様にノードを接続するとテクスチャが動きます。

テクスチャのスピードを変更したいときは[Tilling Speed]の数値を変更してください。

逆方向の動きも追加したいので、[Sample Texture 2D]と[Tilling And Offset]をCtrl+[D]で複製します。

[One Minus]を追加し下記の様にノードを接続します。

[Add]を追加して2つの[Sample Texture 2D]を接続し、[Add]をFragmentのBaseColorに接続します。

 

そうすると画面右下のPreviewにShaderが表示されます。

ノードをまとめてグループにしたいときはグループに追加したいノードをすべて選択してCtrl+[G]を押します。

Emmisionを作る

BlackboardでColorを追加して名前を[Fresnel color]とし緑っぽい色に変更します。

[Fresnel Effect]と[Multiply]を追加し、下記の様にノードを接続します。

[Fresnel Effect]のPowerは４に変更しました。

そうするとふちがぼやっと緑になりました。

[Time]、[Remap]、[Multiply]を追加し、[Remap]の数値を変更します。

下記の様にノードを接続すると、点滅するフレネルエフェクトができました。

最後に[Multiply]をFragmentのEmmisionに接続します。

頂点シェーダーを作る

次に頂点シェーダーを使用して球体が波打つような見た目にしていきます。

まずはBlackboardでFloatを2つ追加して名前をそれぞれ[Displacement Speed]、[Noise Scale]とし両方のDefaultを0.1にします。

[Time]、[Position]、[Multiply]×２、[Add]、[Simple Noise]を追加し、下記の様にノードを接続します。

[Normal Vector]、[Position]、[Multiply]、[Add]、を追加しVertexのPositionに接続すると、球体の表面が波打った様に変化しました。

注意点

Shader GraphのPreviwでは正しく表示されているのにSceneでは見た目が違うことがあります。

Shader Graphマテリアルを使用しているオブジェクトを選択し、Inspectorを確認します。

InspectorのShader Inputを見るとテクスチャや数値がデフォルトのままになっているのでそれぞれ正しく割り当てます。

ここの数値、テクスチャ、カラーなどはShaderGraphを保存しても自動で適応されないので最後に自分でShaderGraph内の数値や色と同じに調整する必要があります。

STYLYへアップロード

STYLYアカウントを作成する
Sign up for free

アカウント作成方法