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为解决渲染顺序的问题提供了渲染队列。我们可以使用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函数,并将纹理的透明度乘以透明度调节参数输出。同时,在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"
}

效果如下:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • 为什么透明效果的渲染顺序很重要 书上已经解释的很清楚了,这边说一下,为什么对于循环重叠的半透明物体需要在意渲染顺序...
    烂醉花间dlitf阅读 794评论 0 1
  • 一.需要知道的概念 1.深度缓存 它的基本思想是:根据深度缓存中的值来判断该片元距离摄像机的距离,当渲染一个片元时...
    无职转生者阅读 1,146评论 0 0
  • ●透明是游戏中经常使用的一种效果,在实时渲染透明效果,通常会在渲染模型时控制它的透明通道。在unity中实现透明效...
    黒可乐阅读 1,105评论 0 0
  • Unity中两种方法实现透明效果: 1.透明度测试(Alpha Test),无法得到真正半透明效果,另外一种是透明...
    李偌闲阅读 745评论 0 0
  • 一、前提知识 (1)深度缓存 它的基本思想是:根据深度缓存中的值来判断该片元距离摄像机的距离,当渲染一个片元时,需...
    zzqlb阅读 3,093评论 0 1