小聊聊NGUI中Panel的Clip功能（之二）

  
  上篇简单聊了一下NGUI中Panel裁剪的实现原理，总结来看其实比较简单，就是通过Shader计算fragment关于Panel裁剪区域的相对位置，然后通过调整alpha值来实现裁剪效果~

 

  那么依样画瓢，如果我们想要实现非NGUI元素的裁剪，也可以考虑使用Shader的方式，在此以ParticleSystem为例，看看我们如何将其挂接到UI之上，并且实现裁剪效果~

 

  回忆一下之前的frag着色器：

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;
}

  其中的IN.worldPos是经过变换过的顶点坐标，如果我们找到方法对粒子的顶点进行同样的变换，那么就可以实现相同的裁剪功能~

 

  那么如何执行变换呢？考虑之前vert着色器中进行转换的方法：

 

  o.worldPos = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;

 

  我们是不是可以直接照搬，将其运用于粒子顶点之上呢？答案是否定的，原因在于粒子的顶点数据并不和Panel在同一坐标系下（而关于为何NGUI元素的顶点数据和Panel是在同一个坐标系的问题，有兴趣的朋友可以细看看UIDrawCall.cs），而不同坐标系下的数据进行相互操作，一般都不会得到正确结果，多是没有什么意义的~

 

  那怎么办呢？其实也简单，统一坐标系即可，即将粒子的顶点坐标系和Panel的顶点坐标系进行统一，而至于选择哪个坐标系则并不重要，在Unity中有不少选择，我们在此选择Viewport坐标系~

 

  至此，方法已经很明确了，为了实现粒子在NGUI Panel中的裁剪，我们仅需要以Viewport坐标系为桥梁，同样利用Shader来判断粒子顶点是否在Panel的裁剪范围之内，并仍然通过调整alpha值来实现真正的裁剪效果~

 

  先来看第一步，将Panel坐标转至Viewport坐标，在此我们通过MonoBehaviour来完成：

using UnityEngine;

[ExecuteInEditMode]
public class ModelClip : MonoBehaviour
{
UIPanel m_panel;
Material m_material;

int m_panelSizeXProperty;
int m_panelSizeYProperty;
int m_panelCenterAndSharpnessProperty;

void Start()
{
m_panel = UIPanel.Find(transform);

var renderer = gameObject.GetComponent<Renderer>();
if (renderer)
{
if (!Application.isPlaying)
{
m_material = renderer.sharedMaterial;
}
else
{
m_material = renderer.material;
}
}

m_panelSizeXProperty = Shader.PropertyToID("_PanelSizeX");
m_panelSizeYProperty = Shader.PropertyToID("_PanelSizeY");
m_panelCenterAndSharpnessProperty = Shader.PropertyToID("_PanelCenterAndSharpness");

if (m_panel)
{
UpdateClip(m_panel);
m_panel.onClipMove += UpdateClip;
}
}

void UpdateClip(UIPanel panel)
{
if (panel && panel.hasClipping)
{
var soft = panel.clipSoftness;
var sharpness = new Vector2(1000.0f, 1000.0f);

if (soft.x > 0f)
{
sharpness.x = panel.baseClipRegion.z / soft.x;
}
if (soft.y > 0f)
{
sharpness.y = panel.baseClipRegion.w / soft.y;
}

Vector4 panelCenterAndSharpness;

var uiCamera = NGUIUtil.GetCamera();
Debug.Assert(uiCamera != null);
var panelWorldCorners = m_panel.worldCorners;
var leftBottom = uiCamera.WorldToViewportPoint(panelWorldCorners[0]);
var topRight = uiCamera.WorldToViewportPoint(panelWorldCorners[2]);
var center = Vector3.Lerp(leftBottom, topRight, 0.5f);

panelCenterAndSharpness.x = center.x;
panelCenterAndSharpness.y = center.y;
panelCenterAndSharpness.z = sharpness.x;
panelCenterAndSharpness.w = sharpness.y;

// Set shader properties
m_material.SetFloat(m_panelSizeXProperty, topRight.x - leftBottom.x);
m_material.SetFloat(m_panelSizeYProperty, topRight.y - leftBottom.y);
m_material.SetVector(m_panelCenterAndSharpnessProperty, panelCenterAndSharpness);
}
}

}
  代码并不复杂，核心自然如前面所说，就是将Panel坐标转至Viewport坐标系下，所以留心一下那两句WorldToViewportPoint即可~

 

  接着，便是使用Shader来判断粒子顶点是否在Panel的裁剪范围之下了，由于Panel的裁剪范围已经变换至Viewport坐标系，所以粒子的顶点也需要做相同的转换~

v2f vert (appdata v)
{
v2f o;

o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.color = v.color;
o.uv = TRANSFORM_TEX(v.uv, _MainTex);

float2 clipSpace = o.vertex.xy / o.vertex.w;

// Normalize clip space
o.posInPanel = (clipSpace.xy + 1) * 0.5;

// Adjust for panel offset
o.posInPanel.x -= _PanelCenterAndSharpness.x;
o.posInPanel.y -= _PanelCenterAndSharpness.y;

// Adjust for panel size
o.posInPanel.x *= (2 / _PanelSizeX);
o.posInPanel.y *= (2 / _PanelSizeY);

return o;
}
  上面代码最重要的其实是这两句：

float2 clipSpace = o.vertex.xy / o.vertex.w;
// Normalize clip space
o.posInPanel = (clipSpace.xy + 1) * 0.5;
  首先使用ModelViewProjection变换后的xy分量除以w分量，可以将顶点变换至NormalizedDeviceCoordinates(NDC)空间，该空间下，xy的取值范围为[-1, 1]，据此我们重新将其映射至[0, 1]范围中（即Viewport空间中），于是便有了上面两行代码~

 

  之后的操作与NGUI原生的裁剪Shader如出一辙，不清楚的朋友可以参考前篇~

 

  至此我们便完成了粒子在NGUI Panel下的裁剪操作，有图有真相~

  


  


  

  OK，废话不多说了，下次再见吧~