UnityのShaderGraphを利用してSTYLY用のシェーダーを作成する

はじめに

Unity2018のShaderGraphを利用してシェーダーを作成し、これをUnity2017.4用のシェーダーコードに書き直す方法を解説します。

ShaderGraphはSTYLYへアップロードすることができませんが、

Unity2017.4用のシェーダーコードに移植することで、STYLY上へのアップロードが可能となります。

 

ShaderGraphについて

ShaderGraphはノードベースでシェーダーを作成するツールで、視覚的にシェーダーを作成することができます。
ShaderGraph

ShaderGraph

詳しくはUnity公式サイトをご覧ください。
似たツールとしてはAmplify Shader EditorやShader Forgeなどがありますが、ここでは詳細は割愛します。

ShaderGraphの動作環境

ShaderGraphを使用するためにはUnity2018.3以降のバージョンのUnityが必要となります。

 

ShaderGraphのサンプル

https://github.com/UnityTechnologies/ShaderGraph_ExampleLibrary

https://github.com/rngtm/ShaderGraphExample

 

ShaderGraphの導入

ここでは、Unity2018.3をインストールして実際にShaderGraphを導入するまでの手順を解説します。

 

Unity2018.3インストール

今回はUnity Hubを利用して、Unity2018.3をインストールします。

Unity2018.3系をインストール済みの方はこの段落は読み飛ばして構いません。

 

まずは下記URLからUnity Hubをダウンロードしてインストールしてください。

https://docs.unity3d.com/ja/2018.1/Manual/GettingStartedInstallingHub.html

 

Unity HubからUnity2018.3をインストールします。
Unity2018.3以降のバージョンのDownloadをクリック

Unity2018.3以降のバージョンのDownloadをクリック

 

Doneを選択してダウンロード・インストール開始

Doneを選択してダウンロード・インストール開始

 

Unityプロジェクトを作成

Unity2018.3系のUnityをインストールしたらUnityプロジェクトを作成しましょう。

ここで作成するUnityプロジェクトはSTYLY用Unityプロジェクト(Unity2017.4.0f1)とは無関係なものであることに注意してください。

シェーダーグラフのデータを作成する専用のUnityプロジェクトとなります。

 

UnityHubからUnity2018.3系を指定して、Unityプロジェクトを新規作成します。

PackageManager経由でShaderGraphをインストール

Package Managerを起動

Package Managerを起動

 

パッケージ一覧が表示されますが、デフォルトではShaderGraphは隠れているため、

AdvancedをクリックしてShow preview packageを選びます。

Advancedをクリック

Advancedをクリック

 

ShaderGraphとRender-Pipeline.Lightweightをインストールします
ShaderGraphとRender-Pipeline.Lightweightをインストール

ShaderGraphとRender-Pipeline.Lightweightをインストール

Lightweight RPをUnityに登録

最後に、Lightweight Render PipelineをUnityに登録する必要があります。

 

Lightweight Render Pipelineアセットを作成

Create > Rendering > Lightweight Render Pipeline Asset を選択し、Lightweight Render Pipelineアセットを作成します。

LWRPアセットを作成

Lightweight Render Pipeline アセットを作成

作成したLightweight Render Pipeline アセット

作成したLightweight Render Pipeline アセット

 

Lightweight Render Pipelineアセットを登録

Edit > Project Settings… を選び、設定ウィンドウを開きます。

Project Settingsウィンドウを開く

Project Settingsウィンドウを開く

 

先ほど作成したLightweight Render Pipeline アセットを設定画面に登録します。

Lightweight Render Pipeline アセットを登録

Lightweight Render Pipeline アセットを登録

 

長くなりましたが、以上でShaderGraphの導入は完了となります。

シェーダーグラフを作る

実際にシェーダーグラフを作ってみましょう。

 

シェーダーグラフアセットの作成

Projectウィンドウ上で右クリック、Create > Shader > Unlit Graph を選択してシェーダーグラフのアセットを作成します。

今回は色を出したいだけなのでUnlit Graphを選択します。

Unlit シェーダーグラフを作成

Unlit シェーダーグラフを作成

作成されたシェーダーグラフ

作成されたシェーダーグラフ

 

シェーダーグラフを開く

このシェーダーグラフをダブルクリックすると、シェーダーグラフ編集ウィンドウが開きます。

Unlit Masterノードがただ一つ置いてあるシェーダーグラフになっています。

シェーダーグラフ編集画面

シェーダーグラフ編集画面

 

シェーダーグラフを板にくっつけてみる

シェーダーグラフからマテリアルを作成します。

マテリアルを作成

マテリアルを作成

 

作成したマテリアルを適当なオブジェクトにくっつけます。

今回は Hierarchyの Create -> 3D Object -> Planeで作成した板にマテリアルをくっつけています。

マテリアルを板に登録

マテリアルを板に登録

マテリアルの登録結果

マテリアルの登録結果

色を変えてみる

Unlit Masterノードを見てみるとColorピンがあります。 これは最終的に出力する色の情報になっています。

このColorを緑色にして、ウィンドウ左上にあるSave Assetをクリックして保存してみましょう。

Unlit Masterノードの色を変える

Unlit Masterノードの色を変える

 

板の色も緑色になりました。

色の変更結果

色の変更結果

テクスチャを表示してみる

次にテクスチャを表示してみましょう。

UVノードを追加

シェーダーグラフウィンドウでSpaceキーを入力し、uvと入力してEnterを押します。

UVノードの追加

 

UVが追加されます。

UVノード

UVノード

 

同様の手順でSample Texture 2Dノードを作成し、UVノードとUnlitノードを以下のように接続します。

Sample Texture 2Dノードにはテクスチャを登録しておきます。

テクスチャを表示するシェーダーグラフ

テクスチャを表示するシェーダーグラフ

シェーダーグラフを保存するとテクスチャの色が板に反映され、以下のような見た目になります。

板の見た目

板の見た目

シェーダーグラフをShaderLabへ移植

次に、このシェーダーグラフをShaderLabに移植してみましょう。

ShaderLabに移植することで、STYLYへアップロードできるようになります。

 

Unlit Shaderの作成

まずはProjectウィンドウでCreate > Shader > Unlit Shaderを選択し、Unlitシェーダーファイルを作成します。

 

作成したシェーダーの中身は以下のようになっています。

 

Unlit Shaderで色を計算している部分

実際に色を出している部分は以下の部分です。

テクスチャから色を取り出し、これにフォグをかけて最終的な色として出力するような処理になっています。

 

テクスチャ色をそのまま出力するようにする

これを以下のように書き換えます。

テクスチャから色を取り出して出力するような処理になっており、

以下のシェーダーグラフと同じものになっています。

テクスチャを表示するシェーダーグラフ

テクスチャを表示するシェーダーグラフ

 

Unlitシェーダーとシェーダーグラフの対応関係

i.uvはUV座標を表しており、シェーダーグラフではUVノードに相当します。
tex2D()関数はテクスチャのuv位置から色を取り出す関数で、シェーダーグラフではSample Texture 2Dノードが相当します。
return命令は、色の値を返す命令で、シェーダーグラフではUnlit MasterノードのColorピンがこれに相当します。

ShaderGraphとShaderLabの対応

 

例2 : ノイズを作る

以下のようなノイズを表示してみましょう。

シェーダーグラフ

以下のようなシェーダーグラフを組むことで、ノイズを作ることができます。

ノイズを作るシェーダーグラフ

ノイズを作るシェーダーグラフ

 

ノードを部分的にShaderLabへ移植する

シェーダーグラフのノードはシェーダーコードで実装されており、
そのシェーダーコードをコピー&ペーストすることで全く同じものをShaderLab側で使えるようになります。
ノードを右クリックしてOpen Documentを選択することで、コードを見ることができます。

 

Simple Noiseノードのドキュメントを開いた場合はWebブラウザで以下のドキュメントが開きます。

https://github.com/Unity-Technologies/ShaderGraph/wiki/Simple-Noise-Node

 

ドキュメントには以下のシェーダーコードが記載されているはずです。

下記コードはSimpleNoiseの中身のシェーダーコードとなっています。

SimpleNoiseのコードをコピー&ペーストする

上記のシェーダーコードを.shaderファイルの中にペーストすることで
.shader内でもノイズが使えるようになりますが、そのままの形では使うことができません。

そこで、使える形にするために最後の8行を関数化、未定義の数(UVとScale)を定義します。


 

そしてShaderLabのfrag関数からこの関数を呼び出してノイズが表示されるようにして完成です。


 

シェーダーコード全体

以下はシェーダーコード全体となります。

 

例3 : 流れるシマシマ模様を作る

流れるシマシマ模様

流れるシマシマ模様

 

以下のようなシェーダーグラフを組むと流れるシマシマ模様になります。

シマシマシェーダーグラフをShaderLabに移植する

このシマシマシェーダーグラフをShaderLabへ移植してみましょう。

 

シェーダーグラフが生成するShaderLabコードを表示

まず、Unlitマスターノードを右クリックして、Show Generated Codeを選択します。

Show Generated Codeを選択すると、シェーダーグラフをシェーダーコードとして表示することができます。

 

実際には以下のようなシェーダーコードが表示されます。

 

このシェーダーコードはUnity2018以降で提供されるScriptable Render Pipelineという仕組みの上で動いております。

そのため、残念ながらUnity2017上で動かすことができずSTYLYへのアップロードもできません。

 

今回はこのシェーダーコードをUnity2017.4.0f1上で動くように移植し、STYLYへアップロードが可能な状態にする手順を解説します。

 

生成されたコード内のfrag関数に相当する部分を探す

Show Generated Codeで生成されたシェーダーコードの中身を読んでいくとPopulateSurfaceData関数が見つかるはずです。

 

このPopulateSurfaceData関数の中身をfrag関数の中に張り付けます。

Unity_Add_*** 系の関数をコピペ

生成コード中で以下の4つの関数が使用されているのでこれもコピペしてきます。


 

SurfaceDescriptionの削除

SurfaceDescription surface = (SurfaceDescription)0; の部分は削除します。

引数名の修正

frag関数の引数の変数名がiになっているのでこれをINへ変更します。

変更前

変更後

 

uvの参照名の修正

v2fの中ではuvという名前で定義されているため、以下の行のuv0をuvに修正します。

修正前

修正後

 

uvの変数型の修正

INのuvはfloat2として定義されているため、左辺の変数型もfloat4からfloat2へ変更します。

修正前

修正後

uv要素参照の修正

float2やfloat4の各要素には以下のような構文でアクセスすることができます

 

今回、uv値はfloat2のためz成分とw成分が存在しません。

なので下記のコードを削除します。


 

returnの修正

surfaceデータに色やアルファ値を格納してreturnしていますが、今回は色情報(fixed4)を返すため、

下記のコードを削除します。

代わりに、surface.Colorに代入している値を返すようにしてやります。

frag関数の修正結果

最終的にはfrag関数は以下のようになります。

Shaderコード全体

移植した後のシェーダーコード全体は以下になります。

 

例4 : ノイズ表現

縦のノイズと横のノイズを交互に表示

縦のノイズと横のノイズを交互に表示

縦のノイズと横のノイズを交互に表示するシェーダーグラフ

縦のノイズと横のノイズを交互に表示するシェーダーグラフ

 

ShaderLabへ移植

上記のノイズシェーダーを移植したものが以下になります。

 

UnityからSTYLYにアセットをアップロードする方法

UnityからSTYLYへアセットをアップロードする方法については下記URLをご覧ください。

https://styly.cc/ja/manual/unity-asset-uploader/