版本
- 源碼版本：2017.3.0
- 著色器版本：2017.3.0
Mask使用方法
https://jingyan.baidu.com/article/91f5db1b261d911c7f05e393.html
層級關系
MaskSample.png
Graphic.UpdateMaterial()
Image和Text都會設置材質到CanvasRenderer上。
// Graphic.cs
protected virtual void UpdateMaterial()
{
if (!IsActive())
return;
canvasRenderer.materialCount = 1;
canvasRenderer.SetMaterial(materialForRendering, 0);
canvasRenderer.SetTexture(mainTexture);
}
Graphic.materialForRendering
用IMaterialModifier來修改材質。Image找到的IMaterialModifier有Image和Mask。Text找到的IMaterialModifier只有Text。
// Graphic.cs
public virtual Material materialForRendering
{
get
{
var components = ListPool<Component>.Get();
GetComponents(typeof(IMaterialModifier), components);
var currentMat = material;
for (var i = 0; i < components.Count; i++)
currentMat = (components[i] as IMaterialModifier).GetModifiedMaterial(currentMat);
ListPool<Component>.Release(components);
return currentMat;
}
}
Mask.GetModifiedMaterial
- 最多支持8層Mask，靠近Canvas最近的是第1層，次之第2層，以此類推。
- 不同的層使用模板緩存不同的位。
第1層Mask，寫入0000 0001。
第2層Mask，與第1層有交集的地方，寫入0000 0011。
第3層Mask，與第2層有交集的地方，寫入0000 0111。
..... - 通過CanvasRenderer.SetPopMaterial()，清空模板緩存。
例子中Frame以及Frame的所有的ChildObject都渲染完畢之后，F(xiàn)rame的CanvasRenderer會清空模板緩存。
再舉個例子：
Frame1(Mask + Image) // 第1層的Mask，寫入0000 0001。
Text1(Text) // 根據(jù)0000 0001進行模板測試。
Frame2(Mask + Image) // 第2層的Mask，與第1層有交集的地方，寫入0000 0011。
Text2(Text) // 根據(jù)0000 0011進行模板測試
// 在渲染Frame3之前，清空了0000 0010的模板緩存。
Frame3(Mask + Image) // 第2層的Mask，設置模板緩存的方式與Frame2相同。
Text3(Text) // 模板測試的方式與Text2相同。
// Mask.cs
/// Stencil calculation time!
public virtual Material GetModifiedMaterial(Material baseMaterial)
{
if (!MaskEnabled())
return baseMaterial;
var rootSortCanvas = MaskUtilities.FindRootSortOverrideCanvas(transform);
var stencilDepth = MaskUtilities.GetStencilDepth(transform, rootSortCanvas);
if (stencilDepth >= 8)
{
// 模板緩存一共有8位，在Parent到Canvas之間已經有8個Mask了，當前Mask無法啟用。
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 // ColorMask
);
StencilMaterial.Remove(m_MaskMaterial);
m_MaskMaterial = maskMaterial;
var unmaskMaterial = StencilMaterial.Add(
baseMaterial,
1, // 清空操作，模板參考值應該是沒有作用了吧？
StencilOp.Zero, // 清空Buffer
CompareFunction.Always, // 檢測總是成功
0); // ColorMask
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, // 與上一層Mask的值相同才能通過檢測
m_ShowMaskGraphic ? ColorWriteMask.All : 0,
desiredStencilBit - 1, // ReadMask，
desiredStencilBit | (desiredStencilBit - 1)); // WriteMask
StencilMaterial.Remove(m_MaskMaterial);
m_MaskMaterial = maskMaterial2;
// 清除當前層，保留其他層。假設當前層是3。
graphic.canvasRenderer.hasPopInstruction = true;
var unmaskMaterial2 = StencilMaterial.Add(
baseMaterial,
desiredStencilBit - 1, // RefValue = 0000 0011
StencilOp.Replace,
CompareFunction.Equal,
0,
desiredStencilBit - 1, // ReadMask = 0000 0011
desiredStencilBit | (desiredStencilBit - 1)); // WriteMask = 0000 0111
StencilMaterial.Remove(m_UnmaskMaterial);
m_UnmaskMaterial = unmaskMaterial2;
graphic.canvasRenderer.popMaterialCount = 1;
graphic.canvasRenderer.SetPopMaterial(m_UnmaskMaterial, 0);
return m_MaskMaterial;
}
MaskableGraphic.GetModifiedMaterial
- m_StencilValue = 在Parent到Canvas之間有效的Mask數(shù)量
- 舉例中的Image組件，因為與Mask在同一個GameObejct下面，Mask組件會修改Image組件的材質（修改模板緩存），Image就不再修改自己的材質了。
- 舉例中的Text組件，因為GameObject下沒有Mask組件，并且Text的ParentGameObject到Canvas之間有Mask組件，所以要修改Text的材質（進行模板檢測）。
// MaskableGraphic.cs
public virtual Material GetModifiedMaterial(Material baseMaterial)
{
var toUse = baseMaterial;
if (m_ShouldRecalculateStencil)
{
var rootCanvas = MaskUtilities.FindRootSortOverrideCanvas(transform);
m_StencilValue = maskable ? MaskUtilities.GetStencilDepth(transform, rootCanvas) : 0;
m_ShouldRecalculateStencil = false;
}
// if we have a enabled Mask component then it will
// generate the mask material. This is an optimisation
// it adds some coupling between components though :(
Mask maskComponent = GetComponent<Mask>();
if (m_StencilValue > 0 && (maskComponent == null || !maskComponent.IsActive()))
{
// 例子中的Text組件，會進入到這里，會進行模板測試。
var maskMat = StencilMaterial.Add(
toUse, // Material baseMat
(1 << m_StencilValue) - 1, // 參考值
StencilOp.Keep, // 不修改模板緩存
CompareFunction.Equal, // 相等通過測試
ColorWriteMask.All, // ColorMask
(1 << m_StencilValue) - 1, // Readmask
0); // WriteMask
StencilMaterial.Remove(m_MaskMaterial);
m_MaskMaterial = maskMat;
toUse = m_MaskMaterial;
}
return toUse;
}
Shader代碼
// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
Shader "UI/Default"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 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(UNITY_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
{
Name "Default"
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 2.0
#include "UnityCG.cginc"
#include "UnityUI.cginc"
#pragma multi_compile __ UNITY_UI_CLIP_RECT
#pragma multi_compile __ UNITY_UI_ALPHACLIP
struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
float4 worldPosition : TEXCOORD1;
UNITY_VERTEX_OUTPUT_STEREO
};
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
v2f vert(appdata_t v)
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID(v);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
OUT.worldPosition = v.vertex;
OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
OUT.texcoord = v.texcoord;
OUT.color = v.color * _Color;
return OUT;
}
sampler2D _MainTex;
fixed4 frag(v2f IN) : SV_Target
{
half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
#ifdef UNITY_UI_CLIP_RECT
color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
#endif
#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif
return color;
}
ENDCG
}
}
}
