参考链接:

https://blog.csdn.net/akof1314/article/details/50428200

1.Mask.shader

  1. // Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
  2.  
  3. Shader "Custom/Mask"
  4. {
  5. Properties
  6. {
  7. [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
  8. _Color ("Tint", Color) = (,,,)
  9.  
  10. _StencilComp ("Stencil Comparison", Float) =
  11. _Stencil ("Stencil ID", Float) =
  12. _StencilOp ("Stencil Operation", Float) =
  13. _StencilWriteMask ("Stencil Write Mask", Float) =
  14. _StencilReadMask ("Stencil Read Mask", Float) =
  15.  
  16. _ColorMask ("Color Mask", Float) =
  17.  
  18. [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) =
  19.  
  20. _MaskTex ("Mask Texture", 2D) = "white" {}
  21. }
  22.  
  23. SubShader
  24. {
  25. Tags
  26. {
  27. "Queue"="Transparent"
  28. "IgnoreProjector"="True"
  29. "RenderType"="Transparent"
  30. "PreviewType"="Plane"
  31. "CanUseSpriteAtlas"="True"
  32. }
  33.  
  34. Stencil
  35. {
  36. Ref [_Stencil]
  37. Comp [_StencilComp]
  38. Pass [_StencilOp]
  39. ReadMask [_StencilReadMask]
  40. WriteMask [_StencilWriteMask]
  41. }
  42.  
  43. Cull Off
  44. Lighting Off
  45. ZWrite Off
  46. ZTest [unity_GUIZTestMode]
  47. Blend SrcAlpha OneMinusSrcAlpha
  48. ColorMask [_ColorMask]
  49.  
  50. Pass
  51. {
  52. Name "Default"
  53. CGPROGRAM
  54. #pragma vertex vert
  55. #pragma fragment frag
  56. #pragma target 2.0
  57.  
  58. #include "UnityCG.cginc"
  59. #include "UnityUI.cginc"
  60.  
  61. #pragma multi_compile __ UNITY_UI_CLIP_RECT
  62. #pragma multi_compile __ UNITY_UI_ALPHACLIP
  63.  
  64. struct appdata_t
  65. {
  66. float4 vertex : POSITION;
  67. float4 color : COLOR;
  68. float2 texcoord : TEXCOORD0;
  69. UNITY_VERTEX_INPUT_INSTANCE_ID
  70. };
  71.  
  72. struct v2f
  73. {
  74. float4 vertex : SV_POSITION;
  75. fixed4 color : COLOR;
  76. float2 texcoord : TEXCOORD0;
  77. float4 worldPosition : TEXCOORD1;
  78. UNITY_VERTEX_OUTPUT_STEREO
  79. };
  80.  
  81. sampler2D _MainTex;
  82. fixed4 _Color;
  83. fixed4 _TextureSampleAdd;
  84. float4 _ClipRect;
  85. float4 _MainTex_ST;
  86.  
  87. sampler2D _MaskTex;
  88.  
  89. v2f vert(appdata_t v)
  90. {
  91. v2f OUT;
  92. UNITY_SETUP_INSTANCE_ID(v);
  93. UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
  94. OUT.worldPosition = v.vertex;
  95. OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
  96.  
  97. OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
  98.  
  99. OUT.color = v.color * _Color;
  100. return OUT;
  101. }
  102.  
  103. fixed4 frag(v2f IN) : SV_Target
  104. {
  105. half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
  106. color.a *= tex2D(_MaskTex, IN.texcoord).a;
  107.  
  108. #ifdef UNITY_UI_CLIP_RECT
  109. color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
  110. #endif
  111.  
  112. #ifdef UNITY_UI_ALPHACLIP
  113. clip (color.a - 0.001);
  114. #endif
  115.  
  116. return color;
  117. }
  118. ENDCG
  119. }
  120. }
  121. }

核心代码:

  1. color.a *= tex2D(_MaskTex, IN.texcoord).a;

即遮罩图alpha=0的地方不会显示

遮罩图和效果图(遮罩图白色的地方实际上是透明的):

2.UV问题

上面的结果表面上看是没什么问题的,但如果把图片打进图集就会发现不对了。原因是,shader里面uv坐标不再是单个图片的坐标了,而是图集里面该图片的坐标,使得shader计算错误,最终渲染错乱。解决方法是,将单个图片的纹理坐标保存到uv1中。

SetVertUV1.cs

  1. using UnityEngine;
  2. using UnityEngine.UI;
  3.  
  4. public class SetVertUV1 : BaseMeshEffect
  5. {
  6. public override void ModifyMesh(VertexHelper vh)
  7. {
  8. UIVertex uiVertex = new UIVertex();
  9. for (int i = ; i < vh.currentVertCount; i++)
  10. {
  11. vh.PopulateUIVertex(ref uiVertex, i);
  12. int uvX = i >> ;
  13. int uvY = uvX ^ (i & );
  14. uiVertex.uv1 = new Vector2(uvX, uvY);
  15. vh.SetUIVertex(uiVertex, i);
  16. }
  17. }
  18. }

即将4个顶点的uv1依次设置为(0,0),(0,1),(1,1),(1,0)

MaskUV1.shader

  1. // Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
  2.  
  3. Shader "Custom/MaskUV1"
  4. {
  5. Properties
  6. {
  7. [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
  8. _Color ("Tint", Color) = (,,,)
  9.  
  10. _StencilComp ("Stencil Comparison", Float) =
  11. _Stencil ("Stencil ID", Float) =
  12. _StencilOp ("Stencil Operation", Float) =
  13. _StencilWriteMask ("Stencil Write Mask", Float) =
  14. _StencilReadMask ("Stencil Read Mask", Float) =
  15.  
  16. _ColorMask ("Color Mask", Float) =
  17.  
  18. [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) =
  19.  
  20. _MaskTex ("Mask Texture", 2D) = "white" {}
  21. }
  22.  
  23. SubShader
  24. {
  25. Tags
  26. {
  27. "Queue"="Transparent"
  28. "IgnoreProjector"="True"
  29. "RenderType"="Transparent"
  30. "PreviewType"="Plane"
  31. "CanUseSpriteAtlas"="True"
  32. }
  33.  
  34. Stencil
  35. {
  36. Ref [_Stencil]
  37. Comp [_StencilComp]
  38. Pass [_StencilOp]
  39. ReadMask [_StencilReadMask]
  40. WriteMask [_StencilWriteMask]
  41. }
  42.  
  43. Cull Off
  44. Lighting Off
  45. ZWrite Off
  46. ZTest [unity_GUIZTestMode]
  47. Blend SrcAlpha OneMinusSrcAlpha
  48. ColorMask [_ColorMask]
  49.  
  50. Pass
  51. {
  52. Name "Default"
  53. CGPROGRAM
  54. #pragma vertex vert
  55. #pragma fragment frag
  56. #pragma target 2.0
  57.  
  58. #include "UnityCG.cginc"
  59. #include "UnityUI.cginc"
  60.  
  61. #pragma multi_compile __ UNITY_UI_CLIP_RECT
  62. #pragma multi_compile __ UNITY_UI_ALPHACLIP
  63.  
  64. struct appdata_t
  65. {
  66. float4 vertex : POSITION;
  67. float4 color : COLOR;
  68. float2 texcoord : TEXCOORD0;
  69. float2 texcoord1 : TEXCOORD1;
  70. UNITY_VERTEX_INPUT_INSTANCE_ID
  71. };
  72.  
  73. struct v2f
  74. {
  75. float4 vertex : SV_POSITION;
  76. fixed4 color : COLOR;
  77. float2 texcoord : TEXCOORD0;
  78. float4 worldPosition : TEXCOORD1;
  79. float2 texcoord1 : TEXCOORD2;
  80. UNITY_VERTEX_OUTPUT_STEREO
  81. };
  82.  
  83. sampler2D _MainTex;
  84. fixed4 _Color;
  85. fixed4 _TextureSampleAdd;
  86. float4 _ClipRect;
  87. float4 _MainTex_ST;
  88.  
  89. sampler2D _MaskTex;
  90.  
  91. v2f vert(appdata_t v)
  92. {
  93. v2f OUT;
  94. UNITY_SETUP_INSTANCE_ID(v);
  95. UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
  96. OUT.worldPosition = v.vertex;
  97. OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
  98.  
  99. OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
  100.  
  101. OUT.color = v.color * _Color;
  102. OUT.texcoord1 = v.texcoord1;
  103. return OUT;
  104. }
  105.  
  106. fixed4 frag(v2f IN) : SV_Target
  107. {
  108. half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
  109. color.a *= tex2D(_MaskTex, IN.texcoord1).a;
  110.  
  111. #ifdef UNITY_UI_CLIP_RECT
  112. color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
  113. #endif
  114.  
  115. #ifdef UNITY_UI_ALPHACLIP
  116. clip (color.a - 0.001);
  117. #endif
  118.  
  119. return color;
  120. }
  121. ENDCG
  122. }
  123. }
  124. }

[UnityShader效果]01.Mask的更多相关文章

  1. Unity UGUI——遮罩效果(Mask)

    Show Mask Graphic

  2. [UnityShader基础]01.渲染队列

    unity中定义了5个渲染队列: 1.Background,对应索引号1000,该队列最先被渲染 2.Geometry,对应索引号2000,默认的渲染队列,大多数物体都使用该队列,不透明物体使用该队列 ...

  3. 【原】使用Xfermode正确的绘制出遮罩效果

    以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...

  4. C# 仿金山毒霸启动和关闭淡入淡出效果

    原文 C# 仿金山毒霸启动和关闭淡入淡出效果 01 #region 窗体关闭效果 02   03 #region 私有方法 04 [DllImportAttribute("user32.dl ...

  5. 【js】使用javascript 实现静态网页分页效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content ...

  6. 【UGUI源码分析】Unity遮罩之Mask详细解读

    遮罩,顾名思义是一种可以掩盖其它元素的控件.常用于修改其它元素的外观,或限制元素的形状.比如ScrollView或者圆头像效果都有用到遮罩功能.本系列文章希望通过阅读UGUI源码的方式,来探究遮罩的实 ...

  7. 快速学习html、css的经典笔记

    HTML语言剖析 Html简介-目录 全写: HyperText Mark-up Language  译名: 超文本标识语言  简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标签(tag ...

  8. 论文阅读之 DECOLOR: Moving Object Detection by Detecting Contiguous Outliers in the Low-Rank Representation

    DECOLOR: Moving Object Detection by Detecting Contiguous Outliers in the Low-Rank Representation Xia ...

  9. 关于 CSS 反射倒影的研究思考

    原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...

随机推荐

  1. 腾讯广告联盟 Android SDK(广点通)demo的使用方式

    1. 下载示例文件. 2. 解压之后的目录: 3. 使用android studio,选择import project,导入如图所示文件夹: 4. 重点来了,由于官方demo的上传时间很久远(大概是上 ...

  2. javascript_变量

    首先说说变量,JavaScript变量可以用来保存两种类型的值:基本类型和引用类型. 1,基本类型很好理解,源于基本数据类型:underfined,null,boolean,number和string ...

  3. div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出

    今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...

  4. 高性能mysql的事物隔离级别

    数据库事务的隔离级别有4种,由低到高分别为Read uncommitted .Read committed .Repeatable read .Serializable .而且,在事务的并发操作中可能 ...

  5. 学习笔记TF058:人脸识别

    人脸识别,基于人脸部特征信息识别身份的生物识别技术.摄像机.摄像头采集人脸图像或视频流,自动检测.跟踪图像中人脸,做脸部相关技术处理,人脸检测.人脸关键点检测.人脸验证等.<麻省理工科技评论&g ...

  6. 网络操作基础(one)

    P12 一.什么是网络操作系统?网络操作系统具有哪些基本功能? 二.网络操作系统具有哪些特征? 三.常用的网络操作系统有哪些?它们各具有什么特点? 四.在网络操作系统中主要可提供哪些? ———— —— ...

  7. Spark:DataFrame批量导入Hbase的两种方式(HFile、Hive)

    Spark处理后的结果数据resultDataFrame可以有多种存储介质,比较常见是存储为文件.关系型数据库,非关系行数据库. 各种方式有各自的特点,对于海量数据而言,如果想要达到实时查询的目的,使 ...

  8. Go Example--json

    package main import ( "encoding/json" "fmt" "os" ) type Response1 stru ...

  9. Developing avb

    ai automake  ai libtool  ai pkg-config autogen ai libgstreamer1.0-0  ai libgstreamer1.0-dev  ai chec ...

  10. Python importlib(动态导入模块)

    使用 Python importlib(动态导入模块) 可以将字符串型的模块名导入 示例: import importlib module = 'module name' # 字符串型模块名 test ...