首页 > 其他分享 >UGUI之Mask切割图像shader应用

UGUI之Mask切割图像shader应用

时间:2023-01-05 15:00:34浏览次数:56  
标签:Stencil color vertex Float Mask shader UGUI uv


在我之前的一篇文章写到使用Mask切割图像的方法。具体链接

​http://www.manew.com/thread-93954-1-1.html​


正如一些朋友所说上面这种方法把图放大之后确实存在有边缘出现锯齿的情况。由于我工作项目做的是手机端切割用户头像,手机屏幕小根本看不出来锯齿所以当时就用了这个方法,但追求完美的程序的都想做到无懈可击。看到网上一篇写了用shader配合Mask的方法,由于我对shader的不熟那篇文章又写的十分简洁,所以我不能立刻看懂,经过小小研究终于实现了消除锯齿的这种切割方法。希望我走过的坑可以让大家避免因此我觉得有必要详细的写下每个步骤。废话不说了


重点是看Hieranchy面板里和属性面板。Hieranchy面板里是一个用来切割圆形的图片,同时也作为Mask。而下面那个Image是被切割的方形图片()也就是左侧看到的那个头像)

之后要给被切割图片加上一个新建的材质球,这个材质球目的就是为了放置Shader。

所以接下来就是为材质球贴上shader脚本和一个圆形图片(这个圆形图片就是上面mask那个物体上的那个圆形图)。如下图:


由于我对Shader不熟所以这里直接贴出

接下来就是shader源码:

纯文本查看  复制代码

   Shader 
"ImageEffect/MaskIcon"





{






Properties






{






[PerRendererData] _MainTex (
"Sprite Texture"
, 2D) =
"white"
{}






_Mask (
"Base (RGB)"
, 2D) =
"white"
{}


















_Color (
"Tint"
, Color) = (1,1,1,1)






_StencilComp (
"Stencil Comparison"
, Float) = 8






_Stencil (
"Stencil ID"
, Float) = 0






_StencilOp (
"Stencil Operation"
, Float) = 0






_StencilWriteMask (
"Stencil Write Mask"
, Float) = 255






_StencilReadMask (
"Stencil Read Mask"
, Float) = 255






_ColorMask (
"Color Mask"
, Float) = 15






[Toggle(_UI_ALPHACLIP)] _UseUIAlphaClip (
"Use Alpha Clip"
, Float) = 0






}












SubShader






{






Tags






{






"Queue"
=
"Transparent"






"IgnoreProjector"
=
"True"






"RenderType"
=
"Transparent"






"PreviewType"
=
"Plane"






"CanUseSpriteAtlas"
=
"True"






}












Stencil






{






Ref [_Stencil]






Comp [_StencilComp]






Pass [_StencilOp]






ReadMask [_StencilReadMask]






WriteMask [_StencilWriteMask]






}












Cull Off






Lighting Off






ZWrite Off






ZTest [unity_GUIZTestMode]






Blend SrcAlpha OneMinusSrcAlpha






ColorMask [_ColorMask]












Pass






{






CGPROGRAM






#pragma vertex vert






#pragma fragment frag












#include "UnityCG.cginc"






#include "UnityUI.cginc"












#pragma multi_compile __ UNITY_UI_ALPHACLIP












struct
a2v






{






fixed2 uv : TEXCOORD0;






half4 vertex : POSITION;






float4 color : COLOR;






};












fixed4 _Color;












struct
v2f






{






fixed2 uv : TEXCOORD0;






half4 vertex : SV_POSITION;






float4 color : COLOR;






};












sampler2D _MainTex;






sampler2D _Mask;












v2f vert (a2v i)






{






v2f o;






o.vertex = mul(UNITY_MATRIX_MVP, i.vertex);






o.uv = i.uv;












o.color = i.color * _Color;






return
o;






}












fixed4 frag (v2f i) : COLOR






{






half4 color = tex2D(_MainTex, i.uv) * i.color;






half4 mask = tex2D(_Mask, i.uv);






color.a *= mask.a;






return
color;






}






ENDCG






}






}





}

标签:Stencil,color,vertex,Float,Mask,shader,UGUI,uv
From: https://blog.51cto.com/u_8378185/5991177

相关文章

  • UGUI动态生成列表功能实现(增删保存)
    在UGUI里不免会有一些列表需要生成和显示。例如最简单的增、删、改、查等都需要列表的变化。本文只讲增、删、保存、清空UGUI配合的变化方法。下面以实现场景里角色的实时......
  • UGUI血条渐渐减掉实现
    好久没写文章了。那天有人问我游戏人物血条如何慢慢减掉。今天写一下吧。首先上个动态图,看效果:更多内容请关注微信公众号:unity风雨路  在之前的文章中讲过如何实现技能冷......
  • UGUI之Scroll view
    Scrollview是一个方便制作滑动的组件。游戏里背包等经常用到的。效果如下:之前说过自己来制作滑动器的方法下面讲的是一个更为简单的方法:使用ScrollView组件。方法如下:1.首......
  • unity4.6之UGUI之与代码结合及Text讲解
    UGUI与以往的NGUI不同之处很多其中一大特点就是UGUI把精灵图集的功能取消了。首先是我们看看UGUI的UI界面:其中有项是Text...也就是本节要讲的内容;说到text不得不说的是字......
  • UGUI之 Text内容长度限定
    在UGUI里Text显示的字符有时候需要个数限制。只需将下面代码绑定到text上就可以了。namelenth是用来接收文字个数的。在其他脚本里只要设置namelenth这个值就可以。由于Setn......
  • Unity URP Shader之用Matcap渲染天牛
    以下素材来自Kerry佬,关于Matcap技术,参考以下资料:shader如下:1Shader"MyURP/Kerry/URPMatcap"2{3Properties4{5_MainTex("MainTexture"......
  • Unity URP Shader之标准的BlinnPhong光照模型
    shader如下:1Shader"MyURP/Kerry/URPBlinnPhong"2{3Properties4{5_BaseMap("BaseMap",2D)="white"{}6_NormalMap(......
  • Metamask连接Geth本地测试链部署合约报错
    直接连接ExternalHttpProvider部署合约没有问题但是使用metamask连接测试网部署合约时报错errored:[ethjs-query]whileformattingoutputsfromRPC'{"value":{"cod......
  • Topaz ReMask 5 一键抠图汉化版
    事实上,一张图片,一个视频想要完成抠像任务,很多情况下,必须得配合不同的插件或者软件来实现。TopazReMask(点击去下载)对于抠图提供了一种新颖的方式,快速而简单,利用动作结合......
  • UGUI 全方位了解
    随着unity3d4.6~5.x+新UI系统终于与大家见面了。这篇文章将不会介绍如何使用按钮、滚动条之类的UI控件,这些内容可以参考​​ UnityManual​​;这篇文章的重点是,如......