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。具体代码如下：

 

[cpp]  view plain  copy

 print ?

1. //透明单色Shader  
2.   
3.   
4. Shader "浅墨Shader编程/Volume13/1.SimpleAlphaShader"   
5. {  
6.     //------------------------------------【唯一的子着色器】------------------------------------  
7.     SubShader  
8.     {     
9.         //设置Queue为透明，在所有非透明几何体绘制之后再进行绘制  
10.         Tags{ "Queue" = "Transparent" }  
11.   
12.         Pass  
13.         {  
14.             //不写入深度缓冲,为了不遮挡住其他物体  
15.             ZWrite Off  
16.   
17.             //选取Alpha混合方式  
18.             Blend  SrcAlpha SrcAlpha  
19.             //Blend SrcAlpha OneMinusSrcAlpha  
20.   
21.             //===========开启CG着色器语言编写模块============  
22.             CGPROGRAM  
23.   
24.             //编译指令:告知编译器顶点和片段着色函数的名称  
25.             #pragma vertex vert   
26.             #pragma fragment frag  
27.   
28.             //--------------------------------【顶点着色函数】-----------------------------  
29.             // 输入：POSITION语义（坐标位置）  
30.             // 输出：SV_POSITION语义（像素位置）  
31.             //---------------------------------------------------------------------------------  
32.             float4 vert(float4 vertexPos : POSITION) : SV_POSITION  
33.             {  
34.                 //坐标系变换  
35.                 //输出的顶点位置（像素位置）为模型视图投影矩阵乘以顶点位置，也就是将三维空间中的坐标投影到了二维窗口  
36.                 return mul(UNITY_MATRIX_MVP, vertexPos);  
37.             }  
38.   
39.             //--------------------------------【片段着色函数】-----------------------------  
40.             // 输入：无  
41.             // 输出：COLOR语义（颜色值）  
42.             //---------------------------------------------------------------------------------  
43.             float4 frag(void) : COLOR  
44.             {  
45.                 //返回单色  
46.                 return float4(0.3, 1.0, 0.1, 0.6);  
47.             }  
48.   
49.             //===========结束CG着色器语言编写模块===========  
50.             ENDCG  
51.         }  
52.     }  
53. }  

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

 

实景效果如下：

 

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

 

 

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

 

[cpp]  view plain  copy

 print ?

1. //颜色可以调版单色透明Shader  
2.   
3.   
4. Shader "浅墨Shader编程/Volume13/2.ColorChangeAlpha"  
5. {  
6.     //------------------------------------【属性值】------------------------------------  
7.     Properties  
8.     {  
9.         //颜色值  
10.         _ColorWithAlpha("ColorWithAlpha", Color) = (0.9, 0.1, 0.1, 0.5)  
11.     }  
12.   
13.     //------------------------------------【唯一的子着色器】------------------------------------  
14.     SubShader  
15.     {  
16.         //设置Queue为透明，在所有非透明几何体绘制之后再进行绘制  
17.         Tags{ "Queue" = "Transparent" }  
18.   
19.         //--------------------------------唯一的通道-------------------------------  
20.         Pass  
21.         {  
22.             //不写入深度缓冲,为了不遮挡住其他物体  
23.             ZWrite Off  
24.   
25.             //选取Alpha混合方式  
26.             Blend  SrcAlpha SrcAlpha  
27.             //Blend SrcAlpha OneMinusSrcAlpha  
28.   
29.             //===========开启CG着色器语言编写模块============  
30.             CGPROGRAM  
31.   
32.             //编译指令:告知编译器顶点和片段着色函数的名称  
33.             #pragma vertex vert   
34.             #pragma fragment frag  
35.   
36.             //变量声明  
37.             uniform float4 _ColorWithAlpha;  
38.   
39.             //--------------------------------【顶点着色函数】-----------------------------  
40.             // 输入：POSITION语义（坐标位置）  
41.             // 输出：SV_POSITION语义（像素位置）  
42.             //---------------------------------------------------------------------------------  
43.             float4 vert(float4 vertexPos : POSITION) : SV_POSITION  
44.             {  
45.                 //坐标系变换  
46.                 //输出的顶点位置（像素位置）为模型视图投影矩阵乘以顶点位置，也就是将三维空间中的坐标投影到了二维窗口  
47.                 return mul(UNITY_MATRIX_MVP, vertexPos);  
48.             }  
49.   
50.             //--------------------------------【片段着色函数】-----------------------------  
51.             // 输入：无  
52.             // 输出：COLOR语义（颜色值）  
53.             //---------------------------------------------------------------------------------  
54.             float4 frag(void) : COLOR  
55.             {  
56.                 //返回自定义的RGBA颜色  
57.                 return _ColorWithAlpha;  
58.             }  
59.   
60.             //===========结束CG着色器语言编写模块===========  
61.             ENDCG  
62.         }  
63.     }  
64. }  

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

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

实景效果如下：

 

 

 

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

 

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

[cpp]  view plain  copy

 print ?

1. //双面双色颜色可以调版透明Shader  
2.   
3. Shader "浅墨Shader编程/Volume13/3.TwoSideColorChangeAlpha"   
4. {  
5.     //------------------------------------【属性值】------------------------------------  
6.     Properties  
7.     {  
8.         //正面颜色值  
9.         _ColorWithAlpha_Front("ColorWithAlpha_Front", Color) = (0.9, 0.1, 0.1, 0.5)  
10.         //背面颜色值  
11.         _ColorWithAlpha_Back("ColorWithAlpha_Back", Color) = (0.1, 0.3, 0.9, 0.5)  
12.     }  
13.   
14.     //------------------------------------【唯一的子着色器】------------------------------------  
15.     SubShader  
16.     {  
17.         //设置Queue为透明，在所有非透明几何体绘制之后再进行绘制  
18.         Tags{ "Queue" = "Transparent" }  
19.   
20.         //------------------------【通道1：渲染正面】-------------------------  
21.         Pass  
22.         {  
23.             //剔除背面，渲染正面  
24.             Cull Back  
25.             //不写入深度缓冲,为了不遮挡住其他物体  
26.             ZWrite Off   
27.   
28.             //选取Alpha混合方式  
29.             Blend SrcAlpha OneMinusSrcAlpha  
30.             //Blend  SrcAlpha SrcAlpha  
31.   
32.             //===========开启CG着色器语言编写模块============  
33.             CGPROGRAM  
34.   
35.             //编译指令:告知编译器顶点和片段着色函数的名称  
36.             #pragma vertex vert   
37.             #pragma fragment frag  
38.   
39.             //变量声明  
40.             uniform float4 _ColorWithAlpha_Front;  
41.   
42.             //--------------------------------【顶点着色函数】-----------------------------  
43.             // 输入：POSITION语义（坐标位置）  
44.             // 输出：SV_POSITION语义（像素位置）  
45.             //---------------------------------------------------------------------------------  
46.             float4 vert(float4 vertexPos : POSITION) : SV_POSITION  
47.             {  
48.                 //坐标系变换  
49.                 //输出的顶点位置（像素位置）为模型视图投影矩阵乘以顶点位置，也就是将三维空间中的坐标投影到了二维窗口  
50.                 return mul(UNITY_MATRIX_MVP, vertexPos);  
51.             }  
52.   
53.             //--------------------------------【片段着色函数】-----------------------------  
54.             // 输入：无  
55.             // 输出：COLOR语义（颜色值）  
56.             //---------------------------------------------------------------------------------  
57.             float4 frag(void) : COLOR  
58.             {  
59.                 //返回自定义的RGBA颜色  
60.                 return _ColorWithAlpha_Front;  
61.             }  
62.   
63.             //===========结束CG着色器语言编写模块===========  
64.             ENDCG  
65.         }  
66.   
67.         //------------------------【通道2：渲染背面】-------------------------  
68.         Pass  
69.         {  
70.             //剔除正面，渲染背面  
71.             Cull Front  
72.   
73.             //不写入深度缓冲,为了不遮挡住其他物体  
74.             ZWrite Off  
75.   
76.             //选取Alpha混合方式  
77.             Blend SrcAlpha OneMinusSrcAlpha  
78.             //Blend  SrcAlpha SrcAlpha  
79.   
80.             //===========开启CG着色器语言编写模块============  
81.             CGPROGRAM  
82.   
83.             //编译指令:告知编译器顶点和片段着色函数的名称  
84.             #pragma vertex vert   
85.             #pragma fragment frag  
86.   
87.             //变量声明  
88.             uniform float4 _ColorWithAlpha_Back;  
89.   
90.             //--------------------------------【顶点着色函数】-----------------------------  
91.             // 输入：POSITION语义（坐标位置）  
92.             // 输出：SV_POSITION语义（像素位置）  
93.             //---------------------------------------------------------------------------------  
94.             float4 vert(float4 vertexPos : POSITION) : SV_POSITION  
95.             {  
96.                 //坐标系变换  
97.                 //输出的顶点位置（像素位置）为模型视图投影矩阵乘以顶点位置，也就是将三维空间中的坐标投影到了二维窗口  
98.                 return mul(UNITY_MATRIX_MVP, vertexPos);  
99.             }  
100.   
101.             //--------------------------------【片段着色函数】-----------------------------  
102.             // 输入：无  
103.             // 输出：COLOR语义（颜色值）  
104.             //---------------------------------------------------------------------------------  
105.             float4 frag(void) : COLOR  
106.             {  
107.                 //返回自定义的RGBA颜色  
108.                 return _ColorWithAlpha_Back;  
109.             }  
110.   
111.             //===========结束CG着色器语言编写模块===========  
112.             ENDCG  
113.         }  
114.     }  
115. }  

 

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

 

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

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

从物体外部看：

从物体内部看：

 

 

 

四、镜面反射（Specular）Shader

 

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

 

[cpp]  view plain  copy

 print ?

1. //镜面反射Shader（specular shader ）  
2.   
3. Shader "浅墨Shader编程/Volume13/4.Specular"  
4. {  
5.     //------------------------------------【属性值】------------------------------------  
6.     Properties  
7.     {  
8.         //主颜色  
9.         _Color("Main Color", Color) = (1, 1, 1, 1)  
10.         //镜面反射颜色  
11.         _SpecColor("Specular Color", Color) = (1, 1, 1, 1)  
12.         //镜面反射光泽度  
13.         _SpecShininess("Specular Shininess", Range(1.0, 100.0)) = 10.0  
14.     }  
15.   
16.     //------------------------------------【唯一的子着色器】------------------------------------  
17.     SubShader  
18.     {  
19.         //渲染类型设置：不透明  
20.         Tags{ "RenderType" = "Opaque" }  
21.   
22.   
23.         //--------------------------------唯一的通道-------------------------------  
24.         Pass  
25.         {  
26.             //光照模型ForwardBase  
27.             Tags{ "LightMode" = "ForwardBase" }  
28.             //===========开启CG着色器语言编写模块===========  
29.             CGPROGRAM  
30.   
31.             //编译指令:告知编译器顶点和片段着色函数的名称  
32.             #pragma vertex vert  
33.             #pragma fragment frag  
34.   
35.             //顶点着色器输入结构  
36.             struct appdata  
37.             {  
38.                 float4 vertex : POSITION;//顶点位置  
39.                 float3 normal : NORMAL;//法线向量坐标  
40.             };  
41.   
42.             //顶点着色器输出结构  
43.             struct v2f  
44.             {  
45.                 float4 pos : SV_POSITION;//像素位置  
46.                 float3 normal : NORMAL;//法线向量坐标  
47.                 float4 posWorld : TEXCOORD0;//在世界空间中的坐标位置  
48.             };  
49.   
50.   
51.             //变量的声明  
52.             float4 _LightColor0;  
53.             float4 _Color;  
54.             float4 _SpecColor;  
55.             float _SpecShininess;  
56.   
57.             //--------------------------------【顶点着色函数】-----------------------------  
58.             // 输入：顶点输入结构体  
59.             // 输出：顶点输出结构体  
60.             //---------------------------------------------------------------------------------  
61.             //顶点着色函数  
62.             v2f vert(appdata IN)  
63.             {  
64.                 //【1】声明一个输出结构对象  
65.                 v2f OUT;  
66.   
67.                 //【2】填充此输出结构  
68.                 //输出的顶点位置为模型视图投影矩阵乘以顶点位置，也就是将三维空间中的坐标投影到了二维窗口  
69.                 OUT.pos = mul(UNITY_MATRIX_MVP, IN.vertex);  
70.                 //获得顶点在世界空间中的位置坐标  
71.                 OUT.posWorld = mul(_Object2World, IN.vertex);  
72.                 //获取顶点在世界空间中的法线向量坐标  
73.                 OUT.normal = mul(float4(IN.normal, 0.0), _World2Object).xyz;  
74.   
75.                 //【3】返回此输出结构对象  
76.                 return OUT;  
77.             }  
78.   
79.             //--------------------------------【片段着色函数】-----------------------------  
80.             // 输入：顶点输出结构体  
81.             // 输出：float4型的像素颜色值  
82.             //---------------------------------------------------------------------------------  
83.             fixed4 frag(v2f IN) : COLOR  
84.             {  
85.                 //【1】先准备好需要的参数  
86.                 //获取法线的方向  
87.                 float3 normalDirection = normalize(IN.normal);  
88.                 //获取入射光线的方向  
89.                 float3 lightDirection = normalize(_WorldSpaceLightPos0.xyz);  
90.                 //获取视角方向  
91.                 float3 viewDirection = normalize(_WorldSpaceCameraPos - IN.posWorld.xyz);  
92.   
93.                 //【2】计算出漫反射颜色值  Diffuse=LightColor * MainColor * max(0,dot(N,L))  
94.                 float3 diffuse = _LightColor0.rgb * _Color.rgb * max(0.0, dot(normalDirection, lightDirection));  
95.   
96.                 //【3】计算镜面反射颜色值   
97.                 float3 specular;  
98.                 //若是法线方向和入射光方向大于180度，镜面反射值为0  
99.                 if (dot(normalDirection, lightDirection) < 0.0)  
100.                 {  
101.                     specular = float3(0.0, 0.0, 0.0);  
102.                 }  
103.                 //否则，根据公式进行计算 Specular =LightColor * SpecColor *pow(max(0,dot(R,V)),Shiness),R=reflect(-L,N)  
104.                 else  
105.                 {  
106.                     float3 reflectDirection = reflect(-lightDirection, normalDirection);  
107.                         specular = _LightColor0.rgb * _SpecColor.rgb * pow(max(0.0, dot(reflectDirection, viewDirection)), _SpecShininess);  
108.                 }  
109.   
110.                 //【4】合并漫反射、镜面反射、环境光的颜色值  
111.                 float4 diffuseSpecularAmbient = float4(diffuse, 1.0) + float4(specular, 1.0) + UNITY_LIGHTMODEL_AMBIENT;  
112.   
113.                 //【5】将漫反射-镜面反射-环境光的颜色值返回  
114.                 return diffuseSpecularAmbient;  
115.             }  
116.   
117.             //===========结束CG着色器语言编写模块===========  
118.             ENDCG  
119.         }  
120.     }  
121. }  

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

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

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

 

 

五、带纹理载入的specular shader

 

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

 

[cpp]  view plain  copy

 print ?

1. //支持纹理载入的specular shader   
2.   
3. Shader "浅墨Shader编程/Volume13/5.Specular with Shader"  
4. {  
5.     //------------------------------------【属性值】------------------------------------  
6.     Properties  
7.     {  
8.         //主纹理  
9.         _MainTex("Texture", 2D) = "white" {}  
10.         //主颜色  
11.         _Color("Main Color", Color) = (1, 1, 1, 1)  
12.         //镜面反射颜色  
13.         _SpecColor("Specular Color", Color) = (1, 1, 1, 1)  
14.         //镜面反射光泽度  
15.         _SpecShininess("Specular Shininess", Range(1.0, 100.0)) = 10.0  
16.     }  
17.   
18.     //------------------------------------【唯一的子着色器】------------------------------------  
19.     SubShader  
20.     {  
21.         //渲染类型设置：不透明  
22.         Tags{ "RenderType" = "Opaque" }  
23.   
24.         //--------------------------------唯一的通道-------------------------------  
25.         Pass  
26.         {  
27.             //光照模型ForwardBase  
28.             Tags{ "LightMode" = "ForwardBase" }  
29.             //===========开启CG着色器语言编写模块===========  
30.             CGPROGRAM  
31.   
32.             //编译指令:告知编译器顶点和片段着色函数的名称  
33.             #pragma vertex vert  
34.             #pragma fragment frag  
35.   
36.             //顶点着色器输入结构  
37.             struct appdata  
38.             {  
39.                 float4 vertex : POSITION;//顶点位置  
40.                 float3 normal : NORMAL;//法线向量坐标  
41.                 float2 texcoord : TEXCOORD0;//一级纹理坐标  
42.             };  
43.   
44.             //顶点着色器输出结构  
45.             struct v2f  
46.             {  
47.                 float4 pos : SV_POSITION;//像素位置  
48.                 float3 normal : NORMAL;//法线向量坐标  
49.                 float2 texcoord : TEXCOORD0;//一级纹理坐标  
50.                 float4 posWorld : TEXCOORD1;//在世界空间中的坐标位置  
51.             };  
52.   
53.             //变量的声明  
54.             float4 _LightColor0;  
55.             float4 _Color;  
56.             sampler2D _MainTex;  
57.             float4 _SpecColor;  
58.             float _SpecShininess;  
59.   
60.             //--------------------------------【顶点着色函数】-----------------------------  
61.             // 输入：顶点输入结构体  
62.             // 输出：顶点输出结构体  
63.             //---------------------------------------------------------------------------------  
64.             //顶点着色函数  
65.             v2f vert(appdata IN)  
66.             {  
67.                 //【1】声明一个输出结构对象  
68.                 v2f OUT;  
69.   
70.                 //【2】填充此输出结构  
71.                 //输出的顶点位置为模型视图投影矩阵乘以顶点位置，也就是将三维空间中的坐标投影到了二维窗口  
72.                 OUT.pos = mul(UNITY_MATRIX_MVP, IN.vertex);  
73.                 //获得顶点在世界空间中的位置坐标  
74.                 OUT.posWorld = mul(_Object2World, IN.vertex);  
75.                 //获取顶点在世界空间中的法线向量坐标  
76.                 OUT.normal = mul(float4(IN.normal, 0.0), _World2Object).xyz;  
77.                 //输出的纹理坐标也就是输入的纹理坐标  
78.                 OUT.texcoord = IN.texcoord;  
79.   
80.                 //【3】返回此输出结构对象  
81.                 return OUT;  
82.             }  
83.   
84.             //--------------------------------【片段着色函数】-----------------------------  
85.             // 输入：顶点输出结构体  
86.             // 输出：float4型的像素颜色值  
87.             //---------------------------------------------------------------------------------  
88.             fixed4 frag(v2f IN) : COLOR  
89.             {  
90.                 //【1】先准备好需要的参数  
91.                 //获取纹理颜色  
92.                 float4 texColor = tex2D(_MainTex, IN.texcoord);  
93.                 //获取法线的方向  
94.                 float3 normalDirection = normalize(IN.normal);  
95.                 //获取入射光线的方向  
96.                 float3 lightDirection = normalize(_WorldSpaceLightPos0.xyz);  
97.                 //获取视角方向  
98.                 float3 viewDirection = normalize(_WorldSpaceCameraPos - IN.posWorld.xyz);  
99.   
100.                 //【2】计算出漫反射颜色值  Diffuse=LightColor * MainColor * max(0,dot(N,L))  
101.                 float3 diffuse = _LightColor0.rgb * _Color.rgb * max(0.0, dot(normalDirection, lightDirection));  
102.   
103.                 //【3】计算镜面反射颜色值   
104.                 float3 specular;  
105.                 //若是法线方向和入射光方向大于180度，镜面反射值为0  
106.                 if (dot(normalDirection, lightDirection) < 0.0)  
107.                 {  
108.                     specular = float3(0.0, 0.0, 0.0);  
109.                 }  
110.                 //否则，根据公式进行计算 Specular =LightColor * SpecColor *pow(max(0,dot(R,V)),Shiness),R=reflect(-L,N)  
111.                 else  
112.                 {  
113.                     float3 reflectDirection = reflect(-lightDirection, normalDirection);  
114.                     specular = _LightColor0.rgb * _SpecColor.rgb * pow(max(0.0, dot(reflectDirection, viewDirection)), _SpecShininess);  
115.                 }  
116.   
117.                 //【4】合并漫反射、镜面反射、环境光的颜色值  
118.                 float4 diffuseSpecularAmbient = float4(diffuse, 1.0) + float4(specular, 1.0) + UNITY_LIGHTMODEL_AMBIENT;  
119.   
120.                 //【5】将漫反射-镜面反射-环境光的颜色值乘以纹理颜色值之后返回  
121.                 return diffuseSpecularAmbient * texColor;  
122.             }  
123.   
124.             //===========结束CG着色器语言编写模块===========  
125.             ENDCG  
126.         }  
127.     }  
128. }  

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

将此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