デコシノニッキ

ホロレンジャーの戦いの記録

独習ShaderGraph その0 触ってみる

Unity2018からノードベースでのShader作成ができるようになるみたいなので、 これを機にShaderを学習しようと思います t.co

ただ現行のβ版ですと、
1.サンプルプロジェクトをDLする必要がある
2.以下のようにサンプルプロジェクトでは通常のShaderが利用できない
という状況ですので、サンプルプロジェクトと標準の環境の両方で比較しながらノードの動きを学んでいこうかなと。

オブジェクト生成時にマテリアルに適応されるShader
f:id:haikage1755:20180111085812p:plain:h250
通常のShaderをあてた状態
f:id:haikage1755:20180111085828p:plain:h250f:id:haikage1755:20180111085820p:plain:h250

Shaderに関しては日本語ではあまり資料がなく、自分もとりあえず以下の本を購入して目を通しただけ…なのでShaderわからん…なんも…な状態です。
booth.pm

今回の学習では、こちらのShader入門のシリーズを元に進めていきますが先に注意点

Unityのサーフェイスシェーダには3つの工程があります。Vertexシェーダでは頂点情報を処理します。Surfシェーダではオブジェクトの表面の色を定義し、Lightingではオブジェクトの陰影を決めます。 これからしばらくはピンク色のSurfシェーダの部分だけを扱います。VertexとLightingの工程はUnityが自動生成してくれるので、おまかせしちゃいましょう!

【Unityシェーダ入門】Unityのシェーダで遊んでみよう - おもちゃラボ

今回扱うのはSurface shaderというUnity側でライトと頂点の処理をいい感じにしてくれるShaderなのですが、勉強不足でノードでどう再現するかがよくまだわかっていないので先に分かるところから見ていこうかと思います。 nn-hokuson.hatenablog.com

下準備

先ほど紹介したリンクから、ShaderSample.zipをDLし、ノード用のプロジェクトとコーディング用のプロジェクト(以下NPROとCPRO)のそれぞれにimportします。 次にShaderファイルを作成します
NPRO:プロジェクトビューで右クリック→「Create」→「Shader Graph」でShader Graphファイルを作成
CPRO:プロジェクトビューで右クリック→「Create」→「Shader 」→「Standard Surface Shader」でShaderファイルを作成

続けて、いま作成したsample shaderを選択した状態で「Create」→「Material」でMaterialを作成し、3Dモデルにアタッチします。InspectorからMaterialのshaderを
NPRO: graph/sample
CPRO: Custom/sample
に変更します。

f:id:haikage1755:20180111094045p:plain:w250
Shader Graph

f:id:haikage1755:20180111094153p:plain:w250
Surface Shader

Shaderの中身

Shader "Custom/sample" {
    Properties {
        /*------------------------------------------------*/
        //Property
        //public変数みたいなもの
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _Glossiness ("Smoothness", Range(0,1)) = 0.5
        _Metallic ("Metallic", Range(0,1)) = 0.0
        /*------------------------------------------------*/
    }
    SubShader {
        /*------------------------------------------------*/
        // Shader Settings
        // ライティングや透明度などのシェーダの設定項目
        Tags { "RenderType"="Opaque" }
        LOD 200
        /*------------------------------------------------*/

        CGPROGRAM
        // 物理ベースのスタンダートなライティングモデル、及び全てのライトタイプの影の有効可
        #pragma surface surf Standard fullforwardshadows

        // よりよいライティングのためにshader model 3.0 を利用する
        #pragma target 3.0

        sampler2D _MainTex;

        struct Input {
            float2 uv_MainTex;
        };

        half _Glossiness;
        half _Metallic;
        fixed4 _Color;

        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
        // #pragma instancing_options assumeuniformscaling
        UNITY_INSTANCING_BUFFER_START(Props)
            // put more per-instance properties here
        UNITY_INSTANCING_BUFFER_END(Props)

        void surf (Input IN, inout SurfaceOutputStandard o) {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;
            // Metallic and smoothness come from slider variables
            o.Metallic = _Metallic;
            o.Smoothness = _Glossiness;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

ノードの初期状態

f:id:haikage1755:20180111145914p:plain:w300

Shaderを書き換える

基本色を定義するAlbedoを書き換えてみます

void surf (Input IN, inout SurfaceOutputStandard o) {
    // Albedo comes from a texture tinted by color
    fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
    o.Albedo = fixed4(0.1f, 0.1f, 0.1f, 1); //変更箇所
    // Metallic and smoothness come from slider variables
    o.Metallic = _Metallic;
    o.Smoothness = _Glossiness;
    o.Alpha = c.a;
}

f:id:haikage1755:20180111143255p:plain:w250
おお、変わった。

同様にノードのほうにも変更を加えます。
Albedoを選択し、カラーの設定をRGB 0-1.0に変更し、同様に(0.1,0.1,0.1)と設定し、Saveします。
f:id:haikage1755:20180111143449p:plain:w250
すると
f:id:haikage1755:20180111143653p:plain:w250
surface shaderと比べると、陰影に乏しい印象です。

次回参考にするページからはコードで書き換える部分が増えてくるのでノードも複雑になっていきそうです。

[デコシノニッキ]は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。」