Unity Shader:透明效果
本文同时发布在我的个人博客上：https://dragon_boy.gitee.io
在Unity中，我们通常使用两种方式来实现透明效果：一是使用透明度测试，而是使用透明度混合。
不考虑透明物体时，得益于深度测试，不需要物体的渲染顺序也可以正确地绘制物体。但如果渲染透明物体，我们需要关闭深度值的写入。
-
透明度测试：只要一个片元的透明度不满足条件，那么对应的片元就会被舍弃。被舍弃的片元不会再进行任何处理，也不会对颜色缓冲产生任何影响，否则按照正常的不透明片元处理，即进行深度测试、深度写入等。所以说，透明度测试不需要关闭深度写入。不过透明度测试产生的效果是要么完全透明要么完全不透明。
-
透明度混合：使用当前片元的透明度作为混合因子，和已经存储在颜色缓冲中的颜色值进行混合，得到新的颜色。进行透明度混合时要关闭深度写入，所以要非常注重渲染顺序。我们需要先渲染不透明物体，以保证正常的遮挡关系，然后渲染透明物体。对透明度混合来说，深度缓冲是只读的。
渲染顺序
渲染顺序非常重要，例如，1个半透明物体A，1个不透明物体B，B在A的后面：
- 若先渲染B，再渲染A。渲染B时开启了深度写入，B的深度值写入深度缓冲中，颜色写入颜色缓冲中。再渲染A，A在B的前面，通过深度测试，然后可以进行透明度混合，颜色和颜色缓冲中的颜色混合，得到正确的半透明效果。
- 若先渲染A，再渲染B。渲染A时关闭了深度写入，A的颜色直接写入颜色缓冲，但深度缓冲并未写入值。再渲染B，由于此时深度缓冲中没有值，所以B通过深度测试，直接将颜色缓冲中的值覆盖，这样在视觉上B就在A的前面，这是错误的。
渲染透明物体时顺序也很重要，例如两个半透明物体A和B，B在A的后面：
- 若先渲染B，再渲染A。渲染B时，正常写入颜色缓冲，接着渲染A时，A的颜色会和颜色缓冲中的颜色混合，得到正确的半透明效果。
-若先渲染A，再渲染B。渲染A时，正常写入颜色缓冲，然后渲染B时，B的颜色会和颜色缓冲中的颜色混合，混合效果就反了(本应是透过A显示B)，看起来像是B在A的前面，得到的就是错误的半透明结构。
基于上面两点，渲染引擎一般都会先对物体进行排序，再渲染。常用的方法是：
（1）先渲染所有不透明物体，并开启它们的深度测试和深度写入。
（2）把半透明物体按它们距离摄像机的远近进行排序，然后按照从后往前的顺序渲染这些透明物体，并开启它们的深度测试，但关闭深度写入。
但上述的方法还是有问题。第二步中，从后往前的排列顺序一般是用物体到摄像机的距离来判断，针对这一点我们可以用深度值来判断，但深度值的存储是像素级别的，即每个像素都有一个深度值，但上述的排序是对物体整体的排序，所以要么物体A全部在物体B前面渲染，要么A全部在B后渲染。如果物体之间穿插的话，就无法判断前后，无法得到正确的结果。
我们可以将物体分割为多个部分来帮助我们解决问题，但选择物体的哪部分的深度值来判断远近还是会有问题，总会有可能一个物体部分遮挡一个物体。不过分割方法还是比较有效的解决方法，我们可以尽可能的去避免影响透明度混合的问题。
Unity Shader渲染顺序
Unity为解决渲染顺序的问题提供了渲染队列。我们可以使用SubShader的Queue标签来决定我们的模型属于哪个渲染队列。Unity在内部使用一系列整数索引来表示每个渲染队列，且索引号越小表示越早被渲染。Unity提前定义了下面几个渲染队列：
如果想使用透明度测试，那么代码中应包含相应Tags:
SubShader
{
Tags{"Queue" = "AlphaTest"}
Pass
{
...
}
}
如果想使用透明度混合，代码中应包含相应Tags，并关闭深度写入：
SubShader
{
Tags{"Queue" = "Transparent"}
Pass
{
ZWrite Off
...
}
}
透明度测试
Shader代码：
Shader "Unlit/AlphaTest"
{
Properties
{
_Color("Color Tint", Color) = (1,1,1,1)
_MainTex ("Texture", 2D) = "white" {}
_CutOff("Alpha CutOff", Range(0,1)) = 0.5
}
SubShader
{
Tags { "Queue" = "AlphaTest" "IgnoreProjector" = "Ture" "RenderType"="TransparentCutout" }
Pass
{
Tags {"LightMode" = "ForwardBase"}
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Lighting.cginc"
struct appdata
{
float4 vertex : POSITION;
float3 normal : NORMAL;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
float3 worldNormal : TEXCOORD1;
float3 worldPos : TEXCOORD2;
};
fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
fixed _CutOff;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.worldNormal = UnityObjectToWorldNormal(v.normal);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
return o;
}
fixed4 frag(v2f i) : SV_Target
{
fixed3 worldNormal = normalize(i.worldNormal);
fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
fixed4 texColor = tex2D(_MainTex, i.uv);
// Alpha Test
clip(texColor.a - _CutOff);
fixed3 albedo = texColor.rgb * _Color.rgb;
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldLightDir, worldNormal));
return fixed4(ambient + diffuse, 1.0);
}
ENDCG
}
}
Fallback "Transparent/Cutout/VertexLit"
}
上述代码中IngnoreProjector标签设为True意味着Shader不会受到投影器的影响，RenderType标签设为TransparentCutout用来指明这个Shader归于TransparentCutout组，使用了透明度测试。
片元着色器中的重要函数是clip，定义如下：
void clip(float4 x)
{
if (any(x < 0))
discard;
}
我们传入纹理的透明度值减去阈值的插值，若纹理透明度小于阈值，则被剔除。
效果如下：
透明度混合
我们使用Unity提供的Blend命令来实现混合效果。Blend的一些语义如下：
这里我们使用第二种语义。我们将SrcFactor设为SrcAlpha，DstFactor设为OneMinusSrcAlpha，即混合后的颜色如下:
Shader代码如下：
Shader "Unlit/Blending"
{
Properties
{
_Color("Color Tint", Color) = (1,1,1,1)
_MainTex ("Texture", 2D) = "white" {}
_AlphaScale("Alpha Scale", Range(0,1)) = 1
}
SubShader
{
Tags { "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" }
Pass
{
Tags {"LightMode" = "ForwardBase"}
ZWrite off
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Lighting.cginc"
struct appdata
{
float4 vertex : POSITION;
float3 normal : NORMAL;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
float3 worldNormal : TEXCOORD1;
float3 worldPos : TEXCOORD2;
};
fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
fixed _AlphaScale;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.worldNormal = UnityObjectToWorldNormal(v.normal);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed3 worldNormal = normalize(i.worldNormal);
fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
fixed4 texColor = tex2D(_MainTex, i.uv);
fixed3 albedo = texColor.rgb * _Color.rgb;
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldLightDir, worldNormal));
return fixed4(ambient + diffuse, texColor.a * _AlphaScale);
}
ENDCG
}
}
Fallback "Transparent/VertexLit"
}
大部分代码和透明度测试一样，只是舍弃了clip函数，并将纹理的透明度乘以透明度调节参数输出。同时，在Pass开始时关闭深度写入，以及混合命令。
效果如下：
但上述代码针对复杂网络会有穿插问题。
开启深度写入的半透明效果
我们可以使用两个Pass来渲染模型，第1个Pass开启深度写入，但不输出颜色，它的目的仅仅时把该模型的深度值写入深度缓冲，第2个Pass进行正常的透明度混合，由于上一个Pass已经得到了逐像素的正确的深度信息，该Pass就可以按照像素级别的深度排序结果进行透明渲染。
Shader代码如下：
Shader "Unlit/Blending"
{
Properties
{
_Color("Color Tint", Color) = (1,1,1,1)
_MainTex ("Texture", 2D) = "white" {}
_AlphaScale("Alpha Scale", Range(0,1)) = 1
}
SubShader
{
Tags { "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" }
// 写入深度缓冲的Pass
Pass
{
ZWrite on
ColorMask 0
}
Pass
{
Tags {"LightMode" = "ForwardBase"}
//Cull Front
ZWrite off
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Lighting.cginc"
struct appdata
{
float4 vertex : POSITION;
float3 normal : NORMAL;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
float3 worldNormal : TEXCOORD1;
float3 worldPos : TEXCOORD2;
};
fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
fixed _AlphaScale;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.worldNormal = UnityObjectToWorldNormal(v.normal);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed3 worldNormal = normalize(i.worldNormal);
fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
fixed4 texColor = tex2D(_MainTex, i.uv);
fixed3 albedo = texColor.rgb * _Color.rgb;
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldLightDir, worldNormal));
return fixed4(ambient + diffuse, texColor.a * _AlphaScale);
}
ENDCG
}
}
Fallback "Transparent/VertexLit"
}
新添加的Pass将模型的深度信息写入深度缓冲中，从而提出模型中被自身遮挡的片元。Pass的第一行开启了深度写入，第二行，我们使用ColorMask命令，用于设置颜色通道的写掩码，语义如下：
ColorMask RGB | A | 0 | 其它RGBA组合
ColorMask设为0表明不写入颜色。
ShaderLab混合命令
混合等式和参数
我们已知两个操作数：源颜色S和目标颜色D，想要得到输出颜色O就必须使用一个等式来计算。我们把这个等式称为混合等式。当进行混合时，我们使用两个等式：一个用于混合RGB通道，一个用于混合A通道。设置混合状态时，相当于设置混合等式中的操作和因子。ShaderLab中设置混合因子的命令如下：
第一个命令只提供两个因子，将使用相同的因子混合RGB通道和A通道。下面时ShaderLab支持的因子：
混合因子
默认的混合操作是加操作，我们可以使用BlendOP BlendOperation命令来设置混合操作。下面是ShaderLab支持的混合操作：
双面渲染的透明效果
如果一个物体是透明的，那么它的背面应该也被渲染出来并进行混合。
透明度测试的双面渲染
在Pass中关闭面剔除即可：
Pass
{
Tags {"LightMode" = "ForwardBase"}
Cull Off
效果如下：
透明度混合的双面渲染
在渲染半透明物体时，渲染顺序非常重要，所以我们先渲染背面，再渲染正面，也就是第一个Pass剔除正面，第二个Pass剔除背面。
Shader代码如下：
Shader "Unlit/Blending"
{
Properties
{
_Color("Color Tint", Color) = (1,1,1,1)
_MainTex ("Texture", 2D) = "white" {}
_AlphaScale("Alpha Scale", Range(0,1)) = 1
}
SubShader
{
Tags { "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" }
Pass
{
Tags {"LightMode" = "ForwardBase"}
Cull Front
ZWrite off
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Lighting.cginc"
struct appdata
{
float4 vertex : POSITION;
float3 normal : NORMAL;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
float3 worldNormal : TEXCOORD1;
float3 worldPos : TEXCOORD2;
};
fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
fixed _AlphaScale;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.worldNormal = UnityObjectToWorldNormal(v.normal);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed3 worldNormal = normalize(i.worldNormal);
fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
fixed4 texColor = tex2D(_MainTex, i.uv);
fixed3 albedo = texColor.rgb * _Color.rgb;
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldLightDir, worldNormal));
return fixed4(ambient + diffuse, texColor.a * _AlphaScale);
}
ENDCG
}
Pass
{
Tags {"LightMode" = "ForwardBase"}
Cull Back
ZWrite off
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Lighting.cginc"
struct appdata
{
float4 vertex : POSITION;
float3 normal : NORMAL;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
float3 worldNormal : TEXCOORD1;
float3 worldPos : TEXCOORD2;
};
fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
fixed _AlphaScale;
v2f vert(appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.worldNormal = UnityObjectToWorldNormal(v.normal);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
return o;
}
fixed4 frag(v2f i) : SV_Target
{
fixed3 worldNormal = normalize(i.worldNormal);
fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
fixed4 texColor = tex2D(_MainTex, i.uv);
fixed3 albedo = texColor.rgb * _Color.rgb;
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldLightDir, worldNormal));
return fixed4(ambient + diffuse, texColor.a * _AlphaScale);
}
ENDCG
}
}
Fallback "Transparent/VertexLit"
}
效果如下：
