当前位置:   article > 正文

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

unity 正片叠底

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

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

 正文开始:

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

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

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

shader代码贴出来:

  1. Shader "Unlit/BlendMod2"
  2. {
  3. Properties
  4. {
  5. _MainTex ("Texture", 2D) = "white" {}
  6. _BlendTex ("Texture", 2D) = "white" {}
  7. }
  8. CGINCLUDE
  9. #include "UnityCG.cginc"
  10. struct appdata
  11. {
  12. float4 vertex : POSITION;
  13. float2 uv : TEXCOORD0;
  14. };
  15. struct v2f
  16. {
  17. float2 uv : TEXCOORD0;
  18. UNITY_FOG_COORDS(1)
  19. float4 vertex : SV_POSITION;
  20. };
  21. sampler2D _MainTex;
  22. float4 _MainTex_ST;
  23. sampler2D _BlendTex;
  24. v2f vert (appdata v)
  25. {
  26. v2f o;
  27. o.vertex = UnityObjectToClipPos(v.vertex);
  28. o.uv = TRANSFORM_TEX(v.uv, _MainTex);
  29. UNITY_TRANSFER_FOG(o,o.vertex);
  30. return o;
  31. }
  32. fixed4 frag (v2f i) : SV_Target
  33. {
  34. fixed4 A = tex2D(_MainTex, i.uv); //A为底图rgba 四维向量
  35. fixed4 B = tex2D(_BlendTex,i.uv); //B为混合图rgba 四维向量
  36. fixed4 C = A * B;
  37. return C;
  38. }
  39. ENDCG
  40. SubShader
  41. {
  42. Tags{ "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" }
  43. Pass
  44. {
  45. Tags {"LightMode" = "ForwardBase"}
  46. ZWrite off
  47. Blend SrcAlpha OneMinusSrcAlpha
  48. CGPROGRAM
  49. #pragma vertex vert
  50. #pragma fragment frag
  51. // make fog work
  52. #pragma multi_compile_fog
  53. ENDCG
  54. }
  55. }
  56. }

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

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

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

即可实现以上效果。

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/98035
推荐阅读
相关标签
  

闽ICP备14008679号