画地为Mask，随心所欲的高效遮罩组件「Unity」

链接：https://baijiahao.baidu.com/po/feed/share?wfr=spider&for=pc&context=%7B%22sourceFrom%22%3A%22bjh%22%2C%22nid%22%3A%22news_4165402854001304356%22%7D
在上一篇博文"扔掉遮罩，更好的圆形Image组件"中，笔者改变Image的顶点数据，使得Image呈圆形显示，避免了Mask的使用，从而节省Drawcall消耗，提高渲染效率了。这也启发了笔者，有没有可能通过同样原理实现Mask，做到在某些需要显示特定形状Icon的场景下，替代Unity原生Mask，且能保有节省Drawcall，减少渲染像素点，实现精确点击等优点？经过一番折腾，就有了MeshMask组件。

组件效果

MeshMask遮罩效果图

可以看到无论Mask形状是凸边形还是复杂的凹边形，都能准确地将Mask形状数据序列化成顶点，面片数据，

提供给需要Mask的图片修改渲染顶点，达到遮罩效果。组件用法类似于UnityMask，且效率优于UnityMask。插件已上传至Github，欢迎试用~

效率对比

使用原生Mask，10个Icon占用了15个Drawcall

使用MeshMask，10个Icon仅占用1个Drawcall

Scene切换到Overdraw模式：红框为Mask的Overdraw；蓝框为MeshMask的Overdraw

从上面三张图可以看到MeshMask相比Unity的Mask，在减少Drawcall消耗、Overdraw消耗等两方面都是完胜的。

Drawcall消耗

这10个icon都打包在同一图集的，使用UnityMask，没办法享受图层合并，消耗了15个Drawcall；使用MeshMask的情况下，看截图里Batches为2，除去摄像机占用的1个Batch，10个icon仅占用1个Batch，即1个Drawcall。在Drawcall资源如此昂贵的情况下（一般机器都会要求Drawcall在200以下），这种性能节省效果非常显著。

Overdraw消耗

而看图三的Overdraw，使用UnityMask的红框部分，被Mask的图片全部绘制一次，UnityMask再做像素剔除，被Mask的部分又绘制了一次，总共需要绘制两次，且有一次是绘制了完全用不到的区域。使用MeshMask的蓝框部分，因为是靠改变顶点绘制出来的icon，因此仅有被Mask部分被绘制了一次。

面片消耗

当然，使用MeshMask的Image需要消耗比普通Image多一些的顶点和面片，观察Stats面板，使用MeshMsk的10个icon多占用1.3K的顶点和面片，即1个icon占用130个顶点，面片。然而GPU渲染顶点，面片的效率非常高（市面手机GPU渲染多边形数基本上2000-10000+万多边形/每秒以上），这点消耗跟Drawcall比起来就微不足道了。

小结

在渲染上，GPU、CPU两者的性能瓶颈往往是CPU；GPU的性能瓶颈往往是像素点填充率（Overdraw导致），CPU的性能瓶颈往往是Drawcall。所以，渲染性能排查，几项指标关注优先级应该是：Drawcall>Overdraw>面片

组件使用

MeshMask插件目录结构

插件里有MeshMask、MeshImage、MeshButton三个UI组件

MeshMask组件Inspector面板

MeshMask组件作用类似UnityMask，依赖了Image及PolygonCollider2D组件，带有[根据Image组件生成Mask]、[根据Collider组件生成Mask]两个菜单项，支持两种方式生成Mask数据。

被遮罩GameOjecct的Inspector面板

MeshImage、MeshButton组件挂在需要被遮罩的GameObject上，设置好MeshMask对象，就能获得数据，实现遮罩或者精确点击。

组件实现

不同于CircleImage，只需要简单的对圆形进行顶点，面片计算；MeshMask要考虑几个点：

需要能对所有可能的图形进行顶点，面片计算。考虑顶点，面片计算需要读取Image，且有一定性能开销，所以不能在Run-time中实时计算数据，需要预先计算好vertices,triangle数据，并序列化存放在GameObject中，运行时读取。保证MeshMask灵活性，除了根据Image进行顶点，面片计算，希望像PS一样，提供路径工具，让开发可以可视化地新增、修改Mask形状。对所有图形支持像素级点击判断

其中做顶点，面片计算这一步比较麻烦，涉及以下几个技术点：

图片处理流程

边缘检测

边缘检测算法算是图形学应用最广泛最基础的算法了，主要原理是滤波器对图形进行滤波从而得到梯度图像，通过判断梯度图像的某像素点灰度值是否超过阈值，就能判断该点是否为边缘点。笔者采用了简单的Sobel算子边缘检测算法。

Sobel算子：3x3的矩形滤波器

A代表原始图像，Gx及Gy分别代表经横向及纵向边缘检测的图像灰度值

图像某像素点灰度值

通常，为了提高效率使用不开平方的近似值

这里拿米老鼠图来做示例图，看看Sobel边缘检测的效果。

原图

sobel边缘检测后的灰度图

可以看到算法效果不错，但我们并不需要这么多边缘“信息”，只需要最外围的边缘“信息”。因此将非透明区域都填充成统一的颜色，再做边缘检测。

最终效果：理想的外围边缘

离散化

获得了外围边缘信息后，下一步需要做离散化：剔除冗余信息，并将边缘信息以有序集合的形式表示。这个有序集合，就是渲染底层所需要的顶点数据。

冗余顶点：对于边缘的直线，除直线首尾两点外，其他点都是冗余可剔除的。有序集合：集合点依次连接起来，就如同用笔按逆时针/顺时针方向画出来的边缘图形。

笔者挑选了边缘点集中x最小的点作为起始点，以顺时针顺序查找邻接点的方法来计算有序顶点集。

算法步骤：选择边缘点集x最小的点为起始点，当前点查找当前点周边8个像素点是否有边缘点，如都没有就继续向外围一圈，直到找到边缘点。当找到多个边缘点情况下，比较当前点与各边缘点所呈夹角，选夹角最小的边缘点作为邻接点。若邻接点即为起始点，则算法结束，否则继续判断邻接点与有序顶点集最后一个点是否共边，若共边则删除最后一个点将邻接点加入有序顶点集设置邻接点为当前点，重复步骤2

删除共边顶点图示：当C即将加入顶点集中，发现ABC三点共边的情况，删除中间点B

三角化

三角化（Triangulation）也是图形学应用较多的算法了，特别是在3D建模、游戏领域。三角化是指从一组已知点集中，构建出三角形网格。随着构建条件不同，三角化算法也不同。像最近LowPoly绘画风格比较热门，一些滤镜软件会支持LowPoly转换。软件在将一张普通图像转换位LowPoly图像的过程中，除了一样要做边缘检测，离散化外，在三角化这一步，需要生成显示质量较高的三角形，不能有过于狭长的三角形，就需要用Delaunay算法。在我们这个场景下，对生成的三角形并没有特殊要求，不需要用上复杂的Delaunay算法，Unity3dwiki社区上提供了一个简单的三角化算法，刚好适用。

算法原理从点集中随机挑选三点组成三角形，然后遍历其他点，看是否有点落在三角形内，如果三角形内无点则为合格三角形。循环此过程直到所有点都被处理。

可视化编辑

经过前面处理，我们已经拿到了顶点数据、面片数据。笔者希望组件能将这些顶点数据可视化，以便让使用者直观了解处理结果。Unity自带的PolygonCollider2D组件，正好适用。publicsealedclassPolygonCollider2D:Collider2D{....publicvoidSetPath(intindex,Vector2[]points);}

通过SetPath接口将顶点数据传入PolygonCollider2D组件，PolygonCollider2D完美地生成米老鼠的路径。在一开始实验中，笔者惊奇地发现组件竟然也对顶点做了三角化处理。遗憾地是，组件并没有提供接口获取三角化结果，Unity社区的技术人员也承认此点，说Unity的未来版本可能会考虑暴露此接口，并建议自己做三角化处理，就是前面所说的算法（汗..=.=||）。通过下图比较，可以看到组件跟算法的三角化结果还是有所不同的。

顶点数据传入PolygonCollider2D后的效果

算法处理后的三角化效果

利用PolygonCollider2D组件除了让我们可以看到顶点结果，还可以通过Inspector上的[EditCollider]按钮微调，顶点的位置，做出更理想的Mask效果。甚至，我们可以直接利用PolygonCollider2D组件，从无到有地编辑Mask形状后，再三角化处理获得面片数据。

直接用PolygonCollider2D编辑出来的“爱心”

渲染

已经有了顶点数据，面片数据，终于到了最后的渲染步骤。笔者利用MeshMask组件存放这些数据，并不直接渲染MeshMask，而是在MeshMask子节点下添加MeshImage组件，进行修改顶点渲染。

在5.3版本里，Unity提供了BaseMeshEffect类，是Unity提供给开发者用于给Graphic进行二次修改绘制的类，我们可以在ModifyMesh方法中修改VertexHelper携带的顶点，面片，uv等数据来改变渲染。(在5.3之前的版本，对应的类和接口是BaseVertexEffect、ModifyVertices)

MeshImage继承BaseMeshEffect，在ModifyMesh里先将VertexHelper的原有数据清空，获取MeshMask的顶点、面片数据，经过坐标转换后将再传给VertexHelper。publicabstractclassBaseMeshEffect:UIBehaviour,IMeshModifier{publicabstractvoidModifyMesh(VertexHelpervh);}publicclassMeshImage:BaseMeshEffect{...publicoverridevoidModifyMesh(VertexHelpervh){if(this.enabled){vh.Clear;_uiVertices.Clear;if(mask){if(mask.vertices!=null&&mask.triangles!=null){floattw=image.rectTransform.rect.width;floatth=image.rectTransform.rect.height;Vector4uv=image.overrideSprite!=null?DataUtility.GetOuterUV(image.overrideSprite):Vector4.zero;floatuvCenterX=(uv.x+uv.z)*image.rectTransform.pivot.x;floatuvCenterY=(uv.y+uv.w)*image.rectTransform.pivot.y;floatuvScaleX=(uv.z-uv.x)/tw;floatuvScaleY=(uv.w-uv.y)/th;Listvertices=this.mask.vertices.Select(x=>{returnthis.transform.InverseTransformPoint(this.mask.transform.TransformPoint(x));}).ToList;for(inti=0;i

拖动MeshImage的位置，图片外显区域始终限定在米老鼠Mask内

像素级精确点击

如上篇博文所讲，为了实现精确点击，Unity提供了eventAlphaThreshold字段，但有着Sprite占用双倍内存，无法合入图集等缺陷。而MeshButton组件正好解决了痛点。MeshButton实现ICanvasRaycastFilter接口类，实现IsRaycastLocationValid方法，在方法内获取MeshMask的顶点数据，通过Ray-Crossing算法就可以判断点击点是否在区域内。publicclassMeshButton:UIBehaviour,ICanvasRaycastFilter{publicvirtualboolIsRaycastLocationValid(Vector2screenPoint,CameraeventCamera){//Stopwatchsw=newStopwatch;//sw.Start;Spritesprite=image.overrideSprite;if(sprite==null)returntrue;boolret=true;if(this.mask!=null&&this.mask.vertices!=null){Vector2local;RectTransformUtility.ScreenPointToLocalPointInRectangle(image.rectTransform,screenPoint,eventCamera,outlocal);Listvertices=this.mask.vertices.Select(x=>{Vector3p=this.transform.InverseTransformPoint(this.mask.transform.TransformPoint(x));returnnewVector2(p.x,p.y);}).ToList;ret=ImageUtil.Contains(local,vertices);}//sw.Stop;//UnityEngine.Debug.Log("点击检测耗时:"+sw.ElapsedTicks+"tick");returnret;}}

关于MeshMask

MeshMask组件适合用来显示特殊形状的Icon。MeshMask并不能完全取代UnityMask，在需要显示特殊形状Icon时作为UnityMask的替代方案，能达到提高渲染效率的目的，减少UnityMask的不必要使用。被Mask的图片如果被移出Mask范围外，会因为SpriteWrapmode而出现边缘像素拉伸，或者贴图重复的问题，这个问题暂时不能很好解决，因为SpriteWrapmode必须设置为clamp或者repeat，就会出现这种问题。只能设置为clamp后，人为为贴图边缘留1px的透明边解决。好在，做特殊形状Icon的使用场景下，基本无须担心这个问题。