NGUI Panel Soft Clip原理分析
发表于2018-10-23
在给大家介绍NGUI Panel Soft Clip之前,需要先给大家分析下Ngui Panel的软裁剪是怎么实现的。之所以大家不了解NGUI中的Panel Soft Clip,是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和除法,使得这种裁剪方式非常高效而且精巧,值得学习。
来自:https://blog.csdn.net/nxshow/article/details/72864419