Unity Shader 之透明效果

本文引用 Unity Shader入门精要

开启透明混合后，一个物体被渲染到屏幕上时，每个片元除了颜色值和深度值外，还有——透明度。透明度为1，则完全不透明，透明度为0，则完全不会显示。

在Unity中我们有两种方式实现透明度效果

透明度测试（Alpha Test）：这种方式无法得到真正的半透明效果。只是0或1（完全透明和完全不透明）
透明度混合（Alpha Blending）：使用当前的透明度作为混合因子，与已经存储在颜色缓冲中的颜色值进行混合。

那让我讨论第一个问题：渲染顺序

渲染顺序

为什么先说渲染顺序呢？

在之前的两篇文章中，我并没有涉猎到渲染顺序。因为对于不透明的物体，渲染顺序的决定是由深度缓冲决定的。

深度缓冲的基本思想为：根据深度缓冲中的值来判断该片元距离摄像机的距离，当渲染一个片元时，需要把深度值和已经存在于深度缓冲中的值进行比较（前提：开启深度测试），如果它的值距离摄像机更远，说明该片元不应被渲染。

但是当我们使用透明度混合时，就得关闭深度写入（ZWrite）。

为什么关闭深度写入呢？

一个半透明的物体后面如果有物体的话，应该是可以被看到的，但是深度写入会把它剔除掉。

所以对于渲染顺序就得我们自行控制了。

上两个图分别是两种渲染顺序情况，

图一：透明物体在前，不透明物体在后。

情况一：如果先渲染不透明物体（开启深度写入和深度测试），将不透明物体颜色写入颜色缓存，深度写入深度缓冲，然后渲染透明物体（关闭深度写入，开启深度测试），将透明物体的颜色与颜色缓冲中的颜色混合，得到正确结果。
情况二：先渲染透明物体（关闭深度写入，开启深度测试），透明物体颜色写入颜色缓冲，然后渲染不透明物体（开启深度写入和深度测试），深度缓存中没有内容，所以直接覆盖颜色缓冲。得到错误结果。

图二：两个透明物体。

情况一：先渲染后方的透明物体，颜色写入颜色缓冲，然后渲染前方透明物体，颜色和颜色缓冲中的颜色混合，得到正确结果。
情况二：先渲染前方的透明物体，颜色写入颜色缓冲，然后渲染后方透明物体，颜色和颜色缓冲中的颜色混合，得到后方物体在前方物体前的画面，得到错误结果。

基于这种情况Unity给我们一种解决方式（大多数引擎的解决方式）：物体排序+分割网格。

物体排序：1.先渲染所有不透明物体，并开启它们的深度测试和深度写入。2.把半透明物体按它们距离摄像机的远近进行排序，然后按照从后往前的顺序渲染半透明物体（开启深度测试，关闭深度写入）。
分割网格：解决物体排序遗留问题：循环重叠（例：3个物体互相重叠），我们把网格分割，分别判断分开后的网格的顺序来进行渲染。

Unity Shader 的渲染顺序

Unity提供了渲染队列（render queue）解决渲染顺序的问题。用SubShader的Queue标签来设置我们的模型在哪个渲染队列。索引越小越先渲染

Unity的5个渲染队列：

Background：索引：1000，这个队列是最先渲染的。
Geometry：索引：2000，默认渲染队列。不透明物体使用这个队列。
Alpha Test：索引：2450，需要透明度测试的物体使用该队列。
Transparent：索引：3000，按照从后往前的顺序渲染，使用透明度混合的物体都应该用该队列。
Overlay：索引：4000，该队列用于实现一些叠加效果，最后渲染。

透明度测试

只要一个片元的透明度不满足条件，那么这个片元就会被舍弃。用clip来进行透明度测试。

立方体的贴图每个块都是不同的透明度分别是50%、60%、70%、80%，下面是我把Alpha Cutoff设为0.7时的效果。你会发现50%和60%透明度的贴图已经不见了。

透明度测试Shader代码：

 1 Shader "My Shader/AlphaShader"
 2 {
 3     Properties
 4     {
 5         _Color ("Color", Color) = (1,1,1,1)
 6         _MainTex ("Texture", 2D) = "white" {}
 7         _Cutoff ("Alpha Cutoff", Range(0, 1)) = 0.5
 8     }
 9     SubShader
10     {
11         // 透明度测试队列为AlphaTest，所以Queue=AlphaTest
12         // RenderType标签让Unity把这个Shader归入提前定义的组中，以指明该Shader是一个使用了透明度测试的Shader
13         // IgonreProjector为True表明此Shader不受投影器（Projectors）影响
14         Tags { "Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="TransparentCutout" }
15 
16         Pass
17         {
18             Tags { "LightMode"="ForwardBase" }
19 
20             CGPROGRAM
21             #pragma vertex vert
22             #pragma fragment frag
23             
24             #include "UnityCG.cginc"
25             #include "Lighting.cginc"
26 
27             struct a2v
28             {
29                 float4 vertex : POSITION;
30                 float3 normal : NORMAL;
31                 float4 texcoord : TEXCOORD0;
32             };
33 
34             struct v2f
35             {
36                 float4 pos : SV_POSITION;
37                 float2 uv : TEXCOORD0;
38                 float3 worldNormal : TEXCOORD1;
39                 float3 worldPos : TEXCOORD2;
40             };
41 
42             sampler2D _MainTex;
43             float4 _MainTex_ST;
44             fixed4 _Color;
45             // 用于决定调用clip函数时进行的透明度测试使用的判断条件
46             fixed _Cutoff;
47             
48             v2f vert (a2v v)
49             {
50                 v2f o;
51 
52                 o.pos = UnityObjectToClipPos(v.vertex);
53                 o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
54                 o.worldNormal = UnityObjectToWorldNormal(v.normal);
55                 o.worldPos = mul(unity_ObjectToWorld, v.vertex);
56 
57                 return o;
58             }
59             
60             fixed4 frag (v2f i) : SV_Target
61             {
62                 fixed3 worldNormal = normalize(i.worldNormal);
63                 fixed3 worldPos = normalize(i.worldPos);
64                 fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(worldPos));
65                 // 纹素值
66                 fixed4 texColor = tex2D(_MainTex, i.uv);
67                 // 原理
68                 // if ((texColor.a - _Cutoff) < 0.0) { discard; }
69                 // 如果结果小于0，将片元舍弃
70                 clip(texColor.a - _Cutoff);
71                 // 反射率
72                 fixed3 albedo =  texColor.rgb * _Color.rgb;
73                 // 环境光
74                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;
75                 // 漫反射
76                 fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldNormal, worldLightDir));
77                 return fixed4(ambient + diffuse, 1.0);
78             }
79             ENDCG
80         }
81     }
82 }

透明度混合

那我们看看Unity给我们提供的混合命令——Blend。给出Blend的常用语义。

Blend Off：关闭混合
Blend SrcFactor DstFactor：开启混合，设置混合因子。源颜色（片元颜色）乘以SrcFactor，目标颜色（已经在颜色缓冲中的颜色）乘以DstFactor，然后把两者相加
Blend SrcFactor DstFactor，SrcFactorA DstFactorA：同上，不过把透明通道（a）与颜色通道（rgb）用不同的因子。
BlendOp BlendOperation：使用BlendOperation对其进行其他操作，非简单相加混合。

混合公式：DstColorNew = SrcAlpha * SrcColor + (1 - SrcAlpha) * DstColorOld

下面是最简单的调整透明通道值的效果，AlphaScale = 0.6

Shader代码为：

 1 Shader "My Shader/AlphaShader"
 2 {
 3     Properties
 4     {
 5         _Color ("Color", Color) = (1,1,1,1)
 6         _MainTex ("Texture", 2D) = "white" {}
 7         _AlphaScale ("Alpha Scale", Range(0, 1)) = 1
 8     }
 9     SubShader
10     {
11         // 透明度混合队列为Transparent，所以Queue=Transparent
12         // RenderType标签让Unity把这个Shader归入提前定义的组中，以指明该Shader是一个使用了透明度混合的Shader
13         // IgonreProjector为True表明此Shader不受投影器（Projectors）影响
14         Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
15 
16         Pass
17         {
18             Tags { "LightMode"="ForwardBase" }
19             
20             // 关闭深度写入
21             ZWrite Off
22             // 开启混合模式，并设置混合因子为SrcAlpha和OneMinusSrcAlpha
23             Blend SrcAlpha OneMinusSrcAlpha
24 
25             CGPROGRAM
26             #pragma vertex vert
27             #pragma fragment frag
28             
29             #include "UnityCG.cginc"
30             #include "Lighting.cginc"
31 
32             struct a2v
33             {
34                 float4 vertex : POSITION;
35                 float3 normal : NORMAL;
36                 float4 texcoord : TEXCOORD0;
37             };
38 
39             struct v2f
40             {
41                 float4 pos : SV_POSITION;
42                 float2 uv : TEXCOORD0;
43                 float3 worldNormal : TEXCOORD1;
44                 float3 worldPos : TEXCOORD2;
45             };
46 
47             sampler2D _MainTex;
48             float4 _MainTex_ST;
49             fixed4 _Color;
50             // 用于决定调用clip函数时进行的透明度测试使用的判断条件
51             fixed _AlphaScale;
52             
53             v2f vert (a2v v)
54             {
55                 v2f o;
56 
57                 o.pos = UnityObjectToClipPos(v.vertex);
58                 o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
59                 o.worldNormal = UnityObjectToWorldNormal(v.normal);
60                 o.worldPos = mul(unity_ObjectToWorld, v.vertex);
61 
62                 return o;
63             }
64             
65             fixed4 frag (v2f i) : SV_Target
66             {
67                 fixed3 worldNormal = normalize(i.worldNormal);
68                 fixed3 worldPos = normalize(i.worldPos);
69                 fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(worldPos));
70                 // 纹素值
71                 fixed4 texColor = tex2D(_MainTex, i.uv);
72                 // 反射率
73                 fixed3 albedo =  texColor.rgb * _Color.rgb;
74                 // 环境光
75                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;
76                 // 漫反射
77                 fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldNormal, worldLightDir));
78                 // 返回颜色，透明度部分乘以我们设定的值
79                 return fixed4(ambient + diffuse, texColor.a * _AlphaScale);
80             }
81             ENDCG
82         }
83     }
84 }

然而这种实现方式是有问题的。就像前面说的一样，它并不能渲染正确的顺序。

解决方式：用两个Pass来渲染模型

第一个Pass：开启深度写入，但不输出颜色，目的仅仅为了填充深度缓冲。
第二个Pass：正常的透明度混合，由于上一个Pass已经得到了逐像素的正确深度信息，该Pass就可以按照像素级别的深度排序进行透明渲染。
缺点：多了一个Pass性能有所影响。

代码如下：

 1 Shader "My Shader/AlphaShader"
 2 {
 3     Properties
 4     {
 5         _Color ("Color", Color) = (1,1,1,1)
 6         _MainTex ("Texture", 2D) = "white" {}
 7         _AlphaScale ("Alpha Scale", Range(0, 1)) = 1
 8     }
 9     SubShader
10     {
11         // 透明度混合队列为Transparent，所以Queue=Transparent
12         // RenderType标签让Unity把这个Shader归入提前定义的组中，以指明该Shader是一个使用了透明度混合的Shader
13         // IgonreProjector为True表明此Shader不受投影器（Projectors）影响
14         Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
15 
16         Pass
17         {
18             // 开启深度写入
19             ZWrite On
20             // 设置颜色通道的写掩码，0为不写入任何颜色
21             ColorMask 0
22         }
23 
24         Pass
25         {
26             Tags { "LightMode"="ForwardBase" }
27             
28             // 关闭深度写入
29             ZWrite Off
30             // 开启混合模式，并设置混合因子为SrcAlpha和OneMinusSrcAlpha
31             Blend SrcAlpha OneMinusSrcAlpha
32 
33             CGPROGRAM
34             #pragma vertex vert
35             #pragma fragment frag
36             
37             #include "UnityCG.cginc"
38             #include "Lighting.cginc"
39 
40             struct a2v
41             {
42                 float4 vertex : POSITION;
43                 float3 normal : NORMAL;
44                 float4 texcoord : TEXCOORD0;
45             };
46 
47             struct v2f
48             {
49                 float4 pos : SV_POSITION;
50                 float2 uv : TEXCOORD0;
51                 float3 worldNormal : TEXCOORD1;
52                 float3 worldPos : TEXCOORD2;
53             };
54 
55             sampler2D _MainTex;
56             float4 _MainTex_ST;
57             fixed4 _Color;
58             // 用于决定调用clip函数时进行的透明度测试使用的判断条件
59             fixed _AlphaScale;
60             
61             v2f vert (a2v v)
62             {
63                 v2f o;
64 
65                 o.pos = UnityObjectToClipPos(v.vertex);
66                 o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
67                 o.worldNormal = UnityObjectToWorldNormal(v.normal);
68                 o.worldPos = mul(unity_ObjectToWorld, v.vertex);
69 
70                 return o;
71             }
72             
73             fixed4 frag (v2f i) : SV_Target
74             {
75                 fixed3 worldNormal = normalize(i.worldNormal);
76                 fixed3 worldPos = normalize(i.worldPos);
77                 fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(worldPos));
78                 // 纹素值
79                 fixed4 texColor = tex2D(_MainTex, i.uv);
80                 // 反射率
81                 fixed3 albedo =  texColor.rgb * _Color.rgb;
82                 // 环境光
83                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;
84                 // 漫反射
85                 fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldNormal, worldLightDir));
86                 // 返回颜色，透明度部分乘以我们设定的值
87                 return fixed4(ambient + diffuse, texColor.a * _AlphaScale);
88             }
89             ENDCG
90         }
91     }
92 }

双面渲染的透明效果

对于刚才的立方体，虽然是透明的，但是却看不到里面的构造，是不是感觉也不太对，如果想看到内部构造怎么办呢？

Unity默认会剔除物体的背面（就是内部），那么我们可以用Cull指令来控制需要剔除哪个面的渲染图元。

Cull Back：背对着摄像机的渲染图元不会渲染，默认情况。
Cull Front：朝向摄像机的渲染图元不会渲染。
Cull Off：关闭剔除功能，所有的都会渲染。缺点：需要渲染的数目成倍增加，除非用于特殊效果，建议不开启。

接下来我们看一下效果：

这回也是用连个Pass来完成：第一个Pass渲染背面，第二个Pass渲染前面

Shader 代码如下:

  1 Shader "My Shader/AlphaShader"
  2 {
  3     Properties
  4     {
  5         _Color ("Color", Color) = (1,1,1,1)
  6         _MainTex ("Texture", 2D) = "white" {}
  7         _AlphaScale ("Alpha Scale", Range(0, 1)) = 1
  8     }
  9     SubShader
 10     {
 11         // 透明度混合队列为Transparent，所以Queue=Transparent
 12         // RenderType标签让Unity把这个Shader归入提前定义的组中，以指明该Shader是一个使用了透明度混合的Shader
 13         // IgonreProjector为True表明此Shader不受投影器（Projectors）影响
 14         Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
 15 
 16         Pass
 17         {
 18             Tags { "LightMode"="ForwardBase" }
 19 
 20             // 只渲染背面
 21             Cull Front
 22             // 关闭深度写入
 23             ZWrite Off
 24             // 开启混合模式，并设置混合因子为SrcAlpha和OneMinusSrcAlpha
 25             Blend SrcAlpha OneMinusSrcAlpha
 26 
 27             CGPROGRAM
 28             #pragma vertex vert
 29             #pragma fragment frag
 30             
 31             #include "UnityCG.cginc"
 32             #include "Lighting.cginc"
 33 
 34             struct a2v
 35             {
 36                 float4 vertex : POSITION;
 37                 float3 normal : NORMAL;
 38                 float4 texcoord : TEXCOORD0;
 39             };
 40 
 41             struct v2f
 42             {
 43                 float4 pos : SV_POSITION;
 44                 float2 uv : TEXCOORD0;
 45                 float3 worldNormal : TEXCOORD1;
 46                 float3 worldPos : TEXCOORD2;
 47             };
 48 
 49             sampler2D _MainTex;
 50             float4 _MainTex_ST;
 51             fixed4 _Color;
 52             // 用于决定调用clip函数时进行的透明度测试使用的判断条件
 53             fixed _AlphaScale;
 54             
 55             v2f vert (a2v v)
 56             {
 57                 v2f o;
 58 
 59                 o.pos = UnityObjectToClipPos(v.vertex);
 60                 o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
 61                 o.worldNormal = UnityObjectToWorldNormal(v.normal);
 62                 o.worldPos = mul(unity_ObjectToWorld, v.vertex);
 63 
 64                 return o;
 65             }
 66             
 67             fixed4 frag (v2f i) : SV_Target
 68             {
 69                 fixed3 worldNormal = normalize(i.worldNormal);
 70                 fixed3 worldPos = normalize(i.worldPos);
 71                 fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(worldPos));
 72                 // 纹素值
 73                 fixed4 texColor = tex2D(_MainTex, i.uv);
 74                 // 反射率
 75                 fixed3 albedo =  texColor.rgb * _Color.rgb;
 76                 // 环境光
 77                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;
 78                 // 漫反射
 79                 fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldNormal, worldLightDir));
 80                 // 返回颜色，透明度部分乘以我们设定的值
 81                 return fixed4(ambient + diffuse, texColor.a * _AlphaScale);
 82             }
 83             ENDCG
 84         }
 85 
 86         Pass
 87         {
 88             Tags { "LightMode"="ForwardBase" }
 89             
 90             // 只渲染前面
 91             Cull Back 
 92             // 关闭深度写入
 93             ZWrite Off
 94             // 开启混合模式，并设置混合因子为SrcAlpha和OneMinusSrcAlpha
 95             Blend SrcAlpha OneMinusSrcAlpha
 96 
 97             CGPROGRAM
 98             #pragma vertex vert
 99             #pragma fragment frag
100             
101             #include "UnityCG.cginc"
102             #include "Lighting.cginc"
103 
104             struct a2v
105             {
106                 float4 vertex : POSITION;
107                 float3 normal : NORMAL;
108                 float4 texcoord : TEXCOORD0;
109             };
110 
111             struct v2f
112             {
113                 float4 pos : SV_POSITION;
114                 float2 uv : TEXCOORD0;
115                 float3 worldNormal : TEXCOORD1;
116                 float3 worldPos : TEXCOORD2;
117             };
118 
119             sampler2D _MainTex;
120             float4 _MainTex_ST;
121             fixed4 _Color;
122             // 用于决定调用clip函数时进行的透明度测试使用的判断条件
123             fixed _AlphaScale;
124             
125             v2f vert (a2v v)
126             {
127                 v2f o;
128 
129                 o.pos = UnityObjectToClipPos(v.vertex);
130                 o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
131                 o.worldNormal = UnityObjectToWorldNormal(v.normal);
132                 o.worldPos = mul(unity_ObjectToWorld, v.vertex);
133 
134                 return o;
135             }
136             
137             fixed4 frag (v2f i) : SV_Target
138             {
139                 fixed3 worldNormal = normalize(i.worldNormal);
140                 fixed3 worldPos = normalize(i.worldPos);
141                 fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(worldPos));
142                 // 纹素值
143                 fixed4 texColor = tex2D(_MainTex, i.uv);
144                 // 反射率
145                 fixed3 albedo =  texColor.rgb * _Color.rgb;
146                 // 环境光
147                 fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;
148                 // 漫反射
149                 fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldNormal, worldLightDir));
150                 // 返回颜色，透明度部分乘以我们设定的值
151                 return fixed4(ambient + diffuse, texColor.a * _AlphaScale);
152             }
153             ENDCG
154         }
155     }
156 }