US3S3L5——透明度混合

透明度混合

透明度测试，并不能用于实现半透明效果，
它只存在看得见和完全看不见两种状态，一般用来处理镂空效果
而透明度混合，主要就是用来实现半透明效果的

透明度混合的基本原理

基本原理：关闭深度写入，开启混合，让片元颜色和颜色缓冲区中颜色进行混合计算

具体实现：

1. 采用半透明的混合因子进行混合，以 Blend SrcAlpha OneMinusSrcAlpha​ 为例：

   因此：

   $$\begin{align*} 输出颜色 & = SrcAlpha \times 源颜色 + (1 - SrcAlpha) \times 目标颜色 \\ & = 源颜色透明度 \times 源颜色 + (1 - 源颜色透明度) \times 目标颜色 \end{align*}$$

2. 声明一个 0~1 区间的 _AlphaScale​ 用于控制对象整体透明度

透明度混合实现

值得一提的是，一般透明材质的 Shader 的名字后面会跟随一个 _Transparent​ 的后缀

1. 复用 颜色纹理结合光照模型 的Shader

   Shader "TeachShader/Lesson57_Transparent"
   {
       Properties
       {
           _MainTex("MainTex", 2D) = ""{}                          // 纹理贴图
           _MainColor("MainColor", Color) = (1, 1, 1, 1)           // 漫反射颜色
           _SpecularColor("SpecularColor", Color) = (1, 1, 1, 1)   // 高光反射颜色
           _SpecularNum("SpecularNum", Range(0, 20)) = 15          // 光泽度
       }
       SubShader
       {
           Pass
           {
               Tags { "LightMode" = "ForwardBase" }
   
               CGPROGRAM
               #pragma vertex vert
               #pragma fragment frag
               #include "UnityCG.cginc"
               #include "Lighting.cginc"
   
               // 贴图纹理对应的映射成员
               sampler2D _MainTex;
               float4 _MainTex_ST;
               // 漫反射颜色、高光反射颜色、光泽度
               fixed4 _MainColor;
               fixed4 _SpecularColor;
               float _SpecularNum;
   
               struct v2f
               {
                   float4 pos: SV_POSITION;    // 裁剪空间下的顶点坐标
                   float2 uv: TEXCOORD0;       // 纹理UV坐标
                   float3 wNormal: NORMAL;     // 世界空间下的法线
                   float3 wPos: TEXCOORD1;     // 世界空间下的顶点坐标
               };
   
               v2f vert (appdata_base v)
               {
                   v2f data;
                   data.pos = UnityObjectToClipPos(v.vertex);                  // 将模型空间下的法线转换到世界空间下
                   data.uv = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;  // 计算UV
                   data.wNormal = UnityObjectToWorldNormal(v.normal);          // 法线转换到世界空间
                   data.wPos = mul(unity_ObjectToWorld, v.vertex);             // 顶点转换到世界空间
   
                   return data;
               }
   
               fixed4 frag (v2f i) : SV_Target
               {
                   fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _MainColor.rgb; // 反射率，即纹理颜色和漫反射材质颜色乘法叠加共同决定的颜色
           
                   // 漫反射颜色
                   float3 lightDir = normalize(_WorldSpaceLightPos0.xyz);      // 指向光源的方向
                   fixed3 lambertColor = _LightColor0.rgb * albedo.rgb * max(0, dot(i.wNormal, lightDir));
           
                   // 高光反射颜色
                   float3 viewDir = normalize(UnityWorldSpaceViewDir(i.wPos)); // 视角方向
                   float3 halfA = normalize(viewDir + lightDir);               // 半角向量
                   fixed3 specularColor = _LightColor0.rgb * _SpecularColor.rgb * pow(max(0, dot(i.wNormal, halfA)), _SpecularNum);
   
                   // 最终颜色 = 环境光 * 反射颜色 + 漫反射颜色 + 高光反射颜色
                   fixed3 color = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo + lambertColor + specularColor;
   
                   return fixed4(color.rgb, 1);
               }
               ENDCG
           }
       }
   }

2. 在属性中加一个透明值 _AlphaScale​，取值范围为 0~1，用来设定对象整体透明度。并在CG中添加属性的映射成员（使用 fixed​）

   Properties
   {
       _MainTex("MainTex", 2D) = ""{}                          // 纹理贴图
       _MainColor("MainColor", Color) = (1, 1, 1, 1)           // 漫反射颜色
       _SpecularColor("SpecularColor", Color) = (1, 1, 1, 1)   // 高光反射颜色
       _SpecularNum("SpecularNum", Range(0, 20)) = 15          // 光泽度
       _AlphaScale("AlphaScale", Range(0, 1)) = 1              // 对象总体透明度
   }

   // 贴图纹理对应的映射成员
   sampler2D _MainTex;
   float4 _MainTex_ST;
   // 漫反射颜色、高光反射颜色、光泽度
   fixed4 _MainColor;
   fixed4 _SpecularColor;
   float _SpecularNum;
   // 对象整体透明度
   fixed _AlphaScale;

3. 将渲染队列设置为 Transparent​，并配合 IgnoreProjector​ 和 RenderType​ 一起设置

   SubShader
   {
       Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
       Pass { /*...*/ }
   }

4. 关闭深度写入 Zwrite off​，设置混合因子 Blend SrcAlpha OneMinusSrcAlpha​

   SubShader
   {
       Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
   
       Pass
       {
           Tags { "LightMode" = "ForwardBase" }
           ZWrite Off                            //半透明效果关闭深度写入
           Blend SrcAlpha OneMinusSrcAlpha        //设置混合因子
   
           CGPROGRAM
           // ...
           ENDCG
       }
   }

5. 在片元着色器中获取了颜色贴图颜色后，修改最后返回颜色的 A 值为：纹理.a * _AlphaScale​

   fixed4 frag (v2f i) : SV_Target
   {
       fixed4 texColor = tex2D(_MainTex, i.uv);                    // 取出纹理的颜色
       fixed3 albedo = texColor.rgb * _MainColor.rgb;              // 反射率，即纹理颜色和漫反射材质颜色乘法叠加共同决定的颜色
   
       // 漫反射颜色
       float3 lightDir = normalize(_WorldSpaceLightPos0.xyz);      // 指向光源的方向
       fixed3 lambertColor = _LightColor0.rgb * albedo.rgb * max(0, dot(i.wNormal, lightDir));
   
       // 高光反射颜色
       float3 viewDir = normalize(UnityWorldSpaceViewDir(i.wPos)); // 视角方向
       float3 halfA = normalize(viewDir + lightDir);               // 半角向量
       fixed3 specularColor = _LightColor0.rgb * _SpecularColor.rgb * pow(max(0, dot(i.wNormal, halfA)), _SpecularNum);
   
       // 最终颜色 = 环境光 * 反射颜色 + 漫反射颜色 + 高光反射颜色
       fixed3 color = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo + lambertColor + specularColor;
       // 最终透明度 = A通道值 * 整体透明度
       return fixed4(color.rgb, texColor.a * _AlphaScale);
   }

完整 Shader 实现如下：

Shader "TeachShader/Lesson57_Transparent"
{
    Properties
    {
        _MainTex("MainTex", 2D) = ""{}                          // 纹理贴图
        _MainColor("MainColor", Color) = (1, 1, 1, 1)           // 漫反射颜色
        _SpecularColor("SpecularColor", Color) = (1, 1, 1, 1)   // 高光反射颜色
        _SpecularNum("SpecularNum", Range(0, 20)) = 15          // 光泽度
        _AlphaScale("AlphaScale", 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 "UnityCG.cginc"
            #include "Lighting.cginc"

            // 贴图纹理对应的映射成员
            sampler2D _MainTex;
            float4 _MainTex_ST;
            // 漫反射颜色、高光反射颜色、光泽度
            fixed4 _MainColor;
            fixed4 _SpecularColor;
            float _SpecularNum;
            // 对象整体透明度
            fixed _AlphaScale;

            struct v2f
            {
                float4 pos: SV_POSITION;    // 裁剪空间下的顶点坐标
                float2 uv: TEXCOORD0;       // 纹理UV坐标
                float3 wNormal: NORMAL;     // 世界空间下的法线
                float3 wPos: TEXCOORD1;     // 世界空间下的顶点坐标
            };

            v2f vert (appdata_base v)
            {
                v2f data;
                data.pos = UnityObjectToClipPos(v.vertex);                  // 将模型空间下的法线转换到世界空间下
                data.uv = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;  // 计算UV
                data.wNormal = UnityObjectToWorldNormal(v.normal);          // 法线转换到世界空间
                data.wPos = mul(unity_ObjectToWorld, v.vertex);             // 顶点转换到世界空间

                return data;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 texColor = tex2D(_MainTex, i.uv);                    // 取出纹理的颜色
                fixed3 albedo = texColor.rgb * _MainColor.rgb;              // 反射率，即纹理颜色和漫反射材质颜色乘法叠加共同决定的颜色
        
                // 漫反射颜色
                float3 lightDir = normalize(_WorldSpaceLightPos0.xyz);      // 指向光源的方向
                fixed3 lambertColor = _LightColor0.rgb * albedo.rgb * max(0, dot(i.wNormal, lightDir));
        
                // 高光反射颜色
                float3 viewDir = normalize(UnityWorldSpaceViewDir(i.wPos)); // 视角方向
                float3 halfA = normalize(viewDir + lightDir);               // 半角向量
                fixed3 specularColor = _LightColor0.rgb * _SpecularColor.rgb * pow(max(0, dot(i.wNormal, halfA)), _SpecularNum);

                // 最终颜色 = 环境光 * 反射颜色 + 漫反射颜色 + 高光反射颜色
                fixed3 color = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo + lambertColor + specularColor;
                // 最终透明度 = A通道值 * 整体透明度
                return fixed4(color.rgb, texColor.a * _AlphaScale);
            }
            ENDCG
        }
    }
}

效果展示：

​​