<Unity-UGUI>使用Mask, 正确的裁减非默认材质UI对象
2016-05-10 20:43
1076 查看
使用UGUI中的Mask的时候,如何正确裁减非默认材质的UI对象
在Unity中的UGUI中实现区域裁剪可以使用Mask组件,但是当改变被裁剪对象的材质后,裁剪效果可能会失效,也就是说Mask对该UI失效,这是为什么呢?这我们得了解UGUI中Mask的工作原理。Mask得裁剪效果是使用Stencil计算来实现裁剪,关于Stencil(模板)可以仔细了解一下渲染管线得相关知识就可以知道是怎么回事了,可参见维基百科,也可自行搜索其它资料。
通过参考Unity中UGUI中的Mask.cs源码,可以管窥一二。
/// Stencil calculation time! public virtual Material GetModifiedMaterial(Material baseMaterial) { if (graphic == null) return baseMaterial; var rootSortCanvas = MaskUtilities.FindRootSortOverrideCanvas(transform); var stencilDepth = MaskUtilities.GetStencilDepth(transform, rootSortCanvas); if (stencilDepth >= 8) { Debug.LogError("Attempting to use a stencil mask with depth > 8", gameObject); return baseMaterial; } int desiredStencilBit = 1 << stencilDepth; // if we are at the first level... // we want to destroy what is there if (desiredStencilBit == 1) { var maskMaterial = StencilMaterial.Add(baseMaterial, 1, StencilOp.Replace, CompareFunction.Always, m_ShowMaskGraphic ? ColorWriteMask.All : 0); StencilMaterial.Remove(m_MaskMaterial); m_MaskMaterial = maskMaterial; var unmaskMaterial = StencilMaterial.Add(baseMaterial, 1, StencilOp.Zero, CompareFunction.Always, 0); StencilMaterial.Remove(m_UnmaskMaterial); m_UnmaskMaterial = unmaskMaterial; graphic.canvasRenderer.popMaterialCount = 1; graphic.canvasRenderer.SetPopMaterial(m_UnmaskMaterial, 0); return m_MaskMaterial; } //otherwise we need to be a bit smarter and set some read / write masks var maskMaterial2 = StencilMaterial.Add(baseMaterial, desiredStencilBit | (desiredStencilBit - 1), StencilOp.Replace, CompareFunction.Equal, m_ShowMaskGraphic ? ColorWriteMask.All : 0, desiredStencilBit - 1, desiredStencilBit | (desiredStencilBit - 1)); StencilMaterial.Remove(m_MaskMaterial); m_MaskMaterial = maskMaterial2; graphic.canvasRenderer.hasPopInstruction = true; var unmaskMaterial2 = StencilMaterial.Add(baseMaterial, desiredStencilBit - 1, StencilOp.Replace, CompareFunction.Equal, 0, desiredStencilBit - 1, desiredStencilBit | (desiredStencilBit - 1)); StencilMaterial.Remove(m_UnmaskMaterial); m_UnmaskMaterial = unmaskMaterial2; graphic.canvasRenderer.popMaterialCount = 1; graphic.canvasRenderer.SetPopMaterial(m_UnmaskMaterial, 0); return m_MaskMaterial; }
通过上面得代码我们得知Mask会对目标UI得材质使用StencilMaterial.Add方法来传递模板相关参数
StencilMaterial.Add(baseMaterial, desiredStencilBit - 1, StencilOp.Replace, CompareFunction.Equal, 0, desiredStencilBit - 1, desiredStencilBit | (desiredStencilBit - 1));
继续查看StencilMaterial.Add方法,有如下代码
/// <summary> /// Add a new material using the specified base and stencil ID. /// </summary> public static Material Add(Material baseMat, int stencilID, StencilOp operation, CompareFunction compareFunction, ColorWriteMask colorWriteMask, int readMask, int writeMask) { if ((stencilID <= 0 && colorWriteMask == ColorWriteMask.All) || baseMat == null) return baseMat; if (!baseMat.HasProperty("_Stencil")) { Debug.LogWarning("Material " + baseMat.name + " doesn't have _Stencil property", baseMat); return baseMat; } if (!baseMat.HasProperty("_StencilOp")) { Debug.LogWarning("Material " + baseMat.name + " doesn't have _StencilOp property", baseMat); return baseMat; } if (!baseMat.HasProperty("_StencilComp")) { Debug.LogWarning("Material " + baseMat.name + " doesn't have _StencilComp property", baseMat); return baseMat; } if (!baseMat.HasProperty("_StencilReadMask")) { Debug.LogWarning("Material " + baseMat.name + " doesn't have _StencilReadMask property", baseMat); return baseMat; } if (!baseMat.HasProperty("_StencilReadMask")) { Debug.LogWarning("Material " + baseMat.name + " doesn't have _StencilWriteMask property", baseMat); return baseMat; } if (!baseMat.HasProperty("_ColorMask")) { Debug.LogWarning("Material " + baseMat.name + " doesn't have _ColorMask property", baseMat); return baseMat; } for (int i = 0; i < m_List.Count; ++i) { MatEntry ent = m_List[i]; if (ent.baseMat == baseMat && ent.stencilId == stencilID && ent.operation == operation && ent.compareFunction == compareFunction && ent.readMask == readMask && ent.writeMask == writeMask && ent.colorMask == colorWriteMask) { ++ent.count; return ent.customMat; } } var newEnt = new MatEntry(); newEnt.count = 1; newEnt.baseMat = baseMat; newEnt.customMat = new Material(baseMat); newEnt.customMat.hideFlags = HideFlags.HideAndDontSave; newEnt.stencilId = stencilID; newEnt.operation = operation; newEnt.compareFunction = compareFunction; newEnt.readMask = readMask; newEnt.writeMask = writeMask; newEnt.colorMask = colorWriteMask; newEnt.useAlphaClip = operation != StencilOp.Keep && writeMask > 0; newEnt.customMat.name = string.Format("Stencil Id:{0}, Op:{1}, Comp:{2}, WriteMask:{3}, ReadMask:{4}, ColorMask:{5} AlphaClip:{6} ({7})", stencilID, operation, compareFunction, writeMask, readMask, colorWriteMask, newEnt.useAlphaClip, baseMat.name); newEnt.customMat.SetInt("_Stencil", stencilID); newEnt.customMat.SetInt("_StencilOp", (int)operation); newEnt.customMat.SetInt("_StencilComp", (int)compareFunction); newEnt.customMat.SetInt("_StencilReadMask", readMask); newEnt.customMat.SetInt("_StencilWriteMask", writeMask); newEnt.customMat.SetInt("_ColorMask", (int)colorWriteMask); newEnt.customMat.SetInt("_UseAlphaClip", newEnt.useAlphaClip ? 1 : 0); m_List.Add(newEnt); return newEnt.customMat; }
通过对StencilMaterial.Add方法得查看我们知道该方法在对目标材质得_StencilOp,_StencilComp等等属性进行操作,这样操作后才可以实现它得模板裁剪。我们自定义的Shader一般没有这几个属性,所以我们在自己的shader中添加如下代码便可以实现自定义材质得正确Mask了
_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 ............................................................................ Stencil { Ref [_Stencil] Comp [_StencilComp] Pass [_StencilOp] ReadMask [_StencilReadMask] WriteMask [_StencilWriteMask] }
相关文章推荐
- GUI - Web前端开发框架
- 评价ui设计作品好坏的八个标准(界面/交互设计研究)
- Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
- 为Yahoo! UI Extensions Grid增加内置的可编辑器
- Cocos2d-x UI开发之文本类使用实例
- 谈谈对jquery ui tabs 的理解
- 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
- UI Events 用户界面事件
- jquery UI Datepicker时间控件的使用方法(基础版)
- Hallo.js基于jQuery UI所见即所得的Web编辑器
- 基于jQuery UI CSS Framework开发Widget的经验
- jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
- jquery UI Datepicker时间控件的使用及问题解决
- jQuery UI设置固定日期选择特效代码分享
- Jquery ajax 同步阻塞引起的UI线程阻塞问题
- jQuery UI的Dialog无法提交问题的解决方法
- jQuery ui实现动感的圆角渐变网站导航菜单效果代码
- jquery UI Datepicker时间控件的使用方法(终结版)
- jquery UI Datepicker时间控件的使用方法(加强版)
- 关于jQuery UI 使用心得及技巧