unity Image/RawImage贴图透明度渐变/融合 & 正片叠底-Toy模板网

这篇具有很好参考价值的文章主要介绍了unity Image/RawImage贴图透明度渐变/融合 & 正片叠底。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

最终效果：（UI上方透明度渐变）

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

正文开始：

方法一：通过获取 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，然后把两者相加后存入颜色缓冲中。

即可实现以上效果。

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