Unity3D Shader编程】之十三 单色透明Shader & 标准镜面高光Shader

本系列文章由@浅墨_毛星云 出品，转载请注明出处。  
文章链接： http://blog.csdn.net/poem_qianmo/article/details/50878538
作者：毛星云（浅墨）    微博：http://weibo.com/u/1723155442
本文工程使用的Unity3D版本： 5.2.1 

 

 

本次更新放出的Shader为透明系列的3个Shader和标准的镜面高光Shader的两个Shader。由易到难，由入门级到应用级，难度梯度合理。

依然是先放出游戏场景的exe和运行截图。

 

 

本期用的模型为妙蛙草。

 

【可运行的本文配套exe游戏场景请点击这里下载】

 

 

 

OK，直奔主题吧。

 

 

 

一、单色透明Shader

在上篇文章中单色透明的基础上进行改造，加入alpha混合，构成了这篇文章的第一个Shader——单色透明Shader。具体代码如下：

 

 //透明单色Shader


 Shader "浅墨Shader编程/Volume13/1.SimpleAlphaShader"
 {
     //------------------------------------【唯一的子着色器】------------------------------------
     SubShader
     {
         //设置Queue为透明，在所有非透明几何体绘制之后再进行绘制
         Tags{ "Queue" = "Transparent" }

         Pass
         {
             //不写入深度缓冲,为了不遮挡住其他物体
             ZWrite Off

             //选取Alpha混合方式
             Blend  SrcAlpha SrcAlpha
             //Blend SrcAlpha OneMinusSrcAlpha

             //===========开启CG着色器语言编写模块============
             CGPROGRAM

             //编译指令:告知编译器顶点和片段着色函数的名称
             #pragma vertex vert
             #pragma fragment frag

             //--------------------------------【顶点着色函数】-----------------------------
             // 输入：POSITION语义（坐标位置）
             // 输出：SV_POSITION语义（像素位置）
             //---------------------------------------------------------------------------------
             float4 vert(float4 vertexPos : POSITION) : SV_POSITION
             {
                 //坐标系变换
                 //输出的顶点位置（像素位置）为模型视图投影矩阵乘以顶点位置，也就是将三维空间中的坐标投影到了二维窗口
                 return mul(UNITY_MATRIX_MVP, vertexPos);
             }

             //--------------------------------【片段着色函数】-----------------------------
             // 输入：无
             // 输出：COLOR语义（颜色值）
             //---------------------------------------------------------------------------------
             float4 frag(void) : COLOR
             {
                 //返回单色
                 return float4(0.3, 1.0, 0.1, 0.6);
             }

             //===========结束CG着色器语言编写模块===========
             ENDCG
         }
     }
 }

将其施用于材质之上的效果如下：

 

实景效果如下：

 

二、颜色可以调版单色透明Shader

 

 

老规矩，让颜色可调，来一个Properties属性块，替换掉Hard encoding硬编码的颜色。所以，代码如下：

 

 //颜色可以调版单色透明Shader


 Shader "浅墨Shader编程/Volume13/2.ColorChangeAlpha"
 {
     //------------------------------------【属性值】------------------------------------
     Properties
     {
         //颜色值
         _ColorWithAlpha("ColorWithAlpha", Color) = (0.9, 0.1, 0.1, 0.5)
     }

     //------------------------------------【唯一的子着色器】------------------------------------
     SubShader
     {
         //设置Queue为透明，在所有非透明几何体绘制之后再进行绘制
         Tags{ "Queue" = "Transparent" }

         //--------------------------------唯一的通道-------------------------------
         Pass
         {
             //不写入深度缓冲,为了不遮挡住其他物体
             ZWrite Off

             //选取Alpha混合方式
             Blend  SrcAlpha SrcAlpha
             //Blend SrcAlpha OneMinusSrcAlpha

             //===========开启CG着色器语言编写模块============
             CGPROGRAM

             //编译指令:告知编译器顶点和片段着色函数的名称
             #pragma vertex vert
             #pragma fragment frag

             //变量声明
             uniform float4 _ColorWithAlpha;

             //--------------------------------【顶点着色函数】-----------------------------
             // 输入：POSITION语义（坐标位置）
             // 输出：SV_POSITION语义（像素位置）
             //---------------------------------------------------------------------------------
             float4 vert(float4 vertexPos : POSITION) : SV_POSITION
             {
                 //坐标系变换
                 //输出的顶点位置（像素位置）为模型视图投影矩阵乘以顶点位置，也就是将三维空间中的坐标投影到了二维窗口
                 return mul(UNITY_MATRIX_MVP, vertexPos);
             }

             //--------------------------------【片段着色函数】-----------------------------
             // 输入：无
             // 输出：COLOR语义（颜色值）
             //---------------------------------------------------------------------------------
             float4 frag(void) : COLOR
             {
                 //返回自定义的RGBA颜色
                 return _ColorWithAlpha;
             }

             //===========结束CG着色器语言编写模块===========
             ENDCG
         }
     }
 }

将其施用于材质之上的效果如下：

这边的调色板中，，除了RGB三色，还有Alpha值可以进行调节。

实景效果如下：

 

 

 

三、双面双色颜色可以调版透明Shader

 

我们可以利用Cull语句，分别在两个Pass中Cull Front和Cull Back，以让材质的正面和反面显示出不同的颜色。代码实现如下：

 //双面双色颜色可以调版透明Shader

 Shader "浅墨Shader编程/Volume13/3.TwoSideColorChangeAlpha"
 {
     //------------------------------------【属性值】------------------------------------
     Properties
     {
         //正面颜色值
         _ColorWithAlpha_Front("ColorWithAlpha_Front", Color) = (0.9, 0.1, 0.1, 0.5)
         //背面颜色值
         _ColorWithAlpha_Back("ColorWithAlpha_Back", Color) = (0.1, 0.3, 0.9, 0.5)
     }

     //------------------------------------【唯一的子着色器】------------------------------------
     SubShader
     {
         //设置Queue为透明，在所有非透明几何体绘制之后再进行绘制
         Tags{ "Queue" = "Transparent" }

         //------------------------【通道1：渲染正面】-------------------------
         Pass
         {
             //剔除背面，渲染正面
             Cull Back
             //不写入深度缓冲,为了不遮挡住其他物体
             ZWrite Off

             //选取Alpha混合方式
             Blend SrcAlpha OneMinusSrcAlpha
             //Blend  SrcAlpha SrcAlpha

             //===========开启CG着色器语言编写模块============
             CGPROGRAM

             //编译指令:告知编译器顶点和片段着色函数的名称
             #pragma vertex vert
             #pragma fragment frag

             //变量声明
             uniform float4 _ColorWithAlpha_Front;

             //--------------------------------【顶点着色函数】-----------------------------
             // 输入：POSITION语义（坐标位置）
             // 输出：SV_POSITION语义（像素位置）
             //---------------------------------------------------------------------------------
             float4 vert(float4 vertexPos : POSITION) : SV_POSITION
             {
                 //坐标系变换
                 //输出的顶点位置（像素位置）为模型视图投影矩阵乘以顶点位置，也就是将三维空间中的坐标投影到了二维窗口
                 return mul(UNITY_MATRIX_MVP, vertexPos);
             }

             //--------------------------------【片段着色函数】-----------------------------
             // 输入：无
             // 输出：COLOR语义（颜色值）
             //---------------------------------------------------------------------------------
             float4 frag(void) : COLOR
             {
                 //返回自定义的RGBA颜色
                 return _ColorWithAlpha_Front;
             }

             //===========结束CG着色器语言编写模块===========
             ENDCG
         }

         //------------------------【通道2：渲染背面】-------------------------
         Pass
         {
             //剔除正面，渲染背面
             Cull Front

             //不写入深度缓冲,为了不遮挡住其他物体
             ZWrite Off

             //选取Alpha混合方式
             Blend SrcAlpha OneMinusSrcAlpha
             //Blend  SrcAlpha SrcAlpha

             //===========开启CG着色器语言编写模块============
             CGPROGRAM

             //编译指令:告知编译器顶点和片段着色函数的名称
             #pragma vertex vert
             #pragma fragment frag

             //变量声明
             uniform float4 _ColorWithAlpha_Back;

             //--------------------------------【顶点着色函数】-----------------------------
             // 输入：POSITION语义（坐标位置）
             // 输出：SV_POSITION语义（像素位置）
             //---------------------------------------------------------------------------------
             float4 vert(float4 vertexPos : POSITION) : SV_POSITION
             {
                 //坐标系变换
                 //输出的顶点位置（像素位置）为模型视图投影矩阵乘以顶点位置，也就是将三维空间中的坐标投影到了二维窗口
                 return mul(UNITY_MATRIX_MVP, vertexPos);
             }

             //--------------------------------【片段着色函数】-----------------------------
             // 输入：无
             // 输出：COLOR语义（颜色值）
             //---------------------------------------------------------------------------------
             float4 frag(void) : COLOR
             {
                 //返回自定义的RGBA颜色
                 return _ColorWithAlpha_Back;
             }

             //===========结束CG着色器语言编写模块===========
             ENDCG
         }
     }
 }

 

将其施用于材质之上的效果如下：

 

可以看到，有两个可供调节的颜色选项，分别表示材质正面和反面的透明颜色，而材质最终表现出来的透明颜色，是这两种颜色的混合。

在实景表现中，从物体外部和内部，可以看到其显示出了不同的颜色。

从物体外部看：

从物体内部看：

 

 

 

四、镜面反射（Specular）Shader

 

上篇文章中讲到了Diffuse光照（漫反射光照）与实现它的Shader，经常与其相提并论的是Specular光照（镜面反射光照，或称高光）。这里，接着我们来放出镜面反射光照的Shader。其具体的原理翻开任何一本图形学的书都可以找到，这边就不多讲，直接放出详细注释的实现代码：

 

 //镜面反射Shader（specular shader ）

 Shader "浅墨Shader编程/Volume13/4.Specular"
 {
     //------------------------------------【属性值】------------------------------------
     Properties
     {
         //主颜色
         _Color("Main Color", Color) = (1, 1, 1, 1)
         //镜面反射颜色
         _SpecColor("Specular Color", Color) = (1, 1, 1, 1)
         //镜面反射光泽度
         _SpecShininess("Specular Shininess", Range(1.0, 100.0)) = 10.0
     }

     //------------------------------------【唯一的子着色器】------------------------------------
     SubShader
     {
         //渲染类型设置：不透明
         Tags{ "RenderType" = "Opaque" }


         //--------------------------------唯一的通道-------------------------------
         Pass
         {
             //光照模型ForwardBase
             Tags{ "LightMode" = "ForwardBase" }
             //===========开启CG着色器语言编写模块===========
             CGPROGRAM

             //编译指令:告知编译器顶点和片段着色函数的名称
             #pragma vertex vert
             #pragma fragment frag

             //顶点着色器输入结构
             struct appdata
             {
                 float4 vertex : POSITION;//顶点位置
                 float3 normal : NORMAL;//法线向量坐标
             };

             //顶点着色器输出结构
             struct v2f
             {
                 float4 pos : SV_POSITION;//像素位置
                 float3 normal : NORMAL;//法线向量坐标
                 float4 posWorld : TEXCOORD0;//在世界空间中的坐标位置
             };


             //变量的声明
             float4 _LightColor0;
             float4 _Color;
             float4 _SpecColor;
             float _SpecShininess;

             //--------------------------------【顶点着色函数】-----------------------------
             // 输入：顶点输入结构体
             // 输出：顶点输出结构体
             //---------------------------------------------------------------------------------
             //顶点着色函数
             v2f vert(appdata IN)
             {
                 //【1】声明一个输出结构对象
                 v2f OUT;

                 //【2】填充此输出结构
                 //输出的顶点位置为模型视图投影矩阵乘以顶点位置，也就是将三维空间中的坐标投影到了二维窗口
                 OUT.pos = mul(UNITY_MATRIX_MVP, IN.vertex);
                 //获得顶点在世界空间中的位置坐标
                 OUT.posWorld = mul(_Object2World, IN.vertex);
                 //获取顶点在世界空间中的法线向量坐标
                 OUT.normal = mul(float4(IN.normal, 0.0), _World2Object).xyz;

                 //【3】返回此输出结构对象
                 return OUT;
             }

             //--------------------------------【片段着色函数】-----------------------------
             // 输入：顶点输出结构体
             // 输出：float4型的像素颜色值
             //---------------------------------------------------------------------------------
             fixed4 frag(v2f IN) : COLOR
             {
                 //【1】先准备好需要的参数
                 //获取法线的方向
                 float3 normalDirection = normalize(IN.normal);
                 //获取入射光线的方向
                 float3 lightDirection = normalize(_WorldSpaceLightPos0.xyz);
                 //获取视角方向
                 float3 viewDirection = normalize(_WorldSpaceCameraPos - IN.posWorld.xyz);

                 //【2】计算出漫反射颜色值  Diffuse=LightColor * MainColor * max(0,dot(N,L))
                 float3 diffuse = _LightColor0.rgb * _Color.rgb * max(0.0, dot(normalDirection, lightDirection));

                 //【3】计算镜面反射颜色值
                 float3 specular;
                 //若是法线方向和入射光方向大于180度，镜面反射值为0
                 if (dot(normalDirection, lightDirection) < 0.0)
                 {
                     specular = float3(0.0, 0.0, 0.0);
                 }
                 //否则，根据公式进行计算 Specular =LightColor * SpecColor *pow(max(0,dot(R,V)),Shiness),R=reflect(-L,N)
                 else
                 {
                     float3 reflectDirection = reflect(-lightDirection, normalDirection);
                         specular = _LightColor0.rgb * _SpecColor.rgb * pow(max(0.0, dot(reflectDirection, viewDirection)), _SpecShininess);
                 }

                 //【4】合并漫反射、镜面反射、环境光的颜色值
                 float4 diffuseSpecularAmbient = float4(diffuse, 1.0) + float4(specular, 1.0) + UNITY_LIGHTMODEL_AMBIENT;

                 //【5】将漫反射-镜面反射-环境光的颜色值返回
                 return diffuseSpecularAmbient;
             }

             //===========结束CG着色器语言编写模块===========
             ENDCG
         }
     }
 }

将其施用于材质之上的效果如下：

其中的Specular Shininess滑条用于调节高光的衰减级数。

OK，我们将颜色调节一下，看看新的效果：

 

 

五、带纹理载入的specular shader

 

当然要支持纹理载入，不然实用性太低。Properties中加入纹理属性，其他的地方进行相应的变化，便可以得到支持纹理载入的specular shader：

 

 //支持纹理载入的specular shader

 Shader "浅墨Shader编程/Volume13/5.Specular with Shader"
 {
     //------------------------------------【属性值】------------------------------------
     Properties
     {
         //主纹理
         _MainTex("Texture", 2D) = "white" {}
         //主颜色
         _Color("Main Color", Color) = (1, 1, 1, 1)
         //镜面反射颜色
         _SpecColor("Specular Color", Color) = (1, 1, 1, 1)
         //镜面反射光泽度
         _SpecShininess("Specular Shininess", Range(1.0, 100.0)) = 10.0
     }

     //------------------------------------【唯一的子着色器】------------------------------------
     SubShader
     {
         //渲染类型设置：不透明
         Tags{ "RenderType" = "Opaque" }

         //--------------------------------唯一的通道-------------------------------
         Pass
         {
             //光照模型ForwardBase
             Tags{ "LightMode" = "ForwardBase" }
             //===========开启CG着色器语言编写模块===========
             CGPROGRAM

             //编译指令:告知编译器顶点和片段着色函数的名称
             #pragma vertex vert
             #pragma fragment frag

             //顶点着色器输入结构
             struct appdata
             {
                 float4 vertex : POSITION;//顶点位置
                 float3 normal : NORMAL;//法线向量坐标
                 float2 texcoord : TEXCOORD0;//一级纹理坐标
             };

             //顶点着色器输出结构
             struct v2f
             {
                 float4 pos : SV_POSITION;//像素位置
                 float3 normal : NORMAL;//法线向量坐标
                 float2 texcoord : TEXCOORD0;//一级纹理坐标
                 float4 posWorld : TEXCOORD1;//在世界空间中的坐标位置
             };

             //变量的声明
             float4 _LightColor0;
             float4 _Color;
             sampler2D _MainTex;
             float4 _SpecColor;
             float _SpecShininess;

             //--------------------------------【顶点着色函数】-----------------------------
             // 输入：顶点输入结构体
             // 输出：顶点输出结构体
             //---------------------------------------------------------------------------------
             //顶点着色函数
             v2f vert(appdata IN)
             {
                 //【1】声明一个输出结构对象
                 v2f OUT;

                 //【2】填充此输出结构
                 //输出的顶点位置为模型视图投影矩阵乘以顶点位置，也就是将三维空间中的坐标投影到了二维窗口
                 OUT.pos = mul(UNITY_MATRIX_MVP, IN.vertex);
                 //获得顶点在世界空间中的位置坐标
                 OUT.posWorld = mul(_Object2World, IN.vertex);
                 //获取顶点在世界空间中的法线向量坐标
                 OUT.normal = mul(float4(IN.normal, 0.0), _World2Object).xyz;
                 //输出的纹理坐标也就是输入的纹理坐标
                 OUT.texcoord = IN.texcoord;

                 //【3】返回此输出结构对象
                 return OUT;
             }

             //--------------------------------【片段着色函数】-----------------------------
             // 输入：顶点输出结构体
             // 输出：float4型的像素颜色值
             //---------------------------------------------------------------------------------
             fixed4 frag(v2f IN) : COLOR
             {
                 //【1】先准备好需要的参数
                 //获取纹理颜色
                 float4 texColor = tex2D(_MainTex, IN.texcoord);
                 //获取法线的方向
                 float3 normalDirection = normalize(IN.normal);
                 //获取入射光线的方向
                 float3 lightDirection = normalize(_WorldSpaceLightPos0.xyz);
                 //获取视角方向
                 float3 viewDirection = normalize(_WorldSpaceCameraPos - IN.posWorld.xyz);

                 //【2】计算出漫反射颜色值  Diffuse=LightColor * MainColor * max(0,dot(N,L))
                 float3 diffuse = _LightColor0.rgb * _Color.rgb * max(0.0, dot(normalDirection, lightDirection));

                 //【3】计算镜面反射颜色值
                 float3 specular;
                 //若是法线方向和入射光方向大于180度，镜面反射值为0
                 if (dot(normalDirection, lightDirection) < 0.0)
                 {
                     specular = float3(0.0, 0.0, 0.0);
                 }
                 //否则，根据公式进行计算 Specular =LightColor * SpecColor *pow(max(0,dot(R,V)),Shiness),R=reflect(-L,N)
                 else
                 {
                     float3 reflectDirection = reflect(-lightDirection, normalDirection);
                     specular = _LightColor0.rgb * _SpecColor.rgb * pow(max(0.0, dot(reflectDirection, viewDirection)), _SpecShininess);
                 }

                 //【4】合并漫反射、镜面反射、环境光的颜色值
                 float4 diffuseSpecularAmbient = float4(diffuse, 1.0) + float4(specular, 1.0) + UNITY_LIGHTMODEL_AMBIENT;

                 //【5】将漫反射-镜面反射-环境光的颜色值乘以纹理颜色值之后返回
                 return diffuseSpecularAmbient * texColor;
             }

             //===========结束CG着色器语言编写模块===========
             ENDCG
         }
     }
 }

将其施用于材质之上的效果如下：

将此Shader施于妙蛙草的模型之上，得到的便是如端游《剑灵》一般油腻腻的画风感觉：

本文Shader的全家福：

最后，依然是放出加入特效后的场景截图。

 

OK，本篇的内容大致如此，下次更新见。

附1： 本博文相关资源下载链接清单

【百度云】博文游戏场景exe下载

【百度云】博文示例场景资源和源码工程下载   （ PS：工程所用Unity版本为5.2.1）

【Github】本文全部Shader源码

附2：Reference

[1] http://docs.unity3d.com/Manual/SL-Reference.html

[2] https://en.wikibooks.org/wiki/Cg_Programming