小聊聊NGUI中Panel的Clip功能（之一）
小聊聊NGUI中Panel的Clip功能（之一）
NGUI中的Panel具有裁剪的功能，操作上便是设置一个Panel类型即可~
原理上，该裁剪功能是基于Shader来实现的，简单列一下相关的着色器代码：
v2f vert (appdata_t v)
{
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.color = v.color;
o.texcoord = v.texcoord;
o.worldPos = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;
return o;
}
half4 frag (v2f IN) : COLOR
{
// Softness factor
float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipArgs0;
// Sample the texture
half4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
col.a *= clamp( min(factor.x, factor.y), 0.0, 1.0);
return col;
}乍一看似乎有不少陌生的东西，不急，慢慢来~
首先来看顶点着色器（即vert），前几行都比较传统：使用ModelViewProjection来变换顶点，然后设置顶点颜色和纹理坐标，只是最后一步有些奇怪：
o.worldPos = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;
这里的ClipRange0比较奇怪，来看看他的定义(UIDrawCall.cs)：
/// <summary>
/// Set the shader clipping parameters.
/// </summary>
void SetClipping (int index, Vector4 cr, Vector2 soft, float angle)
{
angle *= -Mathf.Deg2Rad;
Vector2 sharpness = new Vector2(1000.0f, 1000.0f);
if (soft.x > 0f) sharpness.x = cr.z / soft.x;
if (soft.y > 0f) sharpness.y = cr.w / soft.y;
if (index < ClipRange.Length)
{
mDynamicMat.SetVector(ClipRange[index], new Vector4(-cr.x / cr.z, -cr.y / cr.w, 1f / cr.z, 1f / cr.w));
mDynamicMat.SetVector(ClipArgs[index], new Vector4(sharpness.x, sharpness.y, Mathf.Sin(angle), Mathf.Cos(angle)));
}
}暂时不管其中的ClipArgs（也就是原Shader中的_ClipArgs0），同样我们也暂时不管其中的index索引，其是NGUI用于实现多层Panel嵌套裁剪用的，此篇文章中我们不予讨论，但就ClipRange来看，其会被设置成：
Vector4(-cr.x / cr.z, -cr.y / cr.w, 1f / cr.z, 1f / cr.w)
至于cr到底是哪里传来的参数，我们同样可以跟踪看看，但是此处我们暂且略过（有兴趣的朋友可以细看看UIPanel.UpdateDrawCalls()），在此我们直接给出结论：cr代表的是Panel的（裁剪）区域大小，其中xy分量代表区域中心，zw分量代表区域大小的一半（注意，是区域大小的一半！）
对于裁剪，我们的目标其实很明确，就是判断某个点是否在Panel的区域中，如果不在则将其直接“裁剪掉”，在则保留，相关的方法有不少，比较直接的一种就是直接比较点坐标与Panel的Corner坐标，不过这里我们使用一种更为通用的方法，就是将点坐标转换到Panel的局部坐标系下，并执行一个“归一化”操作，操作上就是首先执行一个位移操作，然后依据Panel的大小执行一个缩放，即：
假设顶点坐标为 vx, vy, Panel的中心位置为px, py, Panel的区域大小为pw, ph,并设pw’ = 0.5 * pw, ph’ = 0.5 * ph, 则相关操作可表示为：
vx’ = (vx - px) / pw’
vy’ = (vy - py) / ph’
考虑之前提到的ClipRange，其如果使用上述分量来表示的话，即为：
ClipRange.x = -px / pw’
ClipRange.y = -py / ph’
ClipRange.z = 1 / pw’
ClipRange.w = 1 / ph’
综上，则有：
vx’ = vx * ClipRange.z + ClipRange.x
vy’ = vy * ClipRange.w + ClipRange.y
上述公式即是vertex着色器中最后那行代码所要表达的流程~
OK，看完vertex，接着瞅瞅片段着色器（即frag），没想第一句就有些奇怪：
// Softness factor
float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipArgs0;
暂时不管那个_ClipArgs0，先来看看float2(1.0, 1.0) - abs(IN.worldPos)这句是什么意思~
IN.worldPos是vertex着色器中最后那行代码输出的结果，根据前面所述，该值被变换到了Panel的局部坐标系下，并依据Panel大小进行了缩放操作，所以如果IN.worldPos.x（即前面的vx’）的绝对值小于等于1，则可以认定IN.worldPos.x在Panel的大小范围之内，如果其值大于1，则可认定IN.worldPos.x不在Panel的大小范围之内（IN.worldPos.y（即前面的vy’）亦是如此~）
所以，float2(1.0, 1.0) - abs(IN.worldPos)这句话即是用来判断顶点是否在Panel的范围之内，所得结果的任一分量如果小于0则点在Panel范围之外，反之结果分量如果都大于0，则点在Panel范围之内~
但是后面乘以_ClipArgs0又是个什么鬼？
不急，首先我们还是先来看看_ClipArgs0的含义，答案同样可以从之前所列的SetClipping函数中找到：_ClipArgs0的xy分别是cr.z / soft.x和cr.w / soft.y，cr.z和cr.w即是Panel区域大小的一半（即之前的pw’和ph’），而所谓的soft，则是Panel所支持的soft clip功能，效果上就是裁剪控件的边缘可以根据soft大小渐隐显示，而不是显示成硬边~
设置Soft的Panel裁剪效果：
未设置Soft的Panel裁剪效果：
假设顶点（以Panel坐标系下定义，此时Panel的中心位置即为（0,0））的坐标为(vx, vy)，Panel的区域大小为(pw, ph)，soft的设置大小为(sx, sy)，同样设pw’ = 0.5 * pw, ph’ = 0.5 * p，则有：
顶点距离区域边缘的大小
d = (pw’ - abs(vx), ph’ - abs(vy)) = (dx, dy)
计算d与soft的比值
f = (dx / sx, dy / sy) = (fx, fy)
对比值f做一个clamp01操作
f’ = (clamp01(fx), clamp01(fy))
此时f’分量的较小值即代表当前顶点的透明度大小~
使用代码来表达一下上述流程，就有：
float2 factor = (float2(pw’, ph’) - abs(vx, vy)) * (1 / sx, 1 / sy)
// assume fragment color is col
col.a *= clamp(min(factor.x, factor.y), 0.0, 1.0);
factor继续处理下，提取一个（pw’, ph’），则有：
float2 factor =
(float2(1, 1) - abs(vx / pw’, vy / ph’)) * (pw’ / sx, ph’ / sy) =
(float2(1, 1) - abs(vx’, vy’)) * (pw’ / sx, ph’ / sy)
感觉是不是很熟悉，考虑到_ClipArgs0的xy分别是cr.z / soft.x和cr.w / soft.y，则上面的表述其实就是vert的第一行代码 ：）
// Softness factor
float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipArgs0;
而vert后面的代码便相对普通了，基本就是根据factor来调整alpha值~
OK，至此，NGUI用以实现clip的实现原理我们大概清晰了，不过目前该实现方式仅能支持NGUI的原生控件，对于其他的可视元素便无能为力了，如果我们在UI上挂上一个粒子（ParticleSystem），很快便能发现裁剪不起效果了，但是实际项目中，在UI上挂接粒子（或者其他可视元素）其实是个比较普遍的需求，如何来较好的解决这种情况下的Panel裁剪问题呢？我们下篇再来小聊聊吧~