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

最新推荐文章于 2025-09-05 09:34:01 发布

原创

最新推荐文章于 2025-09-05 09:34:01 发布 · 4.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#unity #贴图 #shader

功能需求：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