和Keyle一起學ShaderForge – Create Base Shader

 

1.本篇讓我們一起動手試試使用ShaderForge創建一個基本的Shader

2.介紹Shader文件Main函數中公開的節點

 

1.使用ShaderForge創建一個基本的Shader

 

效果如下左1為 node_1311 Color效果為純白下的 ，左2為 node_1311 Color效果為紅色RGB(255，0，0)

生成代碼如下，在Properties 屬性中增加了_keyleTexture 貼圖，_TextureNormal 法線貼圖 ，_node_1311 Color ，在兩個對應的Pass塊中使用了在Propertity中定義的三個變量。在frag(片段)函數中計算的疊加的色值，標黃區域為ShadeForge中計算Multiply的代碼。

// Shader created with Shader Forge v1.04 
// 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.04;sub:START;pass:START;ps:flbk:,lico:1,lgpr:1,nrmq:1,limd:1,uamb:True,mssp:True,lmpd:False,lprd:False,rprd:False,enco:False,frtr:True,vitr:True,dbil:False,rmgx:True,rpth:0,hqsc:True,hqlp:False,tesm:0,blpr:0,bsrc:0,bdst:1,culm:0,dpts:2,wrdp:True,dith:2,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,ofsf:0,ofsu:0,f2p0:False;n:type:ShaderForge.SFN_Final,id:8894,x:32590,y:32620,varname:node_8894,prsc:2|diff-6495-OUT,normal-6723-RGB;n:type:ShaderForge.SFN_Tex2d,id:2068,x:32175,y:32518,ptovrint:False,ptlb:keyleTexture,ptin:_keyleTexture,cmnt:添加一個貼圖,varname:node_2068,prsc:2,tex:3da1dd3705158564c97ec7cf99c87747,ntxv:0,isnm:False;n:type:ShaderForge.SFN_Tex2d,id:6723,x:32179,y:32883,ptovrint:False,ptlb:TextureNormal,ptin:_TextureNormal,cmnt:法線貼圖,varname:node_6723,prsc:2,tex:105d97327ec4c5146bb18706fffed5cd,ntxv:3,isnm:True;n:type:ShaderForge.SFN_Multiply,id:6495,x:32378,y:32587,varname:node_6495,prsc:2|A-2068-RGB,B-1311-RGB;n:type:ShaderForge.SFN_Color,id:1311,x:32056,y:32708,ptovrint:False,ptlb:node_1311,ptin:_node_1311,cmnt:Mix Color,varname:node_1311,prsc:2,glob:False,c1:1,c2:1,c3:1,c4:1;proporder:2068-6723-1311;pass:END;sub:END;*/

Shader "Custom/NewShader" {
    Properties {
        _keyleTexture ("keyleTexture", 2D) = "white" {}
        _TextureNormal ("TextureNormal", 2D) = "bump" {}
        _node_1311 ("node_1311", Color) = (1,1,1,1)
    }
    SubShader {
        Tags {
            "RenderType"="Opaque"
        }
        LOD 200
        Pass {
            Name "ForwardBase"
            Tags {
                "LightMode"="ForwardBase"
            }
            
            
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #define UNITY_PASS_FORWARDBASE
            #include "UnityCG.cginc"
            #include "AutoLight.cginc"
            #pragma multi_compile_fwdbase_fullshadows
            #pragma exclude_renderers xbox360 ps3 flash d3d11_9x 
            #pragma target 3.0
            uniform float4 _LightColor0;
            uniform sampler2D _keyleTexture; uniform float4 _keyleTexture_ST;
            uniform sampler2D _TextureNormal; uniform float4 _TextureNormal_ST;
            uniform float4 _node_1311;
            struct VertexInput {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
                float2 texcoord0 : TEXCOORD0;
            };
            struct VertexOutput {
                float4 pos : SV_POSITION;
                float2 uv0 : TEXCOORD0;
                float4 posWorld : TEXCOORD1;
                float3 normalDir : TEXCOORD2;
                float3 tangentDir : TEXCOORD3;
                float3 binormalDir : TEXCOORD4;
                LIGHTING_COORDS(5,6)
            };
            VertexOutput vert (VertexInput v) {
                VertexOutput o = (VertexOutput)0;
                o.uv0 = v.texcoord0;
                o.normalDir = mul(_Object2World, float4(v.normal,0)).xyz;
                o.tangentDir = normalize( mul( _Object2World, float4( v.tangent.xyz, 0.0 ) ).xyz );
                o.binormalDir = normalize(cross(o.normalDir, o.tangentDir) * v.tangent.w);
                o.posWorld = mul(_Object2World, v.vertex);
                float3 lightColor = _LightColor0.rgb;
                o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
                TRANSFER_VERTEX_TO_FRAGMENT(o)
                return o;
            }
            fixed4 frag(VertexOutput i) : COLOR {
                i.normalDir = normalize(i.normalDir);
                float3x3 tangentTransform = float3x3( i.tangentDir, i.binormalDir, i.normalDir);
/////// Vectors:
                float3 viewDirection = normalize(_WorldSpaceCameraPos.xyz - i.posWorld.xyz);
                float3 _TextureNormal_var = UnpackNormal(tex2D(_TextureNormal,TRANSFORM_TEX(i.uv0, _TextureNormal))); // 法線貼圖
                float3 normalLocal = _TextureNormal_var.rgb;
                float3 normalDirection = normalize(mul( normalLocal, tangentTransform )); // Perturbed normals
                float3 lightDirection = normalize(_WorldSpaceLightPos0.xyz);
                float3 lightColor = _LightColor0.rgb;
////// Lighting:
                float attenuation = LIGHT_ATTENUATION(i);
                float3 attenColor = attenuation * _LightColor0.xyz;
/////// Diffuse:
                float NdotL = max(0.0,dot( normalDirection, lightDirection ));
                float3 indirectDiffuse = float3(0,0,0);
                float3 directDiffuse = max( 0.0, NdotL) * attenColor;
                indirectDiffuse += UNITY_LIGHTMODEL_AMBIENT.rgb; // Ambient Light
                float4 _keyleTexture_var = tex2D(_keyleTexture,TRANSFORM_TEX(i.uv0, _keyleTexture)); // 添加一個貼圖
                  float3 diffuse = (directDiffuse + indirectDiffuse) * (_keyleTexture_var.rgb*_node_1311.rgb); /// Final Color:
                float3 finalColor = diffuse;
                return fixed4(finalColor,1);
            }
            ENDCG
        }
        Pass {
            Name "ForwardAdd"
            Tags {
                "LightMode"="ForwardAdd"
            }
            Blend One One
            
            
            Fog { Color (0,0,0,0) }
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #define UNITY_PASS_FORWARDADD
            #include "UnityCG.cginc"
            #include "AutoLight.cginc"
            #pragma multi_compile_fwdadd_fullshadows
            #pragma exclude_renderers xbox360 ps3 flash d3d11_9x 
            #pragma target 3.0
            uniform float4 _LightColor0;
            uniform sampler2D _keyleTexture; uniform float4 _keyleTexture_ST;
            uniform sampler2D _TextureNormal; uniform float4 _TextureNormal_ST;
            uniform float4 _node_1311;
            struct VertexInput {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
                float2 texcoord0 : TEXCOORD0;
            };
            struct VertexOutput {
                float4 pos : SV_POSITION;
                float2 uv0 : TEXCOORD0;
                float4 posWorld : TEXCOORD1;
                float3 normalDir : TEXCOORD2;
                float3 tangentDir : TEXCOORD3;
                float3 binormalDir : TEXCOORD4;
                LIGHTING_COORDS(5,6)
            };
            VertexOutput vert (VertexInput v) {
                VertexOutput o = (VertexOutput)0;
                o.uv0 = v.texcoord0;
                o.normalDir = mul(_Object2World, float4(v.normal,0)).xyz;
                o.tangentDir = normalize( mul( _Object2World, float4( v.tangent.xyz, 0.0 ) ).xyz );
                o.binormalDir = normalize(cross(o.normalDir, o.tangentDir) * v.tangent.w);
                o.posWorld = mul(_Object2World, v.vertex);
                float3 lightColor = _LightColor0.rgb;
                o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
                TRANSFER_VERTEX_TO_FRAGMENT(o)
                return o;
            }
            fixed4 frag(VertexOutput i) : COLOR {
                i.normalDir = normalize(i.normalDir);
                float3x3 tangentTransform = float3x3( i.tangentDir, i.binormalDir, i.normalDir);
/////// Vectors:
                float3 viewDirection = normalize(_WorldSpaceCameraPos.xyz - i.posWorld.xyz);
                float3 _TextureNormal_var = UnpackNormal(tex2D(_TextureNormal,TRANSFORM_TEX(i.uv0, _TextureNormal))); // 法線貼圖
                float3 normalLocal = _TextureNormal_var.rgb;
                float3 normalDirection = normalize(mul( normalLocal, tangentTransform )); // Perturbed normals
                float3 lightDirection = normalize(lerp(_WorldSpaceLightPos0.xyz, _WorldSpaceLightPos0.xyz - i.posWorld.xyz,_WorldSpaceLightPos0.w));
                float3 lightColor = _LightColor0.rgb;
////// Lighting:
                float attenuation = LIGHT_ATTENUATION(i);
                float3 attenColor = attenuation * _LightColor0.xyz;
/////// Diffuse:
                float NdotL = max(0.0,dot( normalDirection, lightDirection ));
                float3 directDiffuse = max( 0.0, NdotL) * attenColor;
                float4 _keyleTexture_var = tex2D(_keyleTexture,TRANSFORM_TEX(i.uv0, _keyleTexture)); // 添加一個貼圖
                float3 diffuse = directDiffuse * (_keyleTexture_var.rgb*_node_1311.rgb);
/// Final Color:
                float3 finalColor = diffuse;
                return fixed4(finalColor * 1,0);
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
    CustomEditor "ShaderForgeMaterialInspector"
}

 

2.Main中的公開節點

 

Diffuse(漫反射)

這是我們着色器的主色調，漫反射的顏色來源於光，上圖中陰影部分為入射光線的衰弱區域

 

Diffuse Power(漫反射的冪)

這是光線衰弱的冪次方，使用大於1的冪時可以用於模擬金屬的外觀

 

Specular(鏡面反射)

這是你的Shader鏡面高光的顏色，值越高顏色越艷麗，當物體為黑色的時候不受Specular影響。

 

Gloss(光澤度)

當Gloss數值越高的時候你的物體表面看起來越有光澤反之亦然。

 

Normal(法線貼圖)

這個我就不解釋了，法線貼圖記錄了貼圖的空間信息，使你的圖看起來凹凸有致，誰幫我畫一個美女的法線貼圖？

 

Emission(發散)

顧名思義，反射出來的光的強度

 

Transmission(這個詞我覺得可以折中一些翻譯比如翻譯成 “通透性”)

舉個例子，你是一個玻璃(或者是棵植物)，我在你背后點一盞燈，你正前方的人能透過你看到你后面的光，如果你的雜質越多(改變Transmission值)，那么我能透過你看到的光就越弱

 

Light Wrapping(四周光/環繞光)

控制光的角度的衰弱偏移量，獲得類似與地表散射光線的效果，多用於光滑的物體，入人類的皮膚

 

Diffuse Ambient Light(環境光漫反射)

它將光線添加到你的着色器，受漫反射影響(Diffuse),多用於基於圖像的照明

 

Specular Ambient Light(鏡面反射環境光)

和Diffuse Ambient Light類似，多了一個鏡面反射效果

 

Diffuse Ambient Occlusion(漫反射環境光遮蔽)

顧名思義，用來抑制Diffuse散發出來的光

 

Specular Ambient Occlusion(鏡面反射環境光遮蔽)

如上，為了抑制鏡面反射出來的光

 

Custom Lighting(用戶自定義光)

允許用戶自定義照明行為

 

Alpha(透明通道)

這個就不多說了，如果不知道這個可以去撞豆腐了

 

Alpha Clip(透明通道裁切)

顧名思義，裁切效果

 

Refraction(折射)

折射背景元素使屏幕空間的UV偏移

 

Outline Width(描邊寬度)

在網格邊緣偏移處加描邊並且控制其寬度

 

Outline Color(描邊顏色)

 

Vertex Offset(頂點偏移)

這里可以用於動畫着色器，隨着Time函數變化，改變Vertex Offset偏移

 

DX11 Displacement(DX11位移)

在 DirectX 11規范  下的位移，不能再Unity里用

 

DX11 Tessellation(DX11 細分曲面技術)

Tessellation細分曲面技術是AMD(ATI)常年研發多代的技術，經過多年發展最終被采納成為DX11的一項關鍵技術，因此歷來都是宣傳重點。和光線追蹤不同，現在的光柵化圖形渲染技術的核心是繪制大量三角形來組成3D模型，而Tessellation技術就是利用GPU硬件加速，將現有3D模型的三角形拆分得更細小、更細致，也就是大大增加三角形數量，使得渲染對象的表面和邊緣更平滑、更精細。

 

 

本章為了降低操作的復雜性只選用了一個計算函數 Multiply ，在ShaderForge中右鍵arithmetic中可以找到，可以通過右側邊快捷屬性欄中可找到，祝大家學習愉快!