UnityShader:透明度混合(AlphaBlend)

前言

在计算机图形学中,透明度混合(AlphaBlend)是一种常用的技术,用于实现透明效果。透明度混合允许将半透明物体与场景进行混合,以产生逼真的视觉效果。在Unity中,通过编写Shader可以实现透明度混合效果,本篇博客将介绍如何在Unity中使用Shader实现透明度混合效果。

一、什么是透明度混合?

  1. 透明度混合原理
    透明度混合(Alpha blending)是一种图形渲染技术,用于在渲染半透明物体时将其颜色与背景进行混合,从而产生透明效果。在透明度混合中,每个像素的输出颜色是由物体颜色和背景颜色按照一定比例混合而成,这一比例通常由物体的透明度值(Alpha值)来控制。

透明度混合的工作原理是将半透明物体的颜色与场景中已经存在的颜色进行混合,从而实现透明效果。在渲染过程中,透明度混合通常涉及两个关键步骤:关闭深度写入和设置混合模式。

  1. 透明度混合优缺点
    优点:
    实现透明效果: 透明度混合可以有效地模拟透明物体的视觉效果,使其能够与背景进行逼真的混合,从而呈现出真实的透明感。
    增加场景细节: 通过透明度混合,可以在场景中添加半透明的物体,如玻璃、水面等,从而增加场景的丰富程度和细节感。
    增强视觉效果: 透明度混合可以用于创建视觉效果,如烟雾、光线透射等,使场景更加生动和引人注目。

缺点:
性能开销: 透明度混合需要对每个像素进行混合计算,这可能会增加渲染的计算开销,尤其是在有大量透明物体的场景中。
深度排序问题: 当存在多个半透明物体时,需要对它们进行正确的深度排序以避免渲染顺序错误导致的混合错误。这一过程可能会增加开发复杂度并影响渲染性能。
图像质量损失: 透明度混合可能导致图像质量损失,特别是在有大量透明物体重叠的情况下,可能会出现颜色混合不均匀、边缘虚化等问题,影响视觉效果

  1. 纹理图


    image.png

二、使用步骤

  1. Shader 属性定义
// 定义属性
Properties {
    //主纹理贴图
    _MainTex("Main Texture", 2 D) = "white" {}
    // 漫反射颜色属性,默认白色
    _Diffuse("Diffuse Color", Color) = (1, 1, 1, 1)
    // 透明度阈值
    _AlphaScale("Alpha Scale",Range(0,1))=1
}
  1. SubShader 设置
SubShader
{
    Tags
    {
        "Queue" = "Transparent" // 渲染队列为AlphaTest
        "IgnoreProjector" = "True" // 忽略投影
        "RenderType"="Transparent"
    }
    
    LOD 100 // 细节级别
    //关闭深度写入
    ZWrite Off
    //开启混合
    Blend SrcAlpha OneMinusSrcAlpha
}

这段代码定义了一个透明材质的SubShader,其中设置了渲染队列为AlphaTest,忽略投影,使用了透明渲染类型,并关闭了深度写入并开启了混合

  1. 渲染 Pass
Pass
{
    Tags
    {
        "LightMode"="ForwardBase"
    }
    CGPROGRAM
    #pragma vertex vert
    #pragma fragment frag

    // 包含Unity CG库
    #include "UnityCG.cginc"
    // 包含光照CG库
    #include "Lighting.cginc"

    // 漫反射颜色属性
    fixed4 _Diffuse;
    // Alpha阈值
    float _AlphaScale;

    // 主纹理贴图
    sampler2D _MainTex;
    float4 _MainTex_ST;

}

这里开始了渲染 Pass 部分。在这里,我们使用了 CGPROGRAM 指令来声明顶点着色器和片元着色器函数。#pragma vertex vert 和 #pragma fragment frag 分别指定了顶点着色器函数和片元着色器函数的名称。

然后,我们包含了 UnityCG.cginc 和 Lighting.cginc,它们提供了许多有用的函数和宏,用于简化编写 Shader。

  1. 定义结构体和顶点着色器函数
// 定义结构体:从顶点到片段的数据传递
struct v2f {
    float4 vertex: SV_POSITION; // 顶点位置
    fixed3 worldNormal: TEXCOORD0; // 世界空间法线
    fixed3 worldPos: TEXCOORD1; // 世界空间位置
    float2 uv: TEXCOORD2; // 纹理坐标
};

// 顶点着色器函数
v2f vert(appdata_base v) {
    v2f o;
    o.vertex = UnityObjectToClipPos(v.vertex); // 顶点位置变换到裁剪空间
    fixed3 worldNormal = UnityObjectToWorldNormal(v.normal); // 世界空间法线
    o.worldNormal = worldNormal;

    // 让外部的属性可以影响到uv
    //o.uv = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
    // 简化uv计算函数
    o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);

    o.worldPos = mul(unity_ObjectToWorld, v.vertex);
    return o;
}

这个顶点函数的主要功能是将输入的顶点数据从对象空间转换到裁剪空间,并为后续的渲染过程提供必要的信息,包括裁剪空间中的顶点位置、世界空间中的法线、纹理坐标以及顶点的世界空间位置。

  1. 片元着色器函数
// 片元着色器函数
fixed4 frag(v2f i): SV_Target {
    // 获取环境光
    fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;

    // 纹理采样
    fixed4 texColor = tex2D(_MainTex, i.uv);

    // 漫反射
    // 获取光源方向
    //fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);
    // 简化获取光源方向
    fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
    fixed3 diffuse = _LightColor0.rgb * texColor.rgb * _Diffuse.rgb * (dot(worldLightDir, i.worldNormal) *
        0.5 + 0.5);

    // 组合最终颜色
    fixed3 color = diffuse + ambient;
    return fixed4(color, texColor.a * _AlphaScale); // 输出颜色
}

这段代码是一个片元着色器函数,负责计算每个像素的最终颜色输出。首先,从环境光中获取基础颜色值。然后,从_MainTex纹理中采样颜色值。接着,计算漫反射部分,通过获取光源方向和表面法线的点积来模拟光照对表面的影响。最后,将漫反射颜色和环境光颜色相加,乘以纹理的alpha值,并返回作为输出颜色。

三、效果

81ff10dbc7b1464680ac5ee7f932b0d7.gif

四、总结

Unity 中的透明度混合(Alpha Blend)是一种常用的图形渲染技术,它允许将半透明的对象与场景中的其他对象进行混合,以创建逼真的图形效果。以下是关于 Unity 中透明度混合的总结:

基本概念:
透明度混合是指将具有不同透明度的像素合成到最终图像中的过程。
透明度(Alpha)通常表示物体的不透明度,值从 0(完全透明)到 1(完全不透明)。

混合模式:
Unity 支持多种混合模式,包括透明度混合(Alpha Blend)、加法混合(Additive Blend)、乘法混合(Multiplicative Blend)等。
在透明度混合中,新像素的颜色将与背景像素的颜色根据其 Alpha 值进行插值计算,产生最终的颜色。

透明度排序:
在使用透明度混合时,需要正确地排序渲染顺序,以确保透明对象正确地叠加在不透明对象之上。
Unity 中可通过设置渲染顺序(Sorting Order)或手动控制渲染队列(Rendering Queue)来实现透明度排序。

性能考虑:
透明度混合可能会对性能产生一定影响,特别是在移动设备上。
过度使用透明度混合可能导致额外的 GPU 开销,降低渲染性能。

材质设置:
在 Unity 中,可以通过调整材质的 Shader 来控制透明度混合效果。
内置的 Standard Shader 和 Universal Render Pipeline(URP)中的 Lit Shader 都支持透明度混合。

透明度剔除:
透明度剔除(Alpha Cutoff)是一种优化技术,可以根据像素的 Alpha 值进行丢弃,以减少不必要的像素处理。
透明度剔除常用于处理带有透明部分的纹理,如树叶或草地。
总的来说,透明度混合是 Unity 中实现半透明效果的重要技术之一,合理使用并结合透明度排序和性能优化技巧,可以有效地创建逼真的图形效果,并确保良好的性能表现。

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

推荐阅读更多精彩内容