40.透明度测试效果实现

渲染 > Shader > Shader开发入门渲染 Shader Shader开发入门透明效果实现

发布时间 : 2024-10-17 21:10

字数:3.8k 阅读 :

评论:

40.透明-效果实现-透明度测试
1. 40.1 知识点
2. 40.2 知识点代码
  1. Lesson40_透明_效果实现_透明度测试
  2. Lesson40_Transparent_Test.shader

40.透明-效果实现-透明度测试

40.1 知识点

导入资源

这张图透明度分布如下：

透明测试是用于处理哪种透明需求的？

在游戏开发中：

对象的某些部位完全透明，而其他部位完全不透明。
这种透明需求往往不需要半透明效果，相对比较极端，只有看得见和看不见之分。
比如树叶、草、栅栏等。

透明测试的基本原理

基本原理

通过一个阈值来决定哪些像素应该被保留，哪些应该被丢弃。

具体实现

片元携带的颜色信息中的透明度（A值）。
不满足条件时（通常是小于某个阈值），该片元就会被舍弃，不会对颜色缓冲区产生任何影响。
满足条件时（通常是大于等于某个阈值），该片元会按照不透明物体的处理方式来处理。

阈值判断使用的方法

使用CG中的内置函数 clip(参数)。
参数类型可以是 float4、float3、float2、float 等等。
如果传入的参数任何一个分量是负数就会舍弃当前片元，内部实现使用 discard 指令剔除该片元，不再参与渲染。

void clip(float4 x) {
   if(any(x < 0))
      discard;
}

透明测试实现

关键步骤

复制 Lesson26_纹理_单张纹理_纹理结合光照模型 中的颜色纹理结合光照模型的Shader（因为我们的测试资源没有法线贴图等数据）。
在属性中添加一个阈值 _Cutoff，取值范围为0~1，用来设定判断的阈值，并在CG中添加属性的映射成员。
将渲染队列设置为 AlphaTest，并配合 IgnoreProjector 和 RenderType 一起设置。
在片元着色器中获取颜色贴图的颜色后，进行阈值判断。

复制 `Lesson26_纹理_单张纹理_纹理结合光照模型` 中颜色纹理结合光照模型的Shader

Shader "Unlit/Lesson40_Transparent_Test"
{
    Properties
    {
        //主要就是将单张纹理Shader和布林方光照模型逐片元Shader进行一个结合
        _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; //xy代表缩放 zw代表平移
            
            //漫反射颜色、高光反射颜色、光泽度
            fixed4 _MainColor;
            fixed4 _SpecularColor;
            float _SpecularNum;

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

            v2f vert(appdata_base appdata_base)
            {
                v2f v2f;
                
                //把模型空间下的顶点转换到裁剪空间下
                v2f.pos = UnityObjectToClipPos(appdata_base.vertex);
                
                //uv坐标计算
                //appdata_base.texcoord.xy //代表uv坐标
                //appdata_base.texcoord.zw //代表一些额外信息 例如深度值
                //先缩放 后平移 这个是一个固定的算法 规则如此
                //如果没有进行缩放和平移 那么 这个计算后 值是不会产生变化的
                //因为缩放默认值是1和1 ，平移默认值是0和0
                v2f.uv = appdata_base.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
                
                //世界空间下的法线
                v2f.wNormal = UnityObjectToWorldNormal(appdata_base.normal);
                
                //世界空间下的顶点坐标
                v2f.wPos = mul(unity_ObjectToWorld, appdata_base.vertex);
                
                return v2f;
            }

            fixed4 frag(v2f v2f) : SV_Target
            {
                //布林方光照颜色 = 环境光颜色 + 兰伯特漫反射颜色 + 高光反射的颜色
                //兰伯特漫反射颜色 = 光的颜色 * 漫反射材质的颜色 * max(0, dot(世界坐标系下的法线, 光的方向))
                //高光反射的颜色 = 光的颜色 * 高光反射材质的颜色 * pow(max(0, dot(世界坐标系下的法线, 半角向量)), 光泽度)
                //半角向量 = 视角方向 + 光的方向
                
                //新知识点：纹理颜色需要和漫反射材质颜色叠加（乘法） 共同决定最终的颜色
                //最终的颜色
                fixed3 albedo = tex2D(_MainTex, v2f.uv).rgb * _MainColor.rgb;
                
                //光的方向（指向光源方向）
                float3 lightDir = normalize(_WorldSpaceLightPos0.xyz);
                
                //兰伯特漫反射颜色 = 光的颜色 * 漫反射材质的颜色 * max(0, dot(世界坐标系下的法线, 光的方向))
                //新知识点：兰伯特光照模型计算时，漫反射材质颜色使用 1 中的叠加颜色计算
                fixed3 lambertColor = _LightColor0.rgb * albedo.rgb * max(0, dot(v2f.wNormal, lightDir));

                // 视角方向
                //float3 viewDir = normalize(_WorldSpaceCameraPos.xyz - v2f.wPos);
                float3 viewDir = normalize(UnityWorldSpaceViewDir(v2f.wPos));
                
                //半角向量 = 视角方向 + 光的方向
                float3 halfA = normalize(viewDir + lightDir);
                
                //高光反射的颜色 = 光的颜色 * 高光反射材质的颜色 * pow(max(0, dot(世界坐标系下的法线, 半角向量)), 光泽度)
                fixed3 specularColor = _LightColor0.rgb * _SpecularColor * pow(
                    max(0, dot(v2f.wNormal, halfA)), _SpecularNum);

                //布林方光照颜色 = 环境光颜色 + 兰伯特漫反射颜色 + 高光反射的颜色
                //新知识点：最终使用的环境光叠加时，环境光变量UNITY_LIGHTMODEL_AMBIENT需要和 最终的颜色 进行乘法叠加
                // * albedo为了避免最终的渲染效果偏灰 否则会偏灰
                fixed3 color = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo + lambertColor + specularColor;

                return fixed4(color.rgb, 1);
            }
            ENDCG
        }
    }
}

在属性中加一个阈值 `_Cutoff`和映射

在属性中加一个阈值_Cutoff,取值范围为0~1，用来设定用来判断的阈值。并在CG中添加属性的映射成员

Properties
{
    //...

    //透明度测试用的阈值
    _Cutoff("Cutoff", Range(0,1)) = 0
}

//透明度测试用的阈值
fixed _Cutoff;

将渲染队列设置为AlphaTest，并配合IgnoreProjector和RenderType一起设置

//设置渲染队列 决定对象在何时渲染
//"Queue"="AlphaTest"：设置渲染队列，决定了该对象的渲染顺序。AlphaTest指的是该对象会在不透明对象之后、透明对象之前进行渲染。
//"IgnoreProjector"="True"：表示忽略投影机。这意味着该对象不会受到投影机（例如阴影投影器）的影响。可以用于不需要接收阴影的对象，以提高渲染性能。
//"RenderType"="TransparentCutout"：设置渲染类型为TransparentCutout，表示该材质使用透明裁剪技术，类似于Alpha测试，用于部分透明的物体。
Tags
{
    "Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="TransparentCutout"
}

在片元函数中进行阈值判断

在片元函数中获取了颜色贴图颜色后，进行阈值判断

fixed4 frag(v2f v2f) : SV_Target
{
    //颜色纹理的颜色信息
    fixed4 texColor = tex2D(_MainTex, v2f.uv);

    //判断贴图的 颜色信息中的 透明通道 有没有小于阈值 
    //如果小于了 就直接丢弃

    //使用clip函数写法
    clip(texColor.a - _Cutoff);
    
    //手动if写法 和上面等价
    //if(texColor.a - _Cutoff < 0)
    //if(texColor.a < _Cutoff)
    //    discard;

    //纹理颜色需要和漫反射材质颜色叠加（乘法） 共同决定最终的颜色
    // fixed3 albedo = tex2D(_MainTex, v2f.uv).rgb * _MainColor.rgb;//之前的代码 现在把纹理颜色tex2D(_MainTex, v2f.uv).rgb取出来用texColor接
    fixed3 albedo = texColor.rgb * _MainColor.rgb;
    
    //光的方向（指向光源方向）
    float3 lightDir = normalize(_WorldSpaceLightPos0.xyz);
    
    //兰伯特漫反射颜色 = 光的颜色 * 漫反射材质的颜色 * max(0, dot(世界坐标系下的法线, 光的方向))
    //新知识点：兰伯特光照模型计算时，漫反射材质颜色使用 1 中的叠加颜色计算
    fixed3 lambertColor = _LightColor0.rgb * albedo.rgb * max(0, dot(v2f.wNormal, lightDir));

    // 视角方向
    //float3 viewDir = normalize(_WorldSpaceCameraPos.xyz - v2f.wPos);
    float3 viewDir = normalize(UnityWorldSpaceViewDir(v2f.wPos));
    
    //半角向量 = 视角方向 + 光的方向
    float3 halfA = normalize(viewDir + lightDir);
    
    //高光反射的颜色 = 光的颜色 * 高光反射材质的颜色 * pow(max(0, dot(世界坐标系下的法线, 半角向量)), 光泽度)
    fixed3 specularColor = _LightColor0.rgb * _SpecularColor * pow(
        max(0, dot(v2f.wNormal, halfA)), _SpecularNum);

    //布林方光照颜色 = 环境光颜色 + 兰伯特漫反射颜色 + 高光反射的颜色
    //新知识点：最终使用的环境光叠加时，环境光变量UNITY_LIGHTMODEL_AMBIENT需要和 最终的颜色 进行乘法叠加
    // * albedo为了避免最终的渲染效果偏灰 否则会偏灰
    fixed3 color = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo + lambertColor + specularColor;

    return fixed4(color.rgb, 1);
}

创建材质测试

创建材质，修改透明度阈值进行测试，可以看到大于阈值的区域会丢弃

注意：我们没有关闭深度写入。因为没有必要。对于透明度测试，要不就显示要不就不显示。只需要将将渲染队列设置为AlphaTest，这样会晚于不透明物体进行渲染

40.2 知识点代码

Lesson40_透明_效果实现_透明度测试

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Lesson40_透明_效果实现_透明度测试 : MonoBehaviour
{
    void Start()
    {
        #region 准备工作 导入资源

        #endregion

        #region 知识点一 透明测试是用于处理哪种透明需求的？

        //在游戏开发中
        //对象的某些部位完全透明而其他部位完全不透明
        //这种透明需求往往不需要半透明效果
        //相对比较极端，只有看得见和看不见之分
        //比如树叶、草、栅栏等等

        #endregion

        #region 知识点二 透明测试的基本原理

        //基本原理：
        //  通过一个阈值来决定哪些像素应该被保留，哪些应该被丢弃

        //具体实现：
        //  片元携带的颜色信息中的透明度（A值）

        //  不满足条件时（通常是小于某个阈值）
        //  该片元就会被舍弃，被舍弃的片元不会在进行任何处理，不会对颜色缓冲区产生任何影响

        //  满足条件时（通常是大于等于某个阈值）
        //  该片元会按照不透明物体的处理方式来处理

        //阈值判断使用的方法：
        //利用CG中的内置函数：clip(参数)
        //该函数有重载，参数类型可以是 float4 float3 float2 float 等等
        //如果传入的参数任何一个分量是负数就会舍弃当前片元
        //它的内部实现会用到一个 discard 指令，代表剔除该片元 不再参与渲染
        //void clip(float4 x)
        //{
        //   if(any(x < 0))
        //      discard;
        //}

        #endregion

        #region 知识点三 透明测试实现

        //1.复制 Lesson26_纹理_单张纹理_纹理结合光照模型 中颜色纹理结合光照模型的Shader(因为我们的测试资源没有法线贴图等数据)
        //2.在属性中加一个阈值_Cutoff,取值范围为0~1，用来设定用来判断的阈值。并在CG中添加属性的映射成员
        //3.将渲染队列设置为AlphaTest，并配合IgnoreProjector和RenderType一起设置
        //4.在片元着色器中获取了颜色贴图颜色后，就进行阈值判断

        #endregion
    }
}

Lesson40_Transparent_Test.shader

Shader "Unlit/Lesson40_Transparent_Test"
{
    Properties
    {
        //主要就是将单张纹理Shader和布林方光照模型逐片元Shader进行一个结合
        _MainTex("MainTex", 2D) = ""{}
        //漫反射颜色
        _MainColor("MainColor", Color) = (1,1,1,1)
        //高光反射颜色
        _SpecularColor("SpecularColor", Color) = (1,1,1,1)
        //光泽度
        _SpecularNum("SpecularNum", Range(0,20)) = 15
        //透明度测试用的阈值
        _Cutoff("Cutoff", Range(0,1)) = 0
    }
    SubShader
    {
        //设置渲染队列 决定对象在何时渲染
        //"Queue"="AlphaTest"：设置渲染队列，决定了该对象的渲染顺序。AlphaTest指的是该对象会在不透明对象之后、透明对象之前进行渲染。
        //"IgnoreProjector"="True"：表示忽略投影机。这意味着该对象不会受到投影机（例如阴影投影器）的影响。可以用于不需要接收阴影的对象，以提高渲染性能。
        //"RenderType"="TransparentCutout"：设置渲染类型为TransparentCutout，表示该材质使用透明裁剪技术，类似于Alpha测试，用于部分透明的物体。
        Tags
        {
            "Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="TransparentCutout"
        }
        Pass
        {
            Tags
            {
                "LightMode" = "ForwardBase"
            }
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            #include "Lighting.cginc"

            //纹理贴图对应的映射成员
            
            //映射对应纹理属性的图片颜色相关数据
            sampler2D _MainTex;
            
            //映射对应纹理属性的 缩放 平(偏)移数据
            float4 _MainTex_ST; //xy代表缩放 zw代表平移
            
            //漫反射颜色、高光反射颜色、光泽度
            fixed4 _MainColor;
            fixed4 _SpecularColor;
            float _SpecularNum;
            
            //透明度测试用的阈值
            fixed _Cutoff;

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

            v2f vert(appdata_base appdata_base)
            {
                v2f v2f;
                
                //把模型空间下的顶点转换到裁剪空间下
                v2f.pos = UnityObjectToClipPos(appdata_base.vertex);
                
                //uv坐标计算
                //appdata_base.texcoord.xy //代表uv坐标
                //appdata_base.texcoord.zw //代表一些额外信息 例如深度值
                //先缩放 后平移 这个是一个固定的算法 规则如此
                //如果没有进行缩放和平移 那么 这个计算后 值是不会产生变化的
                //因为缩放默认值是1和1 ，平移默认值是0和0
                v2f.uv = appdata_base.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
                
                //世界空间下的法线
                v2f.wNormal = UnityObjectToWorldNormal(appdata_base.normal);
                
                //世界空间下的顶点坐标
                v2f.wPos = mul(unity_ObjectToWorld, appdata_base.vertex);
                
                return v2f;
            }

            fixed4 frag(v2f v2f) : SV_Target
            {
                //颜色纹理的颜色信息
                fixed4 texColor = tex2D(_MainTex, v2f.uv);

                //判断贴图的 颜色信息中的 透明通道 有没有小于阈值 
                //如果小于了 就直接丢弃

                //使用clip函数写法
                clip(texColor.a - _Cutoff);
                
                //手动if写法 和上面等价
                //if(texColor.a - _Cutoff < 0)
                //if(texColor.a < _Cutoff)
                //    discard;

                //纹理颜色需要和漫反射材质颜色叠加（乘法） 共同决定最终的颜色
                // fixed3 albedo = tex2D(_MainTex, v2f.uv).rgb * _MainColor.rgb;//之前的代码 现在把纹理颜色tex2D(_MainTex, v2f.uv).rgb取出来用texColor接
                fixed3 albedo = texColor.rgb * _MainColor.rgb;
                
                //光的方向（指向光源方向）
                float3 lightDir = normalize(_WorldSpaceLightPos0.xyz);
                
                //兰伯特漫反射颜色 = 光的颜色 * 漫反射材质的颜色 * max(0, dot(世界坐标系下的法线, 光的方向))
                //新知识点：兰伯特光照模型计算时，漫反射材质颜色使用 1 中的叠加颜色计算
                fixed3 lambertColor = _LightColor0.rgb * albedo.rgb * max(0, dot(v2f.wNormal, lightDir));

                // 视角方向
                //float3 viewDir = normalize(_WorldSpaceCameraPos.xyz - v2f.wPos);
                float3 viewDir = normalize(UnityWorldSpaceViewDir(v2f.wPos));
                
                //半角向量 = 视角方向 + 光的方向
                float3 halfA = normalize(viewDir + lightDir);
                
                //高光反射的颜色 = 光的颜色 * 高光反射材质的颜色 * pow(max(0, dot(世界坐标系下的法线, 半角向量)), 光泽度)
                fixed3 specularColor = _LightColor0.rgb * _SpecularColor * pow(
                    max(0, dot(v2f.wNormal, halfA)), _SpecularNum);

                //布林方光照颜色 = 环境光颜色 + 兰伯特漫反射颜色 + 高光反射的颜色
                //新知识点：最终使用的环境光叠加时，环境光变量UNITY_LIGHTMODEL_AMBIENT需要和 最终的颜色 进行乘法叠加
                // * albedo为了避免最终的渲染效果偏灰 否则会偏灰
                fixed3 color = UNITY_LIGHTMODEL_AMBIENT.rgb * albedo + lambertColor + specularColor;

                return fixed4(color.rgb, 1);
            }
            ENDCG
        }
    }
}

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 785293209@qq.com