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,然后把两者相加后存入颜色缓冲中。

即可实现以上效果。

猜你喜欢

转载自blog.csdn.net/IT_choshim/article/details/129302921