我们来回顾下如何制作卡通材质，我们用两个Pass来实现，一个Pass用来渲染背部来达到描边的效果，一个Pass用来渲染正面达到颜色着色的效果。这其中需要用到一个指令Cull Front与Cull Back，这两个指令可以告诉GPU我渲染的时候不需要渲染那一部分，所以叫做剔除指令。

首先我们来制作Cull Front部分的渲染，在渲染轮廓线的时候，我们可以进行法线描边，但这时候有个问题，模型的法线的深度有区分，如果不对他进行重置，我们得到的轮廓线会有断线的情况。所以在进行描边之前我们需要进行法线的深度统一化，这一步也很简单，直接进行normali.z=-0.5就可以统一描边，为什么是-的呢，这里我们要再次复习下左手坐标系，

Z轴代表我们的深度坐标，越远z的值越大，而我们的卡通材质需要我们清晰的看到他的描边防止被正面渲染的部分给遮挡住所以进行统一的-0.5的定值。所以我们正式来编写描边的Pass。

Shader"Custom/Toon-Shading"{
    Properties{
        _Outline("Outline Size",Range(0,1))=0.5
        _OutLineColor("OutLine Color",Color)=(1,1,1,1)
        _Color("Color Tint",Color)=(1,1,1,1)
    }
    Subshader{
        Pass{
            NAME "OUTLINE"
            Cull Front
            CGPROGRAM
            
            
            #pragma vertex vert
            #pragma fragmengt frag
            #include "Lighting.cginc"
            #include "UnityCG.cginc"
            struct a2v{
                float4 vertex:POSITION;
                float3 normal:NORMAL;
            };
            struct v2f{
                float4 pos:SV_POSITION;
            };
            v2f vert(a2v v){
                v2f o;
                float4 pos=UnityObjectToClipPos(v.vertex);
                float3 normal=mul((float3x3)UNITY_MATRIX_IT_MV,v.normal);
                normal.z=-0.5;
                pos=pos+float4(normalize(normal),0)*_Outline;
                o.pos=mul(UNITY_MATRIX_P,pos);
                return o;
            }
            fixed4 frag(v2f i):SV_Target{
                    return float4(_OutLineColor.rgb,1);
            }
            ENDCG
        }
    }
    Fallback "Diffuse"
}

上述代码中，我标亮的地方需要特别注意下，首先是Cull Front，前文已经说明了，这部分Pass我们专门给她命名成OUTLINE，以后如果写其他这种需要描边的效果可以直接使用UsePass”Toon-Shading/OUTLINE”,注意下，unity中会把有名称的Pass的名称转成全部大写，所以我们在命名的时候直接命名成大写，这样就不太会忘记这种小细节。

然后float4 这个定义，这里有一个豆知识，明明三个数字就能表达点的坐标，为什么要用float4来定义，一个原因是我们在变换的时候用的矩阵是4X4的矩阵，所以为了达到转换效果西药将他们转换到一个齐次坐标的空间进行转化。这个是转换时的意义，还有就是当（x,y,z,1）时代表一个点，而（x,y,z,0）时代表一个向量。所以我们在将顶点位置向外延申的时候除了要normalize还需要将他补齐为一个4X4的向量。

接下来我们来实现真正关键的光照模型所在Pass。在这我们再次回顾一下Blinn-Phong模型，

Specular=Clight*Mdiffuse*max(0,n·halfDir)^_gloss

写成代码就是

fixed4 specular=_LightColor0.rgb*_Diffuse*pow(max(0,dot(normal,halfDir)),_Gloss);

其中halfDir相信大家还没有忘记，就是viewDir+lightDir也就是视角向量+入射光线向量，其中视角向量可以用_WorldSpaceCameraPos0.xyz-UnityObjectToWorldNormal(normal)来得到。这里稍微复习一下Blinn-Phong的高光模型，虽然我们不会在这个shader中用它，但将他修改下，就能够为我们所用。

我们照样需要normal与halfDir的点积，但我们需要的不是渐变的高光，而是用它的点积跟一个阈值比较。这时候我们要用一个CG函数step(a,x)这是一个比较函数，当x大于a的时，返回1否则返回0，所以这部分我们可以这么写，

float spec=dot(worldNormal,halfDir);
spec=step(a,spec);

但我们使用这个进行着色的时候，会发现表面锯齿有点大，所以我们引入smoothstep(-w,w,spec-a) smoothstep（a,b,c）的数学意义是，当c小于a的时候返回0，大于b的时候返回1在这之间的时候进行插值，我们结合这两个函数看，其实smoothstep是step的进化版，step是直接拿spec-a，当其>0的时候返回1，<0的时候返回0，所以spec-a的时候无外乎有三种情况，<-w,>w,与在-w,w之间，而这个w有我们来定义，在本例中我们会用到fwidth函数，来得到临近像素之间的近似导数。

所以我们来写这部分的shader。首先我们在达成这个效果的时候需要什么？毋庸置疑的表面颜色_Color,_Specular,_SpecularScale，这三个是高光模型中必备的，然后包含我们上面一个pass所需要的_Outline与_OutlineColor，

Shader "Custom/Toon-ShadingShader2"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _Specular("Specular Color",Color)=(1,1,1,1)
        _SpecularScale("Specular Scale",Range(0,0.1))=0.1
        _Outline("Outline Size",Range(0,1))=0.5
        _OutlineColor("Outline Color",Color)=(1,1,1,1)
        _MainTex("Main Tex",2D)="white"{}
    }
    SubShader
    {
        Tags{"RenderType"="Opaque"  "Queue"="Geometry"}
        
        Pass{
            
            
            NAME "OUTLINE"
            Cull Front
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag 
            #include "Lighting.cginc"
            #include "UnityCG.cginc"

            float _Outline;
            fixed4 _OutlineColor;

            struct a2v{
               float4 vertex:POSITION;
               float3 normal:NORMAL;

            };

            struct v2f{
                float4 pos:SV_POSITION;
                
            };

            v2f vert(a2v v){
                v2f o;
                float4 pos=UnityObjectToClipPos(v.vertex);
                float3 normal=mul((float3x3)UNITY_MATRIX_IT_MV,v.normal);
                normal.z=-0.5;
                pos=pos+float4(normalize(normal),0)*_Outline;
                o.pos=mul(UNITY_MATRIX_P,pos);
                return o;
                
            }

            fixed4 frag(v2f i):SV_TARGET{
                return float4(_OutlineColor.rgb,1.0);
            }
            
            ENDCG
        }

        Pass{
            Tags{"LightMode"="ForwardBase"}

            Cull Back

            CGPROGRAM
                ...
            ENDCG
        }

    }
    FallBack "Diffuse"
}

这个就是我们的大体框架，然后我们开始编写代码的初始工作，首先我们的#pragma vertex与#pragma fragment不用谈都要的，然后我们这里要用到#pragma multi_compile_fwdbase这个组包含了所有向前渲染的关键字，但是这个只能处理平行光。如果缺少这段代码的话，unity会默认编译

DIRECTIONAL LIGHTMAP_ON DIRLIGHTMAP_ON SHADOWS_OFF

接下来是头文件，unityCG.cginc与Lighting.cginc必不可少。由于我们需要计算阴影，所以还需要AutoLight.cginc，这里要额外添加一个UnityShaderVariables.cginc，具体的含义可以在他的头文件中获取。

                        #pragma vertex vert 
            #pragma fragment frag 
            #pragma multi_compile_fwdbase

            #include "UnityCg.cginc"
            #include "Lighting.cginc"
            #include "AutoLight.cginc"
            #include "UnityShaderVariables.cginc"

接下来就是定义我们需要的参数了。

            fixed4 _Color;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Specular;
            fixed _SpecularScale;

这些基本定义就不再赘述，接着写我们的顶点数据到顶点着色器的结构体

            struct a2v{
                float4 vertex:POSITION;
                float3 normal:NORMAL;
                float4 texcoord:TEXCOORD0;
                
            };

我们需要从顶点数据那边拿到的首先是就是顶点坐标与顶点法线，还有uv坐标，由于我们输出到片元着色器中也需要uv所以们在a2v中用texcoord作为顶点UV的参数，并附上第一套坐标值。

            v2f vert(a2v v){
                v2f o;
                o.pos=UnityObjectToClipPos(v.vertex);
                o.uv=TRANSFORM_TEX(v.texcoord,_MainTex);
                o.worldNormal=UnityObjectToWorldNormal(v.normal);
                o.worldPos=mul(unity_ObjectToWorld,v.vertex).xyz;

                TRANSFER_SHADOW(o);

                return o;
            }

这里我们解释两个宏，一个是TRANSFORM_TEX(a,b)，关于这个解释Unity的官方给出的解释如下vertex program uses the TRANSFORM_TEX macro from UnityCG.cginc to make sure texture scale and offset is applied correctly, and fragment program just samples the texture and multiplies by the color property.翻译一下就是顶点着色器使用这个宏可以确保应用纹理的比例与偏移，但片元着色器中只需要通过与颜色的相乘就能达到采样的结果。就是说当对顶点进行纹理着色的时候，使用这个宏可以正确的进行着色不至于使他的坐标进行偏移。

接下来是TRANSFER_SHADOW(o);这个宏其实是对应下一个v2f的结构体中的SHADOW_COORDS（）来使用的，他将SHADOW_COORDS()声明的阴影坐标转换成片元着色器中所需要的阴影坐标，供其着色。所以下面我们来进行struct v2f的编写

            struct v2f {
                float4 pos:SV_POSITION;
                float2 uv:TEXCOORD0;
                float3 worldNormal:TEXCOORD1;
                float3 worldPos:TEXCOORD2;
                SHADOW_COORDS(3)
            };

这部分代码中的关键在前文已经解释过了，SHADOW_COORDS()仅起到一个声明阴影坐标的作用。接下来是我们最重要的片元着色器。首先我们再来回顾下我们需要什么，Blinn-Phong模型中我们需要表面法线点乘halfDir，所以我们需要世界坐标下的法线，视角向量，入射光向量。与之相对的halfDir。所以我们继续初始的声明计算

            fixed4 frag(v2f i):SV_TARGET{
                float3 worldNormal=normalize(i.worldNormal);
                float3 worldLightDir=normalize(UnityWorldSpaceLightDir(i.worldPos));
                float3 worldViewDir=normalize(UnityWorldSpaceViewDir(i.worldPos));
                float3 halfDir=normalize(worldLightDir+worldViewDir);

                
            }

虽然本案例不用进行贴图，但以防万一，我们仍在偏远着色其中进行贴图着色，按照之前的贴图纹理，我们了解了一个函数tex2D（tex，uv）并乘上我们的_Color进行一个正片叠加的效果，得到我们的反射率效果

fixed3 tex=tex2d(_MainTex,i.uv);
fixed3 albedo=tex.rgb*_Color;

接着我们获取环境光通过UNITY_LIGHTMODEL_AMBIEN.xyz乘上albedo

fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz*albedo;

然后我们进行漫反射的计算，在这里为了使正面颜色更加突出，我们可以用一个新的模型半兰伯特漫反射模型（half-Lambert diffuse model)，这是一个效果模型，跟现实中的反射模型没有一点关系，我们回忆一下我么的兰伯特模型的计算公式diffuse=c_light*m_diffuse*max(0,n*l) 其中max(0,n*l)我们再代码中是这样体现的

saturate(0,dot(worldNormal,worldLightDir));

而我们的半兰伯特模型，则是将其乘以0.5并加上0.5的偏移这其中的代码我们可以这么写

diff=dot(worldNormal,worldLightDir);
diff=0.5*diff+0.5;

如果这时候我们直接乘上_LightColor0.rgb与_Diffuse就可以直接获得我们的半兰伯特漫反射模型。但因为这个案例中我们需要进行阴影的计算，我们来引入一个新的宏UNITY_LIGHT_ATTENUATION(atten,i,i.worldPos)这个宏可以帮我们计算阴影的衰减，atten不用声明，这个宏会自动声明，第二个参数是前面结构体所取得的阴影坐标，用来计算阴影值，后面的是在世界空间坐标系啊的坐标，用来计算光源下的坐标。

UNITY_LIGHT_ATTENUATION(atten,i,i.worldPos);

我们再将其得到的atten与半兰伯特公式相乘，得到其阴影部分的阴影衰减。

diff=(0.5*diff+0.5)*atten;

在我们得到这个阴影衰减后可以用一张渐变图对其采样，这样我们在效果上可以实现渐变阴影的衰减，这时候我们在头部属性，增加_Ramp(“Ramp Texture”,2D)=”whiter”{}，并定义与之相对应的变量sampler2D _Ramp;float _Ramp_ST;

Shader"Custom/Toon-Shading"{
    Properties{
        ...
        _Ramp("Ramp Texture",2D)="white"{}
        ...
    }
    Subshader{
        ...
        sampler2D _Ramp;
        float _Ramp_ST;
        ...

       fixed4 diffuse=_LightColor0.rgb*albedo*tex2D(_Ramp,float2(diff,diff)).rgb;

这样我们的漫反射部分就已经结束了。

接着我们进行高光部分的编写，我们来回顾一下，Blinn-Phong的公式

specular=C_light*M_diffuse*max(0,n*halfDir)^^Gloss 然后我们改进后的一部分公式smoothstep(-w,w,spec-a)，其中w是我们通过fwidth函数实现的，而fwidth这个函数在CG语言中的含义如下：fwidth — return the sum of the absolute value of derivatives in x and y 意思是返回x，y中导数绝对值的和，但我们只需要临近像素之间的近似导数值，而高光部分我们只需要如此计算：fixed w=fwidth(dot(worldNormal,halfDir))*2则可

所以这部分代码如下

fixed w=fwidth(dot(worldNormal.halfDir))*2.0;
fixed3 specular=_Specular.rgb*lerp(0,1,smoothstep(-w,w,spec+_SpecularScale-1));

这部分为什么没有乘以_LightColor0.rgb呢，因为在卡通渲染的过程，我们希望高光部分不被环境光打扰，但如果你有这部分需求也能乘，但我试过，效果不是那么好，高光部分容易被干扰，从而达不到应有的效果。但如果你这时候你运行代码的时候，将_SpecularScale拉到0你会发现还会有高光反射的光照，这时候该怎么办呢，其实很简单直，运用我们的step函数将_SpecularScale与一个极小的值进行比较，当_SpecularScale等于0的时候返回0，修改过后的高光部分的代码如下

fixed3 specular=_Specular.rgb*lerp(0,1,smoothstep(-w,w,spec+_SpecualrScale-1))*step(0.00001,_SpecularScale);

如此我们边完成了高光部分的代码工作，最后我们将环境光、漫反射、高光相加就可以了，如果你要实现自发光的效果，可以直接定义一个_Emission的Color，然后与结果的和相乘便能达到效果。

Shader "Custom/Toon-ShadingShader2"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _Specular("Specular Color",Color)=(1,1,1,1)
        _SpecularScale("Specular Scale",Range(0,0.1))=0.1
        _Outline("Outline Size",Range(0,1))=0.5
        _OutlineColor("Outline Color",Color)=(1,1,1,1)
        _MainTex("Main Tex",2D)="white"{}
        _Ramp("Ramp Texture",2D)="white"{}
    }
    SubShader
    {
        Tags{"RenderType"="Opaque"  "Queue"="Geometry"}
        
        Pass{
            
            
            NAME "OUTLINE"
            Cull Front
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag 
            #include "Lighting.cginc"
            #include "UnityCG.cginc"
            float _Outline;
            fixed4 _OutlineColor;
            struct a2v{
               float4 vertex:POSITION;
               float3 normal:NORMAL;
            };
            struct v2f{
                float4 pos:SV_POSITION;
                
            };
            v2f vert(a2v v){
                v2f o;
                float4 pos=UnityObjectToClipPos(v.vertex);
                float3 normal=mul((float3x3)UNITY_MATRIX_IT_MV,v.normal);
                normal.z=-0.5;
                pos=pos+float4(normalize(normal),0)*_Outline;
                o.pos=mul(UNITY_MATRIX_P,pos);
                return o;
                
            }
            fixed4 frag(v2f i):SV_TARGET{
                return float4(_OutlineColor.rgb,1.0);
            }
            
            ENDCG
        }
        Pass{
            Tags{"LightMode"="ForwardBase"}
            Cull Back
            CGPROGRAM
            #pragma vertex vert 
            #pragma fragment frag 
            #pragma multi_compile_fwdbase
            #include "UnityCg.cginc"
            #include "Lighting.cginc"
            #include "AutoLight.cginc"
            #include "UnityShaderVariables.cginc"
            fixed4 _Color;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Specular;
            fixed _SpecularScale;
            sampler2D _Ramp;
            float _Ramp_ST;
            
            struct a2v{
                float4 vertex:POSITION;
                float3 normal:NORMAL;
                float4 texcoord:TEXCOORD0;
                
            };
            struct v2f {
                float4 pos:SV_POSITION;
                float2 uv:TEXCOORD0;
                float3 worldNormal:TEXCOORD1;
                float3 worldPos:TEXCOORD2;
                SHADOW_COORDS(3)
           };
           
            v2f vert(a2v v){
                v2f o;
                o.pos=UnityObjectToClipPos(v.vertex);
                o.uv=TRANSFORM_TEX(v.texcoord,_MainTex);
                o.worldNormal=UnityObjectToWorldNormal(v.normal);
                o.worldPos=mul(unity_ObjectToWorld,v.vertex).xyz;
                TRANSFER_SHADOW(o);
                return o;
            }
           
            
            fixed4 frag(v2f i):SV_TARGET{
                fixed3 worldNormal=normalize(i.worldNormal);
                fixed3 worldLightDir=normalize(UnityWorldSpaceLightDir(i.worldPos));
                fixed3 worldViewDir=normalize(UnityWorldSpaceViewDir(i.worldPos));
                fixed3 halfDir=normalize(worldLightDir+worldViewDir);
                
                fixed3 tex=tex2D(_MainTex,i.uv);
                fixed3 albedo=tex.rgb*_Color.rgb;
                fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz*albedo;
                fixed diff=dot(worldNormal,worldLightDir);
                UNITY_LIGHT_ATTENUATION(atten,i,i.worldPos);
                diff=(diff*0.5+0.5)*atten;
                fixed3 diffuse=_LightColor0.rgb*albedo*tex2D(_Ramp,float2(diff,diff)).rgb;
                fixed w=fwidth(dot(worldNormal,halfDir))*2.0;
                fixed3 specular=_Specular*lerp(0,1,smoothstep(-w,w,dot(worldNormal,halfDir)+_SpecularScale-1))*step(0.0001,_SpecularScale);
                return fixed4 (ambient+diffuse+specular,1.0);
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

以上就是我们的完整代码了。这部分如何再shadergraph中实现，我明天摸鱼的时候再弄吧。昨天测试了下代码，发现轮廓线有问题，我怀疑是描边pass 的法线的锅，果不出其然，在debug的过程中，发现是unityObjectToClipPos这个内置函数的锅将其换成原先老版的矩阵变换mul((float3x3)UNITY_MARITX_MV,v.vertex)这个是老版的矩阵转换，作用是将顶点坐标转换至裁剪空间内，更新后这个内置矩阵被UnityObjectToClipPos(v.vertex)给取代。具体为何会出现这个情况，有待进一步的分享。

在制作shadergraph的时候再将我们的custom function的代码优化一下。

void LWRPLightingFunction_float (float3 ObjPos, out float3 Direction, out float3 Color, out float ShadowAttenuation )
{
   #ifdef LIGHTWEIGHT_LIGHTING_INCLUDED
   #define LIGHTWEIGHT_LIGHT_INCLUDE
      //Actual light data from the pipeline
      Light light = GetMainLight(GetShadowCoord(GetVertexPositionInputs(ObjPos)));
      Direction = light.direction;
      Color = light.color;
      ShadowAttenuation = light.shadowAttenuation;
      
   #else
   
      //Hardcoded data, used for the preview shader inside the graph
      //where light functions are not available
      Direction = float3(-0.5, 0.5, -0.5);
      Color = float3(1, 1, 1);
      ShadowAttenuation = 0.4;
      
   #endif
}

之前的CG代码与HLSL很类似，所以相当于平铺直叙。将此代码直接复制到txt中然后改文件后缀为hlsl，添加到场景资源中。

创建我们的custom function，这里要注意两个点，首先是Name这里要与代码中的函数名一样，然后输出的三个参数的上下顺序应该与函数中的三个顺序相同，且命名相同。

1.Blinn-Phong高光模型结合漫反射

前文所写的基本是比较基础的光照模型，有点没意思，我们这次来整点花货，前几年比较流行的卡通材质。首先我们要了解一下卡通材质是与之前的漫反射光照模型不同，卡通材质的光照模型主要是基于色调的光照模型，通过用漫反射系数对纹理进行一张张的采样，来控制漫反射的色调。高光处，我们用一块明显的纯色区域来表示。这时我们需要用到一个高光模型Blinn-Phong模型。除了这些，卡通渲染最具代表性的就是他明显的轮廓线。为了实现这种轮廓线，我们有几种方法，最常用的是通过两个PASS来分别渲染，一个PASS只渲染背面并便宜发现来得到轮廓选，而另外一个只需要渲染正面。

首先我们先了解一下高光模型，传统的高光模型公式如下

这个模型跟我上一节所学的漫反射光照模型有点类似，m_specular 是高光区域的颜色，v是视觉方向，r是反射方向m_gloss是高光系数，系数越大则亮度越小。当我们获取r的时候，需要通过物体表面的法线单位向量与光源的单位向量通过计算得到

我们的计算公式如下

如此我们便可以计算高光反射部分。

在这之后，Blinn提出了一个简单的方案来修改这个模型，他提出了一个向量h，他是通过v与l取平均然后归一化后得到的

修改过后的Blinn-Phong高光模型

我们分别来在程序代码中实现这两个高光光照模型。

漫反射部分与上篇类似，这边重点说下高光的代码

fixed3 reflectDir=normalize(reflect(-worldLightDir,worldNormal));
fixed3 viewDir=normalize(_WorldSpaceCammeraPos.xyz-unity_ObjectToWorld(v.vertex).xyz);

这里我们介绍下reflect函数，reflect（i,n），i是指入射方向，n是指法线方向，其中的参数类型可以是float,float2,float3，这里我们通过对光源方向取反，得到他的入射方向，这里取反的原因是，在我们用_WorldSpaceLightPos0这个函数来取得光源方向的时候，他是基于物体的表面反射而得到的值，所以在用入射光源的方向的时候，只需要取反就可以了。worldNormal则是正常通过mul（v.normal,(float3x3)unity_WorldToObject)来计算，这里我们得到的v.normal是基于物体坐标所得到的法线向量，我们用法线空间转换矩阵进行反乘，就能够得到在空间中的法线坐标，同样，法线是一个xyz向量，我们只需要去矩阵的前三行前三列就可以了，然后进行归一化。这里我提一下viewDir的计算过程，简单的来说就是空间相机坐标减去物体坐标，如果不够具象化，我们画一下就能够非常清晰的理解这个几何意义，

其中向量C是空间相机坐标，向量O是空间物体坐标，两个相减，就得到了向量V，也就是我们的视角向量，在对他进行归一化。有了这两个值，我们就可以进行高光的代码编写了

fixed3 specular=_LightColor0.rgb*_Specular.rgb*pow(saturate(dot(viewDir,reflectDir)),_Gloss)；

之后再加上我们上篇所得到diffuse与ambient就能得到一个完整的Phong-高光模型的漫反射模型。

Shader "Custom/DiffuseShader"
{
    Properties
    {
        _Diffuse("Diffuse Color",Color)=(1,1,1,1)
        _Specular("Specular Color",Color)=(1,1,1,1)
        _Gloss("Gloss",Range(8,255))=20
    }
    SubShader
    {
        pass{
            Tags{"LightModel"="ForwardBase"}
            CGPROGRAM
            
            #pragma vertex vert
            #pragma fragment frag
            #include "Lighting.cginc"

            fixed4 _Diffuse;
            fixed4 _Specular;
            float _Gloss;

            struct a2v{
                float4 vertex : POSITION;
                float3 normal : NORMAL;

            };

            struct v2f{
                float4 pos:SV_POSITION;
                float3 color:COLOR;
            };

            v2f vert(a2v v){
                v2f o;
                o.pos=UnityObjectToClipPos(v.vertex);

                fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz;

                fixed3 worldNormal=normalize(mul(v.normal,(float3x3)unity_WorldToObject));

                                fixed3 worldLightDir=normalize(_WorldSpaceLightPos0.xyz);

                fixed3 lightNormal=normalize(_WorldSpaceLightPos0);

                fixed3 diffuse=_LightColor0.rgb*_Diffuse.rgb*saturate(dot(worldNormal,lightNormal));

                fixed3 reflectDir=normalize(reflect(-WorldLightDir,worldNormal));

                fixed3 viewDir=normalize(_WorldSpaceCameraPos.xyz-unity_ObjectToWorld(v.vertex).xyz);

                fixed3 specular=_LightColor0.rgb*_Specular*pow(saturate(dot(viewDir,reflectDir)),_Gloss);
                
                
                o.color=ambient.rgb+diffuse.rgb+specular;



                return o;
            }

            fixed4 frag(v2f i):SV_TARGET{
                return fixed4(i.color,1.0);
            }


            ENDCG
        }
    }
    FallBack "Diffuse"
}

至此我们得到了一个基于phong高光模型的漫反射模型。

同理，我们将Blinn-Phone高光模型进行代码化，首先我们需要什么？再来看一下我们的Blinn-Phong模型公式

n是物体表面法线向量，h是新定义的光源向量与视觉方向取平均后的归一化。在代码中我们可以直接将worldLightDir与viewDir相加然后进行归一化计算就行了。所以这Blinn-Phong的高光部分如下代码呈现

fixed3 viewDir=normalize(_WorldSpaceCameraPos.xyz-unity_ObjectToWorld(v.normal).xyz);
fixed3 halfDir=normalize(worldLightDir,viewDir);

得到这两个参数我们就可以直接套用公式来计算高光部分了

fixed3 diffuse=_LightColor0.rgb*_Specular*pow(max(0,dot(worldNormal,halfDir)),_Gloss);

所以我们的Blinn-Phong高光漫反射模型圆满了。下面是我们的完整代码：

Shader "Custom/Blinn-PhongSpecularDiffuseShader"
{
    Properties{
        _Diffuse("Diffuse Color",Color)=(1,1,1,1)
        _Specular("Specular Color",Color)=(1,1,1,1)
        _Gloss("Gloss",Range(8,255))=20
    }

    SubShader{
        Pass{
            Tags{"LightMode"="ForwardBase"}

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "Lighting.cginc"

            fixed4 _Diffuse;
            fixed4 _Specular;
            float  _Gloss;

            struct a2v{
                float4 vertex:POSITION;
                float3 normal:NORMAL;

            };

            struct v2f{
                float4 pos:SV_POSITION;
                fixed3 color:COLOR;
            };

            v2f vert(a2v v){
                v2f o;
                o.pos=UnityObjectToClipPos(v.vertex);

                fixed3 worldNormal=normalize(mul(v.normal,(float3x3)unity_WorldToObject));

                fixed3 lightDir=normalize(_WorldSpaceLightPos0.xyz);

                fixed3 diffuse=_LightColor0.rgb*_Diffuse*saturate(dot(worldNormal,lightDir));

                fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz;

                fixed3 viewDir=normalize(_WorldSpaceCameraPos.xyz-UnityObjectToWorld(v.normal).xyz);

                fixed3 halfDir=normalize(lightDir+viewDir);

                fixed3 specular=_LightColor0.rgb*_Specular*pow(max(0,dot(worldNormal,halfDir)),_Gloss);

                o.color=ambient+diffuse+specular;

                return o;

            }

            fixed4 frag(v2f i):SV_TARGET{


                return fixed4(i.color,1.0);
            }



            ENDCG




        }

    }

    FallBack "Diffuse"
}

以上是我们完整的Blinn-Phong高光漫反射模型，但注意，这部分代码我们是在顶点着色器中所实现的，在片元着色器中如何实现网上有挺多的资料的，这里就不在赘述，原理跟这个差不多，只是在片元着色器中少了一步世界坐标下的物体法线反转换。

在ShaderGraph与UE4中如何实现BlinnPhong高光漫反射模型。由于时间太晚了。先睡一觉。。。。。明天看看能不能在摸鱼的时候做成。。。

这是上午的摸鱼成果。需要注意的是shadergraph可以直接获取viewDirection，而不必像上述代码那样通过_WorldSpaceCameraPos.xyz-unity_ObjectToWolrd(v.normal).xyz 来获取，其他的思路跟代码思路一样，就不再赘述。

在构建这个shader之前，我们需要知道一个定律，兰伯特定律（Lambert’s low）:反射光线的强度与表面法线和光源方向之间的夹角的cos成正比，因此漫反射的计算公式如下

n是表面法线，l是光源的单位矢量，max（0，n·l）是取0，n·l中的最大值，c_light 是光源颜色，m_diffuse 是材质的漫反射颜色。

所以当我们要计算漫反射的颜色的时候，我们需要4个参数，物体的表面法线、光源的单位矢量、光源颜色与材质的漫反射颜色。由于本章所编写的是默认光线下的光照模型，所以只进行单一光照的计算，而表面法线与光源的单位矢量可以通过计算取得，所以我们只需定义表面漫反射的颜色即可。所以在属性声明中只需要进行漫反射颜色的定义。以下是我的shader代码。

Shader "Custom/DiffuseShader"
{
    Properties
    {
        _Diffuse("Diffuse Color",Color)=(1,1,1,1)
    }
    SubShader
    {
        pass{
            Tags{"LightModel"="ForwardBase"}
            CGPROGRAM
            
            #pragma vertex vert
            #pragma fragment frag
            #include "Lighting.cginc"

            fixed4 _Diffuse;

            struct a2v{
                float4 vertex : POSITION;
                float3 normal : NORMAL;

            };

            struct v2f{
                float4 pos:SV_POSITION;
                float3 color:COLOR;
            };

            v2f vert(a2v v){
                v2f o;
                o.pos=UnityObjectToClipPos(v.vertex);

                fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz;

                fixed3 worldNormal=normalize(mul(v.normal,(float3x3)unity_WorldToObject));

                fixed3 lightNormal=normalize(_WorldSpaceLightPos0);

                fixed3 diffuse=_LightColor0.rgb*_Diffuse.rgb*saturate(dot(worldNormal,lightNormal));

                o.color=ambient.rgb+diffuse.rgb;

                return o;
            }

            fixed4 frag(v2f i):SV_TARGET{
                return fixed4(i.color,1.0);
            }


            ENDCG
        }
    }
    FallBack "Diffuse"
}

我们继续来逐行翻译，因为我们只是编写了一个漫反射模型，所以暂时不对贴图进行采样。我们在属性中只添加了一个颜色属性所对应的是漫反射颜色。

我们在进行漫反射计算的时候要正确的设置LightMode才能得到我们接下来需要用到的_LightColor0这个内置变量，LightMode指的是灯光的渲染路径，而ForwardBase则是设置灯光的渲染路径的一个标签，它决定了渲染器如何渲染灯光，其他的还有ForwardAdd等标签。接着就是正常的框架搭建，不在赘述，但我们这里运用到了一个头文件”Lighting.cginc”，该头文件主要是有一些内置的函数可以直接供我们调用，比如之前所说的_LightColor0这个变量。

fixed4 _Diffuse;

_Diffuse是颜色属性，我们按照惯例直接定义成fixed4类型。

我们从顶点着色器开始，首先编写结构体a2v，我们要想一想要构建漫反射模型需要从我们的顶点数据中取得什么数据？顶点位置自然不必多说，我们来回顾一下Lambert定律C_diffuse =L_color *M_diffuse *max(0,n*l)。环境光我们可以通过内置函数得到，漫反射材质的颜色由我们的意愿控制，剩下的就是表面法线与光的单位向量了。而光的单位向量我们可以通过Unity内置的函数取得，而表面法线则需要与顶点进行交互才能够取得所以，我们这里又用到一个语义：NORMAL，获取顶点的法线信息，所以我们的结构体如下

Struct a2v{
    float4 vertex:POSITION;
    float3 normal:NORMAL;
};

我们将NORMAL语义所取得的顶点法线信息存储在normal这个变量中，又因为法线是一个只包含XYZ的向量信息，所以我以float3来进行定义。

下面我们来构建顶点着色器，

v2f vert(a2v v){
    v2f o;
    o.pos=UnityObjectToClipPos(v.vertex);
    ...
}

v2f 定义了我们的输出参数是o，之后的就是一般设置。顶点的法线信息是基于模型坐标的，所以我们首先将其变换到空间坐标中，这里需要将顶点的法线与变换矩阵unity_WorldToObject（老版本为：_World2Object）进行mul计算,之后将其归一化，所以我们这么写

fixed3 worldNormal=normalize(mul(v.normal,unity_WorldToObject));

注意，这么些对么？首先法线是一个三维矢量，而我们的unity_WorldToObject则是一个4X4的矩阵，所以我们在进行变换的时候只需要截取前三行与前三列就行了，修改过后的代码

fixed3 worldNormal=normalize(mul(v.normal,(float3x3)unity_WorldToObject));

这样我们就得到了我们需要的n,接下来我们来进行l的计算，关于光源的方向我们可以直接使用内置函数_WorldSpaceLightPos0来取得，但请注意，这个函数只计算单一函数，所以在更复杂的光线中并不能计算出正真的光线信息，但在这个模型中是够用了。

fixed3 worldLight=normalize(_WorldSpaceLightPos0);

如此我们就得到了我们需要两个向量的归一化，worldNormal与worldLight，接着就很简单了，套入我们的Lambert定律就行了，再回一下Lambert定律：C_diffuse=L_color*M_diffuse*max(n,l)

fixed3 diffuse=_LightColor0.rgb*_Diffuse.rgb*saturate(worldNormal,worldLight);

至此，我们的漫反射计算结束，但整体的顶点着色器还没有完成，因为在考虑漫反射的时候不得不在意环境光。所以我们还需要调用一个内置函数UNITY_LIGHTMODEL_AMBIENT。

fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz;

我们得到了漫反射颜色与环境光，将其相加则是最终我们所得到的漫反射模型颜色，最后返回o就可以了。所以完整的顶点着色器如下

            v2f vert(a2v v){
                v2f o;
                o.pos=UnityObjectToClipPos(v.vertex);

                fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz;

                fixed3 worldNormal=normalize(mul(v.normal,(float3x3)unity_WorldToObject));

                fixed3 lightNormal=normalize(_WorldSpaceLightPos0);

                fixed3 diffuse=_LightColor0.rgb*_Diffuse.rgb*saturate(dot(worldNormal,lightNormal));

                o.color=ambient.rgb+diffuse.rgb;

                return o;
            }

恭喜，我们已经将最困难的部分完成了，接下来我们来编写片元着色器的结构体，首先我们跟之前一样，需要将裁剪过后的顶点坐标传输给pos，我们还仍需要顶一个color变量，color是作为o的输出与片元中的输入，我们可以赋予他COLOR，有些资料也可以赋予TEXCOORD0，这并不是写死的，可自由发挥，所以我们的结构体为

struct v2f{
    pos:SV_POSITION;
    color:COLOR;
};

接着是我们的片元着色器，这部分很简单，因为我们将所有的工作都在顶点着色其中做完了，所以直接输出顶点信息就可以了

fixed4 frag(v2f i):SV_Target{
    return fixed4 (i.color,1.0)
}

注意，由于我们在顶点着色器中输出的颜色是rgb是一个三位信息，所以我们添加个1.0将其补完。

至此，我们完成了我们整个的Lambert光照模型，下一节我们将结合贴图与这个模型进行一个带有漫反射性质的贴图模型。

接下来我们在shader graph实现这个漫反射模型

大体思路跟我们写代码的思路一样，但值得提的一点是shader graph中并没有默认光源位置的获取，所以我们要添加一个自定义节点来获取光的颜色以及矢量

#if SHADERGRAPH_PREVIEW
        Direction=half3(0.5,0.5,0); Color=1;
#else
        Light light=GetMainlight(); 
        Direction=light.direction; 
        Color=light.color;
#endif

在实际的制作过程中，这个代码非常常用，所以我直接贴出来吧。

接下来我们在UE4中复现我们的操作。SD主要是进行材质的编写，并不涉及管线的编写，所以这篇我们就略过了。

本节我们进行材质上最基本的贴图。也就是最常用的贴图材质编写。首先是unity shader的代码编写。

Shader"Custom/BaseTextureMatShader"
{
    Properties{
        _Color("Color Tint",Color)=(1.0,1.0,1.0,1.0)
        _MainTex("Main Texture",2D)="white"
    }
    Subshader{
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragmengt frag
            fixed4 _Color;
            sampler2D _MainTex;
            
            float4 vert(float4 pos:POSITION):SV_POSITION{
                return UnityObjectToClipPos(pos);
            }

            fixed4 frag(float2 uv:TEXCOORD0):SV_Target{
                return tex2D(_MainTex,uv);
             }
            
            ENDCG
        }
    }
    Fallback "Diffuse"
}

我们继续来逐行翻译，但也不必像之前那样逐行，我们只翻译类比上一篇代码中的不同部分。首先我们在Properties下增加了_MainTex这个属性，他的面板名称为“Main Tex”，属性是2D贴图，默认是白色。由于我们在这次shader中要调用_MainTex这个自定义属性，所以我们要在Pass中定义它为sampler2D。sampler2D是一个CG中的一中数据类型，主要是用来储存纹理信息的，常见的一般有sampler，sampler2D，samplerCUBE等。我们这里要定义_MainTex所以进行定义

sampler2D _MainTex;
fixed4 _Color;

然后我们正常定义顶点着色器于片元着色器的入口，一般我会直接定义

#pragma vertex vert
#pragma fragmengt frag

我们暂时先不管结构体struct的书写，根据上篇的内容我们应该直接进行顶点着色器的编写，我们顺着这个思路走

float4 vert(float4 vertex:POSITION):SV_POSITION{
    return UnityObjectToClipPos(vertex);
}

这部分跟上篇一样，我们略过翻译，接着我们开始写本篇的新内容，纹理贴图。_MainTex,

fixed4 frag( float2 uv:TEXCOORD0):SV_Target{
    return tex2D(_MainTex,uv);
}

这部分，已经有了区别，首先我们的片元着色器需要输入渲染pipline中三角形遍历后所产生的UV，又因为UV只是一个二维坐标，所以以float2来定义，而TEXCOORD0则是将第一套纹理指定给UV这个参数，让其获得上一步片元坐标参数。之后我们在函数中返回的是一个tex2D的值，tex2D是一个对纹理采样的值，他的第一个参数是需要被采样的值，第二个参数是一个float2的纹理坐标。所以这个过程等于在像素点上进行点对点的涂色。所以按照上一篇的思路，我们的texture shader应该是如下

Shader"Custom/textureShader"{
    Properties{
        _MainTex("Main Tex",2D)="white"{}
        _Color("COlor Tint",Color)=(1,1,1,1)
    }
    Subshader{
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            fixed4 _Color;
            sampler2D _MainTex;

            float4 vert (float4 vertex:POSITION):SV_POSITION{
                return UnityObjectToClipPos(vertex);
            }

            fixed4 frag(float2 uv:TEXCOORD0):SV_Target{
                return tex2D(_MainTex,uv);
            }

            ENDCG
        }

    }
    Fallback "Diffuse"
}

这个shader在unity中没有报错，但呈现的效果不是我们想要的。

但这个错误只在5.6之后的版本有，5.6之前的没有，只能说是更新错误的锅，有一种解释是，5.6更新之后一个特性是不能直接在vertex的函数中获取POSITION再返回，必须要从结构体中获取再返回，但我试了试这种说法，依然不行，应该是在vertex与fragment中同时又相同的UV的坐标返回才能有正常的结果，也就是说vertex与fragment中的uv应当匹配才能有正确的结果，所以我们进行结构体的编写，这部分编写与C语言很相似首先是顶点着色器的输入结构体，首先我们要从顶点数据中获得两个数据，一个是我们一定要的顶点坐标，也就是POSITION，另外一个是顶点的UV坐标也就是说基于模型本身参考系的UV坐标进行转换成我们需要的基于摄像机的UV坐标，所以我们第一个结构体可以这么写

struct a2v{
        float4 vertex:POSITION;
        float2 uv:TEXCOORD0;
};

写完了结构体，我们可以在vertex中直接调用这个结构体作为输入

v2f vert(a2v v):SV_POSITION{
    v2f o;
    o.vertex=UnityObjectToClipPos(v.vertex);
    o.uv=v.uv;
    return o;
}

当我们进行带有结构体的顶点着色器的编辑的时候，由于输出的并不一定是同一类型的数据，所以我们不会在函数上进行输出定义，我们输出的更多是一个带有多种属性的参数，一般我们就用o来作为顶点着色器的输出参数。所以这个顶点着色器的输入是参数v，v的数据从渲染pipline的顶点数据取得。v2f o;中的v2f 也是CG中的语句，意思是vertex to fragment 将顶点着色器中的数据传输到片元着色器中，相当于一个参数定义，将输出的参数暂时先储存在o下面。而o.uv=v.uv就是字面意义的坐标传输。

接着我们来定义fragment的结构体，我们从顶点着色器拿到了什么？变换后的顶点坐标与uv坐标，那我们要输出什么，顶点坐标不用变换，但我们需要输出的是一张我们准备好的自定义贴图而不是单纯的uv坐标，所以我们要用我们准备好的_MainTex匹配所得到的uv坐标，通俗的讲就是用贴图，点对点的进行每一个像素的颜色填充。所以我们首先定义结构体

struct v2f{
    float4 pos:SV_POSITION;
    float2 uv:TEXCOORD1;
};

我们将裁剪后的顶点数据给到pos，第二套纹理坐标给到uv作为fragment的输入。之后我们片元着色器的输出依旧是fixed4颜色，但这里我们将用tex2D函数进行对坐标的填充。

fixed4 frag(v2f i):SV_Target{
    return tex2D(_MainTex,i.uv)
}

结合上文，我们的完整代码应该是如下

Shader"Custom/textureShader"{
	Properties{
		_MainTex("Main Tex",2D) = "white"{}
		_Color("COlor Tint",Color) = (1,1,1,1)
	}
		Subshader{
			Pass{
				CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag

				fixed4 _Color;
				sampler2D _MainTex;

				struct a2v {
					float4 vertex:POSITION;
					float4 uv:TEXCOORD0;
				};

				struct v2f {
					float4 pos:SV_POSITION;
					float2 uv:TEXCOORD1;
				};

				v2f vert(a2v v):SV_POSITION {
					v2f o;
					o.pos = UnityObjectToClipPos(v.vertex);
					o.uv = v.uv;
					return o;
				}

				fixed4 frag(v2f i) :SV_Target{
					return tex2D(_MainTex,i.uv);
				}

				ENDCG
			}

		}
			Fallback "Diffuse"
}

但别急得激动，因为这个代码会报错，他给的报错信息应该是

invalid output semantic 'SV_POSITION': Legal indices are in [0,0]

错误是在SV_POSITION这个语义上，我们再次理解下这个语义，SV_POSITION是裁剪之后的空间顶点坐标，这个信息我们应该存储在了struct v2f这个结构体的pos之中，而这个结构体已经在frag作为输入中输出了这个顶点间坐标，而v2f vert(a2v v)所输出的也并不是仅仅的空间坐标，在这其实把SV_POSITION删除是一个正确的选项。所以修改之后的代码是

Shader"Custom/textureShader"{
	Properties{
		_MainTex("Main Tex",2D) = "white"{}
		_Color("COlor Tint",Color) = (1,1,1,1)
	}
		Subshader{
			Pass{
				CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag

				fixed4 _Color;
				sampler2D _MainTex;

				struct a2v {
					float4 vertex:POSITION;
					float4 uv:TEXCOORD0;
				};

				struct v2f {
					float4 pos:SV_POSITION;
					float2 uv:TEXCOORD1;
				};

				v2f vert(a2v v){
					v2f o;
					o.pos = UnityObjectToClipPos(v.vertex);
					o.uv = v.uv;
					return o;
				}

				fixed4 frag(v2f i) :SV_Target{
					return tex2D(_MainTex,i.uv);
				}

				ENDCG
			}

		}
			Fallback "Diffuse"
}

至此，我们在unity shader的编写结束。

我们接着在shader graph中实现我们的贴图效果

需要注意的是如果我们直接创建texture节点是不能直接拖入Albedo的输入的，在shader graph中需要像上面的shader代码一样，进行一个纹理值的采样才能正常输入albedo。所以我们要将texture节点作为输入连接sampler2D这个节点，然后再将sampler2D这个节点的输出作为albedo的输入。

然后是我们再UE4中的材质shader编写，在UE4的shader编辑中，他的texture sample节点会总动将纹理进行采样，所以我们只需要进行将texture sample的rgb节点连接到basecolor就能将纹理输出

SD中进行纹理贴图与UE4中相似，但贴图节点的名称为bitmap。

bitmap主要存储的是一个rgba的像素组，但SD作为一个造轮子的软件，他的材质不需要对geometry负责，所以一般不会在SD中进行使用贴图，也有其他的情况需要进行赋予贴图，这里不再赘述。

一个仅仅是表现rgb的shader

一个简单的rgb颜色的渲染

Shader "Custom/RgbShader"
{
    Properties
    {
        _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
    {
        Pass
		{
			CGPROGRAM
 
			#pragma vertex vert
			float4 vert(float4 pos:POSITION):POSITION
			{
			return UnityObjectToClipPos(pos);
			}

			#pragma fragment frag
			fixed4 frag():COLOR
			{
				return fixed4(1,0,0,1);
			}
			ENDCG
		}
    }
    FallBack "Diffuse"
}

逐行翻译一下，

首先Shader”Custom/RgbShader”这个是此shader的名称及再unity 的内部路径，名字叫“RgbShader”存储在Custom下

其次Properties是该shader能在unity右边功能栏能显示的属性，以下划线“_”开头”_Name”能够在此shader中直接定义然后调用，”(…)”中是他的面板名称与属性，比如_Color(“Color Tint”,Color)就可以翻译成_Color这个属性在unity的功能面板中的名字为”Color Tint”，该属性的属性是“Color”这个Color是内置的一个属性代表颜色，一般是fixed4，储存了R、G、B、A这四种属性。但在用的时候可能就用R,G,B这三个。”=”赋值后面的是默认值。

所以shader代码的开头一般为这样

Shader"Custom/ShaderName"
    Properties{
        _Color{"Color",Color}=(1,1,1,1)
        ...
    }

然后就是我们的Subshader。在unity调用一个shader的时候会扫描该shader下的所有subshader然后选择一个能够在该平台下运行的subshader，如果没有的话会调用Fallback之后语义定义的一个内置的shader来达到降级运行的效果。如果不想调用的话，直接添加Off关闭就行了(Fallback Off)。本shader的降级选项是”Diffuse”这个内置shader。所以一个shader必包含至少一个subshader。而subshader中一定包含起码一个Pass（注意这个Pass必须第一个字母大写），因为Pass语句定义了一次完整的渲染过程。在subshader中可以有多个Pass。而有些shader中无Pass，就比如新建的默认standard surface shader，他其中就没有Pass这个语句，因为他在下面的#pragma surface surf Standard fullfowardshadows,进行了一次内置的渲染过程，这个是shaderlab中的默认语句，在编写hlsl时仍需要完整的写出来。所以，添加了这些之后的shader应该是这样的

Shader"Custom/ShaderName"
        Properties{
            _Color("Color",Color)=(1,1,1,1)
        }
        Subshader{
            Pass{
            }
        }
        Fallback "Diffuse"

这样，我们一个基本的shader大框架就搭建完毕了。

然后是CGPROGRAM，这个语句是一个组合，有CGPROGRAM一定有一个ENDCG。这个语句表示这一区域的代码适用于CG语言。当然unity支持opengl与hlsl这两种GPU语言，所以亦可以是HLSLPROGRAM 与 ENDHLSL来组合，这样就告诉编译器，这篇代码是用hlsl来编写的。添加上这部分的代码我们的框架又充实了一点。如下呈现

Shader"Custom/ShaderName"
      Properties{
          _Color("Color",Color)=(1,1,1,1)
          ...
      }
      Subshader{
            Pass{
                 CGPROGRAM
                 ...
                 ENDCG
            }
      }
      Fallback "Diffuse"

如此我们就可以正式的用CG语言编写我们的shader代码了。

#pragma vertex vert

这行代码#pragma是编译指令，告诉编译器我要编译什么函数，在shader中可以编译的一般只有两种着色器，顶点与片元。所以#pragma vertex vert就是告诉编译器我要将vert函数编译成顶点着色器。同理编译片元着色器就是#pragma fragment frag。这样就可以继续丰富我们的代码了。

Shader"Custom/ShaderName"
      Properties{
          _Color("Color",Color)=(1,1,1,1)
          ...
      }
      Subshader{
            Pass{
                 CGPROGRAM
                 #pragma vertex vert
                 #pragma fragment frag
                 ...
                 ENDCG
            }
      }
      Fallback "Diffuse"

然后我们来编写我们的顶点着色器

float4 vert(float4 pos:POSITION):SV_PSOITION{
}

这其中float4其实是一个数组定义，定义了vert这个函数的返回值是一个1X4的数组，每个数的类型是float，（）中的float4 pos:POSITION是获取目标的顶点位置作为输入，其中POSITION是一个语义绑定的概念，这个概念相当于告诉unity讲模型的顶点坐标填充到pos这个参数pos中，而SV_POSITION则告诉unity，输出是裁剪空间的顶点坐标，类型就是我们在函数一开始定义的float4。如果没有这些语义的话，unity不知道用户的输入与输出。由于这个着色器是一个很简单的着色器，所以就包含了一行代码。

return UnityObjectToClipPos(pos);

UnityObjectToClipPos（）是新版unityshader的内置函数，作用就是相当于原来之前的mul(UNITY_MATRIX_MVP,pos);矩阵变换 。该矩阵变换是将当前的模型的顶点/方向矢量从模型空间变换到裁剪空间。所以完整的顶点着色器的代码如下。（mul是multiple的缩写，在这指乘法）

float4 vert(pos:POSITION):SV_POSITION{
    return UnityObjectToClipPos(pos);
}

同理我们也可以定义片元着色器的函数

fixed4 frag():SV_Target{
    return fixed4 color=(1.0,0.0,0.0,1.0);
}

在这个案例中由于frag函数没有任何输入，输出是一个fixed4的变量，这里就直接输出一个颜色。其中SV_Target也是一个语义绑定。这个属于HLSL中的一个系统语义，相当于告诉渲染器，把用户的输出颜色储存到一个渲染目标（render target）中，这里将默认储存到帧缓存中。

Shader"Custom/RGBShader"
{
        Properties{
            _Color("Color Tint",Color)=(1.0,1.0,1.0,1.0)
        }
        Subshader{
            Pass{
                  CGPROGRAM
                  #pragma vertex vert
                  #pragma fragment frag
                  
                  float4 vert(float4 pos:POSITION):SV_POSITION{
                          return UnityObjectToClipPos(pos);
                  }

                  fixed4 frag():SV_Target{
                          return fixed4 (1.0,0.0,0.0,1.0);
                  }

                  
                  ENDCG
            }
        }
    Fallback "Diffuse"
}

我们如何在shader graph中实现这个代码效果呢，其实很简单

创建一个”Color”标签，然后将他连接到Albedo就可以得到预期的效果。

连接一个color 节点就行了。

可我们在UE4的shader节点编辑器里面，也一样，但UE4中暂时没找到像shader graph那样的直接的颜色标签，他以另一种形式呈现，”Constant”是一个常量标签，有4种形式，constant 1是一个一维常量值，在颜色部分仅表示黑白，但他又是浮点数的形式，所以还可以表达灰色这种中间色。constant 2是一个二维的向量表达，但在颜色这里仅有R、G属性，constant 3就是我们这里用的R、G、B颜色表达。所以本例中要表现红色的表面，我们可以直接进行一个“1.0，0.0，0.0”的颜色输出。constant4，就是我们上面shader所写的RGBA的一个表达。

而在substance design（以后简称SD），中他的表达方式更加直接，可以直接添加Uniform Color标签然后添加到Base Color的输出。

到此，我们第一个基础的颜色表达已经完成。