Shader Forge の基本的な使い方

ノードベースで操作によりプログラマ以外でも簡単にシェーダを作成出来る定番ツールとして「Shader Forge」というアセットが有ります。
Unity の勉強会でもデザイナでも簡単に使えるのでデザイナに直接 Unity 向けのシェーダを作って貰うのに使っているという話も良く聞くアセットです。値段は $90 です。

Shader Forge - アセットストア
https://www.assetstore.unity3d.com/jp/#!/content/14147

公式サイトはこちらです。

Shader Forge
http://www.acegikmo.com/shaderforge/

初めて触る場合にはこちらチュートリアルページ辺りから始めるのが良いかと思います。

Shader Forge
http://acegikmo.com/shaderforge/tutorials/

使い方解説

Shader Forge 上での作業

現在のバージョンでは公式チュートリアルで説明されているものとはちょっとだけ使い方が異なる部分があるので「Making a basic shader」をベースにした簡単な使い方の手順を書いておきます。

1. まずは Shader Forge を Unity のプロジェクトにインポート。
2. メニューから Window > Shader Forge と選択すると以下の画面が表示されるので「New Shader」を選択します。

3. 次にどの様なシェーダを作成するのかを選択します。公式のチュートリアルを進める時はここで「Lit(Basic)」を選択しましょう。
※これは基本的なシェーダを作成する時に使用するものです。昔の Unity のシェーダを使う場合にはこちらを使用します。チュートリアルはこちらのもので解説が始まるのでチュートリアル中はこちらを使いましょう。
現在の Unity は PBR が使えるようになり、より写実的なシェーダを作成出来るように成っています。 Shader Forge の使い方に慣れて、こちら向けのシェーダを作成したくなった場合には「Lit(RBR)」を選択して下さい。

4. Shader Forge で作成したシェーダは通常のシェーダと同様に .shader ファイルとして保存されます。ここでは Test.shader という名前で保存します。

※この .shader ファイルには先頭に Shader Forge 向けの情報がコメントとして差し込まれている様です。

// Shader created with Shader Forge v1.29 
// Shader Forge (c) Neat Corporation / Joachim Holmer - http://www.acegikmo.com/shaderforge/
// Note: Manually altering this data may prevent you from opening it in Shader Forge
/*SF_DATA;ver:1.29;sub:START;pass:START;ps:flbk:,iptp:0,cusa:False,bamd:0,lico:1,lgpr:1,limd:1,spmd:1,trmd:0,grmd:0,uamb:True,mssp:True,bkdf:False,hqlp:False,rprd:False,enco:False,rmgx:True,rpth:0,vtps:0,hqsc:True,nrmq:1,nrsp:0,vomd:0,spxs:False,tesm:0,olmd:1,culm:0,bsrc:0,bdst:1,dpts:2,wrdp:True,dith:0,rfrpo:True,rfrpn:Refraction,coma:15,ufog:True,aust:True,igpj:False,qofs:0,qpre:1,rntp:1,fgom:False,fgoc:False,fgod:False,fgor:False,fgmd:0,fgcr:0.5,fgcg:0.5,fgcb:0.5,fgca:1,fgde:0.01,fgrn:0,fgrf:300,stcl:False,stva:128,stmr:255,stmw:255,stcp:6,stps:0,stfa:0,stfz:0,ofsf:0,ofsu:0,f2p0:False,fnsp:False,fnfb:False;n:type:ShaderForge.SFN_Final,id:4013,x:32719,y:32712,varname:node_4013,prsc:2|diff-1304-RGB;n:type:ShaderForge.SFN_Color,id:1304,x:32443,y:32712,ptovrint:False,ptlb:Color,ptin:_Color,varname:node_1304,prsc:2,glob:False,taghide:False,taghdr:False,tagprd:False,tagnsco:False,tagnrm:False,c1:1,c2:1,c3:1,c4:1;proporder:1304;pass:END;sub:END;*/

Shader "Shader Forge/Test" {
    Properties {
        _Color ("Color", Color) = (1,1,1,1)
    }
...

5. 公式チュートリアルでは右側にパネルが有りますがデフォルトではこのパネルは表示されていません。

「Setting」ボタンを押して表示されるメニューの中の「Show node bowser panel」にチェックすると表示されます。

※このパネルでの操作は同様の事がマウスの右クリック経由でも可能です。この解説では右クリックによる操作で説明します。

後、「Auto」と「Rotate」にもチェックをしておきましょう。

項目	説明
Auto	シェーダの自動コンパイルが行われるようになる
Rotate	プレビュー表示されているオブジェクトが回転する

「Auto」の自動コンパイルについてはマシンのパフォーマンス的に問題が有る場合には「Auto」のチェックを外して作業をしましょう。
この場合、ノードの状態を編集しても即座に反映される事は無くなります。編集結果を反映させたい場合には「Complie shader」ボタンを押して下さい。

6. Color と書かれたノードを削除します。ノードを選択した状態で Ctrl(Macの場合はcommand) + X キーを押して削除して下さい。
※Ctrl(Macの場合はcommand) + delete キーでもOK

7. 右クリックメニューから Properties > Texture 2D と選択。
※先頭の文字のキーを入力する事で簡単に選択する事も出来ます。 Texture 2D の場合には T キーを押しっぱなしにすると T で始まる候補が表示されるのでその中から Texture 2D を選択する事で生成する事も可能です。
8. 追加されたノードの名前を Diffuse に変更します。

　　↓

9. Diffuse ノードの上にマウスカーソルを載せると「Select」というボタンが表示されるのでクリックし、「sf_conc_floor_01_d」というテクスチャを選択して下さい。

10. Diffuse ノードの「RGB」をドラッグし、表示されるラインを Main ノードの「Diffuse」に繋げてください。

※もし間違った場所に繋げてしまった場合には alt キーを押した状態でマウスの右クリックする事で削除できます。またドラッグで複数まとめて削除する事も可能です。

11. 右クリックメニューから Properties > Texture 2D と選択し、もう一つ Texture 2D ノードを作成して名前を「Normal」と変更。その後、「sf_conc_floor_01_n」というテクスチャを選択。
12. Normal ノードの「RGB」と Main ノードの「Normal」を接続して下さい。これによりレンダリング結果に凹凸のディテールが追加されます。
13. 右クリックメニューから Properties > Color と選択。
14. 追加されたノードの名前を Color に変更します。
15. 右クリックメニューから Arithmetic > Multiply と選択。

ここまでの作業でこの様な状態になります。

16. Diffuse ノードの「RGB」を Multiply ノードの「A」に接続。 Color ノードの「RGB」を Multiply ノードの「B」に接続します。
17. Multiply ノードの出力を Main ノードの Diffuse に接続します。

ここまでの作業でこの様な状態になります。

この状態で Color ノードに設定されている色を変更してみてそれがちゃんとレンダリング結果に反映される事を確認してみて下さい。

作成したシェーダを Unity で使用する

次に Shader Forge で作成したシェーダを Unity で使用してみましょう。

今回は Test という名前でシェーダを作成したのでそのシェーダを探し、選択した状態で右クリックメニューから Create > Material と選択して下さい。
作成された Material をインスペクタで確認するこの様な状態に成っています。

Shader Forge で作業した内容がそのまま反映されている事が確認出来るかと思います。

後はそのまま使っても良いですし、必要に応じて割り当てられているテクスチャや色を変更して使っても良いでしょう。

強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Shader Forge の基本的な使い方

使い方解説

Shader Forge 上での作業

作成したシェーダを Unity で使用する

関連情報