赞
踩
功能需求: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,然后把两者相加后存入颜色缓冲中。
即可实现以上效果。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。