NGUI Panel Soft Clip原理分析

这一块我之前一直看得不是很懂,前几个月有一次做粒子裁剪的时候想模仿做,没有做出来,只能靠着很挫的if来判断。这几天又有一个需求想实现图片的裁剪,不可能一个图片一个panel吧,所以就想到了自己实现Clip Sprite。

在这里先分析一下Ngui Panel的软裁剪是怎么实现的。我之前没有看懂的原因是,NGUI对这块做了大量的优化,单独看一行代码,或者一个公式是看不出什么的,单独看shader也会云里雾里,所以这里我们要结合shader和代码一起看,才能真正了解ngui的设计精巧之处。

首先,我们知道,所有的NGUI渲染都是通过UIDrawCall这个类实现的,所以我们主要分析这个类。

NGUI考虑到了嵌套Soft Clip的情况,设计了一套支持多重嵌套的Soft Clip架构,目前最多支持到三重嵌套。不同嵌套对应的Shader是不一样的,具体设置函数在这(分析也贴在上面了)

    void CreateMaterial ()
	{
		mTextureClip = false;
		mLegacyShader = false;
		mClipCount = panel.clipCount;

		string shaderName = (mShader != null) ? mShader.name :
			((mMaterial != null) ? mMaterial.shader.name : "Unlit/Transparent Colored");

		// Figure out the normal shader's name
		shaderName = shaderName.Replace("GUI/Text Shader", "Unlit/Text");

		if (shaderName.Length > 2)
		{
			if (shaderName[shaderName.Length - 2] == ' ')
			{
				int index = shaderName[shaderName.Length - 1];
				if (index > '0' && index <= '9') shaderName = shaderName.Substring(0, shaderName.Length - 2);
			}
		}

		shaderName = shaderName.Replace(TEXTURE_CLIP, "");

        var newShader = shader;
        //如果是Mask裁剪,就直接寻找 Unlit/Transparent Colored(TextureClip)这样 或者 Unlit/Text(TextureClip)这样的shader
        if (panel.clipping == Clipping.TextureMask)
		{
			mTextureClip = true;
            newShader = Shader.Find(shaderName + TEXTURE_CLIP);
		}
		else if (mClipCount != 0)       //如果父节点有多个裁剪panel 就设置成Soft Clip的形式
		{
            //寻找的Shader格式为  Unlit/Transparent Colored 1 或者  Unlit/Transparent Colored 2 这样的 ,后缀就是有多少层,最大ngui写到了3,一般够用了
            var shaderPath = shaderName + " " + mClipCount;
            newShader = Shader.Find(shaderPath);
		}
        else newShader = Shader.Find(shaderName);

		// Always fallback to the default shader 如果找不到 就用默认的shader 一般设置成这个shader,就是达不到你需要的效果了
        if (newShader == null) newShader = Shader.Find("Unlit/Transparent Colored");

		if (mMaterial != null)
		{
			mDynamicMat = new Material(mMaterial);
			mDynamicMat.name = "[NGUI] " + mMaterial.name;
			mDynamicMat.hideFlags = HideFlags.DontSave | HideFlags.NotEditable;
			mDynamicMat.CopyPropertiesFromMaterial(mMaterial);      //这里会把之前的材质的所有属性全部复制到新的材质上(贴图啊什么的 很方便啊)
#if !UNITY_FLASH
			string[] keywords = mMaterial.shaderKeywords;
			for (int i = 0; i < keywords.Length; ++i)
				mDynamicMat.EnableKeyword(keywords[i]);
#endif
			// If there is a valid shader, assign it to the custom material
            if (newShader != null)
			{
                mDynamicMat.shader = newShader;
			}
			else if (mClipCount != 0)
			{
				Debug.LogError(shaderName + " shader doesn't have a clipped shader version for " + mClipCount + " clip regions");
			}
		}
		else
		{
            mDynamicMat = new Material(newShader);
            mDynamicMat.name = "[NGUI] " + newShader.name;
			mDynamicMat.hideFlags = HideFlags.DontSave | HideFlags.NotEditable;
		}
	}
所以到时候我们只需要最终去找Unlit/Transparent Colored 1这样的shader就好了


这个类中与裁剪相关的代码在OnWillRenderObject这个函数中,这个函数是用于设置渲染之前的一些设置的,一般用于设置材质的参数。我将函数贴在下面

	void OnWillRenderObject ()
	{
		UpdateMaterials();

		if (onRender != null) onRender(mDynamicMat ?? mMaterial);
		if (mDynamicMat == null || mClipCount == 0) return;

		if (mTextureClip)
		{
			Vector4 cr = panel.drawCallClipRange;
			Vector2 soft = panel.clipSoftness;

			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;

			mDynamicMat.SetVector(ClipRange[0], new Vector4(-cr.x / cr.z, -cr.y / cr.w, 1f / cr.z, 1f / cr.w));
			mDynamicMat.SetTexture("_ClipTex", clipTexture);
		}
		else if (!mLegacyShader)
		{
			UIPanel currentPanel = panel;

			for (int i = 0; currentPanel != null; )
			{
				if (currentPanel.hasClipping)
				{
					float angle = 0f;
					Vector4 cr = currentPanel.drawCallClipRange;

					// Clipping regions past the first one need additional math
					if (currentPanel != panel)
					{
						Vector3 pos = currentPanel.cachedTransform.InverseTransformPoint(panel.cachedTransform.position);
						cr.x -= pos.x;
						cr.y -= pos.y;

						Vector3 v0 = panel.cachedTransform.rotation.eulerAngles;
						Vector3 v1 = currentPanel.cachedTransform.rotation.eulerAngles;
						Vector3 diff = v1 - v0;

						diff.x = NGUIMath.WrapAngle(diff.x);
						diff.y = NGUIMath.WrapAngle(diff.y);
						diff.z = NGUIMath.WrapAngle(diff.z);

						if (Mathf.Abs(diff.x) > 0.001f || Mathf.Abs(diff.y) > 0.001f)
							Debug.LogWarning("Panel can only be clipped properly if X and Y rotation is left at 0", panel);

						angle = diff.z;
					}

					// Pass the clipping parameters to the shader
					SetClipping(i++, cr, currentPanel.clipSoftness, angle);
				}
				currentPanel = currentPanel.parentPanel;
			}
		}
		else // Legacy functionality
		{
			Vector2 soft = panel.clipSoftness;
			Vector4 cr = panel.drawCallClipRange;
			Vector2 v0 = new Vector2(-cr.x / cr.z, -cr.y / cr.w);
			Vector2 v1 = new Vector2(1f / cr.z, 1f / cr.w);

			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;

			mDynamicMat.mainTextureOffset = v0;
			mDynamicMat.mainTextureScale = v1;
			mDynamicMat.SetVector("_ClipSharpness", sharpness);
		}
	}

可以看到,这里有3个分支,

if (mTextureClip)
{
...
}
对应的是图片裁剪,作用是设置一张Mask图片,然后Panel会根据图片的Alpha值来设置显示区域。

第二个分支就是比较重要了(一般不会走到第三个分支,因为mLegacyShader似乎被写死成为false了)

else if (!mLegacyShader)
{
...
}
这一个分支有什么用呢?就是用于给软裁剪设置裁剪范围的。下面的代码段是我对下面这个分支的理解
		else if (!mLegacyShader)
		{
			UIPanel currentPanel = panel;

            //遍历所有的父Panel(所以支持嵌套的Soft Clip)
			for (int i = 0; currentPanel != null; )
			{
                //如果父Panel节点有裁剪
				if (currentPanel.hasClipping)
				{
                    //这个里面计算裁剪范围和父Panel和当前DrawCall所属的Panel的角度
					float angle = 0f;
					Vector4 cr = currentPanel.drawCallClipRange;

                    //如果有多重Soft Clip的话 就会走到这里
					// Clipping regions past the first one need additional math
					if (currentPanel != panel)
					{
						Vector3 pos = currentPanel.cachedTransform.InverseTransformPoint(panel.cachedTransform.position);
						cr.x -= pos.x;
						cr.y -= pos.y;

						Vector3 v0 = panel.cachedTransform.rotation.eulerAngles;
						Vector3 v1 = currentPanel.cachedTransform.rotation.eulerAngles;
						Vector3 diff = v1 - v0;

                        //其实这个函数就是 把角度限制在-180和180之间
						diff.x = NGUIMath.WrapAngle(diff.x);
						diff.y = NGUIMath.WrapAngle(diff.y);
						diff.z = NGUIMath.WrapAngle(diff.z);

						if (Mathf.Abs(diff.x) > 0.001f || Mathf.Abs(diff.y) > 0.001f)
							Debug.LogWarning("Panel can only be clipped properly if X and Y rotation is left at 0", panel);

                        //因为是界面 所以角度是平面的 只有Z是有效角度
						angle = diff.z;
					}

                    //这里就是真正设置裁剪的地方了,我们看看这里的各个参数的意义吧。
                    //如果只是单层Soft Clip的话
                    // i = 0,
                    // cr就是this.panel的 drawCallClipRange,而这个drawCallClipRange的各个参数意义是这样的: x:中心点X坐标 y:中心点Y坐标 z:panel width的一半, w:panel height的一半
                    // currentPanel.clipSoftness 软裁剪设置的渐变边缘
                    // angle 与父Panel的角度 如果 是单层shader的话,这个角度是0(而且shader里面也不会用到)
                    // Pass the clipping parameters to the shader
                    SetClipping(i++, cr, currentPanel.clipSoftness, angle);
				}
				currentPanel = currentPanel.parentPanel;
			}
		}

可以看到最重要的函数就是SetClipping了 我们走进去瞧瞧。

	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;

        //这个ClipRange在awake被写死成数量为4的数组,命名规则为:_ClipRange0 _ClipRange1 _ClipRange2 _ClipRange3这样
        //ClipArgs同理 规则为 _ClipArgs0 _ClipArgs1 _ClipArgs2 _ClipArgs3
        //所以我们自己扩展的话,也要跟着他的命名规则走。
        //如果是单层soft clip的话,index = 0,所以设置的参数名字为_ClipRange0和_ClipArgs0
        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)));
		}
	}

在这里,有一堆看不懂的公式,我们先不要管,我们先走进shader里面看看,这些参数是怎么用的,因为单独看这些公式是没有用的。我们就只分析单层的soft clip,所以去Unlit - Transparent Colored 1.shader这个shader里面看看,我们先分析顶点着色器

			v2f vert (appdata_t v)
			{
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.color = v.color;
				o.texcoord = v.texcoord;
				//在顶点着色器里面计算了一个所谓的world pos,这个world pos是一个什么东西呢?结合之前在SetCliping函数中的参数,可以得知这个完整的公式如下
				// o.worldPos = float2(v.vertex.x / cr.z - cr.x / cr.z, v.vertex.y / cr.w - cr.y / cr.w);
				//最终实际的得到的是一个标准化值,-1~1范围内的值表示为在裁剪区域范围内,超过这个值的像素点就被裁剪掉了
				o.worldPos = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;
				return o;
			}

我们通过一个图来分析这个公式的意义:


图片随便画的 比较low,最终实际的得到的是一个标准化值,-1~1范围内的值表示为在裁剪区域范围内,超过这个值的像素点就被裁剪掉了

接下来,我们到像素着色器里面看看究竟是怎么裁剪的:

			half4 frag (v2f IN) : COLOR
			{
				//这个公式可以看成两个部分 第一个部分是(float2(1.0, 1.0) - abs(IN.worldPos))
				//意义是 把 worldPos转换成另外一种表现形式,就是大于0的就是在像素范围内,小于0的就是在像素范围外
				//同时 * _ClipArgs0实际上是在做渐变边缘计算,这里的_ClipArgs0实际上是cr.z / soft.x和 cr.z / soft.x;
				//所以这个 * _ClipArgs0的意义把factor最终设置成显示范围以内并且在不在渐变边缘的 设置成大于1的,在渐变边缘的,设置成0-1的 裁剪的 设置成小于0的
				// Softness factor
				float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipArgs0;
			
				// Sample the texture
				half4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
				//这里的alpha就非常简单了,先取得xy中最小的那个,然后大于1的设置为1 小于0的设置为0,完事
				col.a *= clamp( min(factor.x, factor.y), 0.0, 1.0);
				return col;
			}

我们通过一张图片看看factor的计算结果



总结一下,NGUI在通过这样比较隐晦的方式去实现这个shader,避免了在shader中出现if和除法,使得这种裁剪方式非常高效而且精巧,值得学习

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值