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代碼：

Shader "My Shader/AlphaShader"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Texture", 2D) = "white" {}
        _Cutoff ("Alpha Cutoff", Range(0, 1)) = 0.5
    }
    SubShader
    {
        // 透明度測試隊列為AlphaTest，所以Queue=AlphaTest
        // RenderType標簽讓Unity把這個Shader歸入提前定義的組中，以指明該Shader是一個使用了透明度測試的Shader
        // IgonreProjector為True表明此Shader不受投影器（Projectors）影響
        Tags { "Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="TransparentCutout" }

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

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

            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;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Color;
            // 用於決定調用clip函數時進行的透明度測試使用的判斷條件
            fixed _Cutoff;
            
            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);

                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldPos = normalize(i.worldPos);
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(worldPos));
                // 紋素值
                fixed4 texColor = tex2D(_MainTex, i.uv);
                // 原理
                // if ((texColor.a - _Cutoff) < 0.0) { discard; }
                // 如果結果小於0，將片元舍棄
                clip(texColor.a - _Cutoff);
                // 反射率
                fixed3 albedo =  texColor.rgb * _Color.rgb;
                // 環境光
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;
                // 漫反射
                fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldNormal, worldLightDir));
                return fixed4(ambient + diffuse, 1.0);
            }
            ENDCG
        }
    }
}

透明度混合

那我們看看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代碼為：

Shader "My Shader/AlphaShader"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Texture", 2D) = "white" {}
        _AlphaScale ("Alpha Scale", Range(0, 1)) = 1
    }
    SubShader
    {
        // 透明度混合隊列為Transparent，所以Queue=Transparent
        // RenderType標簽讓Unity把這個Shader歸入提前定義的組中，以指明該Shader是一個使用了透明度混合的Shader
        // IgonreProjector為True表明此Shader不受投影器（Projectors）影響
        Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }

        Pass
        {
            Tags { "LightMode"="ForwardBase" }
            
            // 關閉深度寫入
            ZWrite Off
            // 開啟混合模式，並設置混合因子為SrcAlpha和OneMinusSrcAlpha
            Blend SrcAlpha OneMinusSrcAlpha

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

            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;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Color;
            // 用於決定調用clip函數時進行的透明度測試使用的判斷條件
            fixed _AlphaScale;
            
            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);

                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldPos = normalize(i.worldPos);
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(worldPos));
                // 紋素值
                fixed4 texColor = tex2D(_MainTex, i.uv);
                // 反射率
                fixed3 albedo =  texColor.rgb * _Color.rgb;
                // 環境光
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;
                // 漫反射
                fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldNormal, worldLightDir));
                // 返回顏色，透明度部分乘以我們設定的值
                return fixed4(ambient + diffuse, texColor.a * _AlphaScale);
            }
            ENDCG
        }
    }
}

然而這種實現方式是有問題的。就像前面說的一樣，它並不能渲染正確的順序。

解決方式：用兩個Pass來渲染模型

• 第一個Pass：開啟深度寫入，但不輸出顏色，目的僅僅為了填充深度緩沖。
• 第二個Pass：正常的透明度混合，由於上一個Pass已經得到了逐像素的正確深度信息，該Pass就可以按照像素級別的深度排序進行透明渲染。
• 缺點：多了一個Pass性能有所影響。

代碼如下：

Shader "My Shader/AlphaShader"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Texture", 2D) = "white" {}
        _AlphaScale ("Alpha Scale", Range(0, 1)) = 1
    }
    SubShader
    {
        // 透明度混合隊列為Transparent，所以Queue=Transparent
        // RenderType標簽讓Unity把這個Shader歸入提前定義的組中，以指明該Shader是一個使用了透明度混合的Shader
        // IgonreProjector為True表明此Shader不受投影器（Projectors）影響
        Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }

        Pass
        {
            // 開啟深度寫入
            ZWrite On
            // 設置顏色通道的寫掩碼，0為不寫入任何顏色
            ColorMask 0
        }

        Pass
        {
            Tags { "LightMode"="ForwardBase" }
            
            // 關閉深度寫入
            ZWrite Off
            // 開啟混合模式，並設置混合因子為SrcAlpha和OneMinusSrcAlpha
            Blend SrcAlpha OneMinusSrcAlpha

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

            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;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Color;
            // 用於決定調用clip函數時進行的透明度測試使用的判斷條件
            fixed _AlphaScale;
            
            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);

                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldPos = normalize(i.worldPos);
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(worldPos));
                // 紋素值
                fixed4 texColor = tex2D(_MainTex, i.uv);
                // 反射率
                fixed3 albedo =  texColor.rgb * _Color.rgb;
                // 環境光
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;
                // 漫反射
                fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldNormal, worldLightDir));
                // 返回顏色，透明度部分乘以我們設定的值
                return fixed4(ambient + diffuse, texColor.a * _AlphaScale);
            }
            ENDCG
        }
    }
}

雙面渲染的透明效果

對於剛才的立方體，雖然是透明的，但是卻看不到里面的構造，是不是感覺也不太對，如果想看到內部構造怎么辦呢？

Unity默認會剔除物體的背面（就是內部），那么我們可以用Cull指令來控制需要剔除哪個面的渲染圖元。

• Cull Back：背對着攝像機的渲染圖元不會渲染，默認情況。
• Cull Front：朝向攝像機的渲染圖元不會渲染。
• Cull Off：關閉剔除功能，所有的都會渲染。缺點：需要渲染的數目成倍增加，除非用於特殊效果，建議不開啟。

接下來我們看一下效果：

這回也是用連個Pass來完成：第一個Pass渲染背面，第二個Pass渲染前面

Shader 代碼如下:

Shader "My Shader/AlphaShader"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Texture", 2D) = "white" {}
        _AlphaScale ("Alpha Scale", Range(0, 1)) = 1
    }
    SubShader
    {
        // 透明度混合隊列為Transparent，所以Queue=Transparent
        // RenderType標簽讓Unity把這個Shader歸入提前定義的組中，以指明該Shader是一個使用了透明度混合的Shader
        // IgonreProjector為True表明此Shader不受投影器（Projectors）影響
        Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }

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

            // 只渲染背面
            Cull Front
            // 關閉深度寫入
            ZWrite Off
            // 開啟混合模式，並設置混合因子為SrcAlpha和OneMinusSrcAlpha
            Blend SrcAlpha OneMinusSrcAlpha

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

            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;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Color;
            // 用於決定調用clip函數時進行的透明度測試使用的判斷條件
            fixed _AlphaScale;
            
            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);

                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldPos = normalize(i.worldPos);
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(worldPos));
                // 紋素值
                fixed4 texColor = tex2D(_MainTex, i.uv);
                // 反射率
                fixed3 albedo =  texColor.rgb * _Color.rgb;
                // 環境光
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;
                // 漫反射
                fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldNormal, worldLightDir));
                // 返回顏色，透明度部分乘以我們設定的值
                return fixed4(ambient + diffuse, texColor.a * _AlphaScale);
            }
            ENDCG
        }

        Pass
        {
            Tags { "LightMode"="ForwardBase" }
            
            // 只渲染前面
            Cull Back 
            // 關閉深度寫入
            ZWrite Off
            // 開啟混合模式，並設置混合因子為SrcAlpha和OneMinusSrcAlpha
            Blend SrcAlpha OneMinusSrcAlpha

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

            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;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Color;
            // 用於決定調用clip函數時進行的透明度測試使用的判斷條件
            fixed _AlphaScale;
            
            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);

                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldPos = normalize(i.worldPos);
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(worldPos));
                // 紋素值
                fixed4 texColor = tex2D(_MainTex, i.uv);
                // 反射率
                fixed3 albedo =  texColor.rgb * _Color.rgb;
                // 環境光
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;
                // 漫反射
                fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(worldNormal, worldLightDir));
                // 返回顏色，透明度部分乘以我們設定的值
                return fixed4(ambient + diffuse, texColor.a * _AlphaScale);
            }
            ENDCG
        }
    }
}