Unity Shader:透明效果

本文同時發(fā)布在我的個人博客上: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為解決渲染順序的問題提供了渲染隊列。我們可以使用SubShaderQueue標簽來決定我們的模型屬于哪個渲染隊列。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,即混合后的顏色如下:

DstColor_{new} = SrcAlpha \times SrcColor + (1-SrcAlpha)\times DstColor_{old}

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函數,并將紋理的透明度乘以透明度調節(jié)參數輸出。同時,在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通道。設置混合狀態(tài)時,相當于設置混合等式中的操作和因子。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"
}

效果如下:


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 為什么透明效果的渲染順序很重要 書上已經解釋的很清楚了,這邊說一下,為什么對于循環(huán)重疊的半透明物體需要在意渲染順序...
    爛醉花間dlitf閱讀 939評論 0 1
  • 一.需要知道的概念 1.深度緩存 它的基本思想是:根據深度緩存中的值來判斷該片元距離攝像機的距離,當渲染一個片元時...
    無職轉生者閱讀 1,239評論 0 0
  • ●透明是游戲中經常使用的一種效果,在實時渲染透明效果,通常會在渲染模型時控制它的透明通道。在unity中實現透明效...
    黒可樂閱讀 1,207評論 0 0
  • Unity中兩種方法實現透明效果: 1.透明度測試(Alpha Test),無法得到真正半透明效果,另外一種是透明...
    李偌閑閱讀 811評論 0 0
  • 一、前提知識 (1)深度緩存 它的基本思想是:根據深度緩存中的值來判斷該片元距離攝像機的距離,當渲染一個片元時,需...
    zzqlb閱讀 3,212評論 0 1

友情鏈接更多精彩內容