unity Image/RawImage贴图透明度渐变/融合 & 正片叠底

功能需求:UI边界太硬,需要做个渐变看起来更柔和。

最终效果:(UI上方透明度渐变)

 正文开始:

方法一:通过获取 Image/RawImage UI顶点数据(color属性的Alpha)来处理。可参考文档->Image透明度渐变(Graphic)

但是,此方法实现透明渐变(自下而上),但是最终透明效果是整张图都有了透明(最下方透明度为1,最上方为0,自下而上渐变)。与我们最终需求不同,于是开始了方法二。

方法二:通过一张白色透明度渐变的png贴图,实现与原图的正片叠底(任何颜色于白色正片叠底,原颜色保持不变)

shader代码贴出来:

Shader "Unlit/BlendMod2"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_BlendTex ("Texture", 2D) = "white" {}
	}
	CGINCLUDE
	#include "UnityCG.cginc"
	struct appdata
	{
		float4 vertex : POSITION;
		float2 uv : TEXCOORD0;
	};
	struct v2f
	{
		float2 uv : TEXCOORD0;
		UNITY_FOG_COORDS(1)
		float4 vertex : SV_POSITION;
	};
	sampler2D _MainTex;
	float4 _MainTex_ST;
	sampler2D _BlendTex;
	v2f vert (appdata v)
	{
		v2f o;
		o.vertex = UnityObjectToClipPos(v.vertex);
		o.uv = TRANSFORM_TEX(v.uv, _MainTex);
		UNITY_TRANSFER_FOG(o,o.vertex);
		return o;
	}

	fixed4 frag (v2f i) : SV_Target
	{
		
		fixed4 A = tex2D(_MainTex, i.uv);	//A为底图rgba 四维向量 
		fixed4 B = tex2D(_BlendTex,i.uv);	//B为混合图rgba 四维向量
		
		fixed4 C = A * B;

		return C;
	}
	
	ENDCG
	SubShader
	{
		Tags{ "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" }
		
		Pass
		{
			Tags {"LightMode" = "ForwardBase"}
			ZWrite off
			Blend SrcAlpha OneMinusSrcAlpha

			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			// make fog work
			#pragma multi_compile_fog
			ENDCG
		}
	}
}

 注意:Pass代码块中要添加 Blend SrcAlpha OneMinusSrcAlpha

Blend 是 ShaderLab 命令,在Pass块中使用可为该通道设置渲染状态。

开启混合,并设置混合因子。源颜色(该片元产生的颜色)会乘以SrcAlpha,而目标颜色(已经存在于颜色缓存的颜色)会乘以 OneMinusSrcAlpha,然后把两者相加后存入颜色缓冲中。

即可实现以上效果。

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值