1. 项目概述为什么UI圆角值得你花5分钟在Unity里做UI你是不是也遇到过这样的场景产品经理指着设计稿说“这里要圆角那里也要圆角”美术同学丢过来一张全是圆角矩形的设计图而你看着Unity自带的Image组件只能默默叹气然后要么去切九宫格图要么就硬着头皮用多个半圆和矩形去拼拼出来的效果锯齿明显性能开销还不小一旦UI尺寸需要动态调整整个拼装结构就可能崩掉。这就是为什么“Unity UI圆角”会成为一个高频的搜索词和开发痛点。它看似是一个简单的视觉效果但Unity的UGUI和最新的UI Toolkit都没有提供原生的、高性能的圆角渲染支持。一个专业的、自适应的圆角UI是提升应用质感最直接、成本最低的方式。它能让你的界面瞬间摆脱“程序员审美”的刻板印象向用户传递出精致、现代、友好的产品气质。网上有很多方案比如用Shader、用Mesh生成、用Mask组合但要么实现复杂要么性能堪忧要么无法完美适配各种情况比如描边、渐变、点击反馈。今天我要分享的是一个我经过多个项目实战打磨总结出的“终极”方案。它不依赖任何第三方插件核心代码不到200行你可以在5分钟内集成到现有项目中并且获得以下特性完美圆角无锯齿支持任意圆角半径。高性能基于Command Buffer和GPU Instancing一个Draw Call可绘制大量圆角UI。全功能支持颜色、渐变、描边、内外阴影可选扩展并且能完美响应RectTransform的尺寸变化。易用性提供一个RoundedRectangle组件像使用普通Image一样使用它通过参数面板轻松调整所有视觉效果。这个方案的核心思想是用Shader在GPU上直接计算并绘制圆角矩形。我们将彻底告别拼UI和切图的原始方式。下面我就从原理到实现带你一步步拆解这个“5分钟专业级UI美化”方案。2. 核心原理GPU是如何“画”出圆角的在深入代码之前我们必须先搞清楚目标。我们不是要做一个“看起来像”圆角的东西而是要一个真正的、由像素精确构成的圆角矩形。其几何定义非常明确一个矩形四个角是四分之一圆弧。2.1 符号距离场定义形状的数学魔法如何在Shader中定义一个圆角矩形最优雅高效的方法是使用符号距离场。SDF是一个函数对于平面上的任意一点p它返回该点到目标形状边界的最短距离。并且约定点在形状内部时距离为负外部时为正恰好在边界上则为零。对于一个中心在原点、宽为w、高为h、圆角半径为r的矩形其SDF函数可以这样构建先考虑一个无限大的圆角矩形即四个角是圆的但边是无限长的。我们可以通过计算点p到中心矩形的“膨胀”距离来得到。具体做法是先取点p的绝对值q abs(p)得到第一象限的点。然后计算这个点q到一个更小的矩形(w/2 - r, h/2 - r)的距离。这个更小的矩形是原矩形向内收缩了半径r后的“核心矩形”。点q到“核心矩形”的距离d实际上就是点p到无限大圆角矩形边界的距离。如果d r说明该点位于四个圆角区域内如果d r则位于四条直边区域内。最后完整的SDF公式为sdf length(max(q - (size - r), 0.0)) - r。其中size (w/2, h/2)。这个公式巧妙地统一处理了圆角和直边区域的计算。在Shader中我们只需要几行代码就能实现这个函数float sdRoundedBox(float2 p, float2 b, float r) { float2 q abs(p); float2 d max(q - b r, 0.0); return length(d) - r; }这个函数就是所有魔法的基础。给定一个点p、矩形半宽高b和圆角半径r它就能告诉我们这个点离圆角矩形边界有多远。2.2 从距离到场着色与抗锯齿有了距离信息着色就变得非常简单。填充颜色如果sdf 0点在形状内部我们输出填充色如果sdf 0则在外部通常输出透明。描边描边本质上是一个距离范围。例如要画一个宽度为strokeWidth的描边我们只需要判断abs(sdf) strokeWidth / 2的区域并为其着色即可。平滑抗锯齿这是SDF方案相比传统像素拼贴最大的优势之一。由于我们有了精确的、连续的距离值可以在边界附近进行平滑插值。通常我们定义一个小的平滑范围fwidth与屏幕像素导数相关然后使用smoothstep函数让颜色在-fwidth到fwidth的区间内从完全填充过渡到完全透明。这样渲染出的边缘在任何分辨率下都光滑无比没有锯齿。注意fwidth函数在片元着色器中用于估算当前像素在屏幕空间中的变化率它是实现高质量、分辨率无关的抗锯齿的关键。但要注意它在某些平台如OpenGL ES 2.0上可能不支持这时我们可以使用一个固定的小值如0.5来近似虽然效果稍逊但依然可用。理解了这些我们就知道整个方案的技术栈就清晰了C#脚本负责管理UI的变换数据位置、尺寸、圆角半径、颜色等并将这些数据打包传递给一个自定义Shader。该Shader利用SDF函数在GPU上为每个像素计算其到圆角矩形的距离并根据距离值决定最终输出的颜色实现填充、描边和抗锯齿。3. 方案设计与组件拆解有了理论支撑我们来设计具体的实现方案。我们的目标是创建一个易于使用的MonoBehaviour组件——RoundedRectangle。3.1 组件架构与数据流整个组件的运行遵循以下数据流用户输入开发者在Inspector面板上设置Color、Radius、Stroke Width、Stroke Color等属性。数据准备RoundedRectangle组件在OnRectTransformDimensionsChange当UI尺寸变化时和OnValidate当Inspector属性变化时等回调中收集当前RectTransform的最终尺寸rect.width,rect.height和用户设置的属性。材质属性块为了高效批处理GPU Instancing我们不直接修改材质而是使用MaterialPropertyBlock。我们将尺寸、半径、颜色等数据打包成一个Vector4数组或其他结构通过materialPropertyBlock.SetVectorArray传递给Shader。渲染命令在CanvasRenderer或Graphics的绘制流程中使用我们自定义的Shader和设置好属性的MaterialPropertyBlock来绘制一个简单的矩形Mesh或使用UI系统的默认几何体。实际上由于我们用的是SDFGPU画的是一个覆盖整个RectTransform范围的矩形但最终只有SDF计算出的圆角矩形区域会显示出来。GPU计算Shader接收顶点数据包含UV我们将用它传递局部坐标和C#传来的属性数据。在片元着色器中将UV映射到局部坐标空间调用sdRoundedBox函数计算SDF然后根据SDF值进行着色、描边和抗锯齿计算输出最终颜色。3.2 关键类与接口设计RoundedRectangle.cs核心组件。继承自MaskableGraphicUGUI或VisualElementUI Toolkit的对应基类以集成到UI系统的裁剪、点击检测等流程中。这里以UGUI为例更常见。属性float radiusColor fillColorfloat strokeWidthColor strokeColorbool useGradient等。核心方法protected override void OnPopulateMesh(VertexHelper vh)或使用MaterialPropertyBlock的方式更新材质属性。现代更推荐使用MaterialPropertyBlock来避免材质实例化污染。监听RectTransform的尺寸变化动态更新传递给Shader的尺寸数据。RoundedRectangle.shader核心着色器。Properties块定义一些默认属性但大部分动态属性由C#脚本传递。CGINCLUDE/HLSLINCLUDE包含sdRoundedBox等工具函数。顶点着色器将模型空间顶点变换到裁剪空间并计算局部坐标或从UV派生传递给片元着色器。片元着色器接收局部坐标和属性参数计算SDF进行着色和混合。材质与资源管理创建一个使用上述Shader的材质球作为RoundedRectangle组件的默认材质。可以通过[RequireComponent(typeof(CanvasRenderer))]确保必要的组件存在。3.3 性能考量批处理与Draw CallUI性能的核心指标之一是Draw Call数量。我们的方案必须支持合批。静态合批如果多个RoundedRectangle使用相同的材质Shader并且它们的材质属性没有在运行时被MaterialPropertyBlock差异化设置或者设置的属性值相同那么它们就有可能被静态合批。但UI系统动态变化频繁静态合批不现实。GPU Instancing这是我们的救星。我们需要在Shader中启用GPU Instancing并将每个UI实例的独有数据如尺寸、位置偏移、颜色、半径通过Per-instance数据如UNITY_INSTANCING_BUFFER_START传递。这样多个外观不同但Shader相同的圆角矩形可以在一个Draw Call内绘制极大提升性能。实操心得将所有每实例数据位置、尺寸、颜色、半径等打包成尽可能少的float4变量。例如可以将(width, height, radius, strokeWidth)打包成一个float4将fillColorRGBA打包成另一个float4。减少Per-instance数据的大小有助于提升Instancing效率。4. 完整实现步骤与代码解析理论说再多不如一行代码。我们直接进入实战环节。4.1 第一步编写核心Shader创建一个新的Shader文件命名为UI-RoundedRectangle.shader。我们使用Unity的UI/Default着色器作为模板进行修改以保持与UI系统默认的混合模式、测试模式一致。Shader UI/RoundedRectangle { Properties { [PerRendererData] _MainTex (Sprite Texture, 2D) white {} _Color (Tint, Color) (1,1,1,1) _Radius (Radius, Float) 10.0 _StrokeWidth (Stroke Width, Float) 0.0 _StrokeColor (Stroke Color, Color) (0,0,0,1) _RectSize (Rect Size (Width/Height), Vector) (100, 100, 0, 0) _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 { QueueTransparent IgnoreProjectorTrue RenderTypeTransparent PreviewTypePlane CanUseSpriteAtlasTrue } 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 3.0 #pragma multi_compile_instancing // 启用GPU Instancing #pragma multi_compile __ UNITY_UI_ALPHACLIP #include UnityCG.cginc #include UnityUI.cginc 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 }; sampler2D _MainTex; fixed4 _Color; float4 _MainTex_ST; // 使用Instancing缓冲池传递每实例数据 UNITY_INSTANCING_BUFFER_START(Props) UNITY_DEFINE_INSTANCED_PROP(float, _Radius) UNITY_DEFINE_INSTANCED_PROP(float, _StrokeWidth) UNITY_DEFINE_INSTANCED_PROP(float4, _StrokeColor) UNITY_DEFINE_INSTANCED_PROP(float2, _RectSize) UNITY_INSTANCING_BUFFER_END(Props) // SDF函数 float sdRoundedBox(float2 p, float2 b, float r) { float2 q abs(p); float2 d max(q - b r, 0.0); return length(d) - r; } v2f vert(appdata_t v) { v2f o; UNITY_SETUP_INSTANCE_ID(v); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o); o.worldPosition v.vertex; o.vertex UnityObjectToClipPos(o.worldPosition); o.texcoord TRANSFORM_TEX(v.texcoord, _MainTex); o.color v.color * _Color; return o; } fixed4 frag(v2f i) : SV_Target { // 从UV计算局部坐标范围从(-0.5, -0.5)到(0.5, 0.5) float2 localPos i.texcoord - 0.5; // 缩放局部坐标以匹配实际矩形尺寸 float2 rectHalfSize UNITY_ACCESS_INSTANCED_PROP(Props, _RectSize) * 0.5; localPos * (rectHalfSize * 2.0); // 等价于 localPos.x * _RectSize.x, localPos.y * _RectSize.y float radius UNITY_ACCESS_INSTANCED_PROP(Props, _Radius); float strokeWidth UNITY_ACCESS_INSTANCED_PROP(Props, _StrokeWidth); float4 strokeColor UNITY_ACCESS_INSTANCED_PROP(Props, _StrokeColor); // 计算SDF距离 float d sdRoundedBox(localPos, rectHalfSize, radius); // 初始化颜色和透明度 half4 color i.color; half alpha color.a; // 描边计算 half strokeAlpha 0.0; if (strokeWidth 0.0) { // 计算到描边内外边界的距离 float halfStroke strokeWidth * 0.5; float outerDist abs(d) - halfStroke; float innerDist abs(d) halfStroke; // 平滑过渡描边区域 strokeAlpha 1.0 - smoothstep(0.0, 1.0, outerDist); // 在描边内部填充色需要被裁剪 alpha * smoothstep(0.0, 1.0, innerDist); } else { // 无描边时直接根据内部距离决定填充透明度 alpha * 1.0 - smoothstep(0.0, 1.0, d); } // 抗锯齿平滑处理核心边界 float fw fwidth(d); alpha * 1.0 - smoothstep(-fw, fw, d); // 混合填充色和描边色 color.rgb lerp(color.rgb, strokeColor.rgb, strokeAlpha * strokeColor.a); color.a alpha; #ifdef UNITY_UI_ALPHACLIP clip(color.a - 0.001); #endif return color; } ENDCG } } }代码解析与注意事项[PerRendererData] _MainTex这个标签很重要它告诉Unity这个属性可能会被每个渲染器单独设置是支持MaterialPropertyBlock和合批的常见写法。虽然我们可能不用纹理但保留它以兼容UI系统。UNITY_INSTANCING_BUFFER_START(Props)这是GPU Instancing的数据块。我们将每个UI实例独有的_Radius、_StrokeWidth、_StrokeColor、_RectSize放在这里。注意_RectSize是完整宽高我们在片元着色器中会取其一半。sdRoundedBox函数就是前面讲的SDF核心。顶点着色器vert非常标准将顶点和UV传递下去。关键点在于我们通过i.texcoordUV坐标范围0~1来推导局部坐标。我们把UV中心点从(0.5,0.5)平移到(0,0)然后根据实际矩形尺寸进行缩放得到正确的局部坐标localPos。片元着色器frag计算localPos和rectHalfSize。调用sdRoundedBox得到有符号距离d。描边逻辑如果设置了描边宽度strokeWidth我们计算两个距离outerDist和innerDist。outerDist小于0的点在描边外部边界之内innerDist小于0的点在描边内部边界之内即填充区域应被裁剪掉。利用smoothstep实现平滑过渡。抗锯齿利用fwidth(d)获取距离场在屏幕空间的变化率在边界附近-fw到fw进行Alpha值的平滑插值这是消除锯齿的关键。颜色混合最后用lerp函数根据描边的透明度strokeAlpha将填充色和描边色混合。UNITY_UI_ALPHACLIP这是一个UI Shader常用的宏用于Alpha裁剪性能较好但边缘较硬。在我们的SDF方案中依靠Alpha平滑过渡已经能获得完美边缘通常可以不用它。4.2 第二步编写C#驱动组件接下来创建RoundedRectangle.cs脚本。using UnityEngine; using UnityEngine.UI; [RequireComponent(typeof(CanvasRenderer))] [AddComponentMenu(UI/Rounded Rectangle, 10)] public class RoundedRectangle : MaskableGraphic { [SerializeField, Range(0, 500)] private float m_Radius 10.0f; [SerializeField] private float m_StrokeWidth 0.0f; [SerializeField] private Color m_StrokeColor Color.black; public float radius { get m_Radius; set { if (Mathf.Approximately(m_Radius, value)) return; m_Radius Mathf.Max(0, value); SetMaterialDirty(); // 标记材质需要更新 } } public float strokeWidth { get m_StrokeWidth; set { if (Mathf.Approximately(m_StrokeWidth, value)) return; m_StrokeWidth Mathf.Max(0, value); SetMaterialDirty(); } } public Color strokeColor { get m_StrokeColor; set { if (m_StrokeColor.Equals(value)) return; m_StrokeColor value; SetMaterialDirty(); } } // 用于MaterialPropertyBlock的属性ID提升查询效率 private static readonly int RadiusPropertyID Shader.PropertyToID(_Radius); private static readonly int StrokeWidthPropertyID Shader.PropertyToID(_StrokeWidth); private static readonly int StrokeColorPropertyID Shader.PropertyToID(_StrokeColor); private static readonly int RectSizePropertyID Shader.PropertyToID(_RectSize); private MaterialPropertyBlock m_PropertyBlock; protected override void OnEnable() { base.OnEnable(); // 禁用默认的Mesh生成因为我们用Shader直接画满整个矩形区域 useLegacyMeshGeneration false; if (m_PropertyBlock null) m_PropertyBlock new MaterialPropertyBlock(); UpdateMaterialPropertyBlock(); } protected override void OnRectTransformDimensionsChange() { base.OnRectTransformDimensionsChange(); // 当UI尺寸变化时更新传递给Shader的尺寸数据 UpdateMaterialPropertyBlock(); } protected override void OnDidApplyAnimationProperties() { base.OnDidApplyAnimationProperties(); // 如果属性被动画系统修改也需要更新 UpdateMaterialPropertyBlock(); } #if UNITY_EDITOR protected override void OnValidate() { base.OnValidate(); // 在编辑器里修改属性时立即更新显示 if (IsActive()) UpdateMaterialPropertyBlock(); } #endif /// summary /// 更新MaterialPropertyBlock将属性传递给Shader。 /// 这是支持GPU Instancing合批的关键。 /// /summary private void UpdateMaterialPropertyBlock() { if (!IsActive() || canvasRenderer null) return; canvasRenderer.GetPropertyBlock(m_PropertyBlock); if (m_PropertyBlock null) m_PropertyBlock new MaterialPropertyBlock(); Rect r rectTransform.rect; Vector2 rectSize new Vector2(r.width, r.height); m_PropertyBlock.SetFloat(RadiusPropertyID, m_Radius); m_PropertyBlock.SetFloat(StrokeWidthPropertyID, m_StrokeWidth); m_PropertyBlock.SetColor(StrokeColorPropertyID, m_StrokeColor); m_PropertyBlock.SetVector(RectSizePropertyID, rectSize); canvasRenderer.SetPropertyBlock(m_PropertyBlock); } /// summary /// 重写此方法以生成一个最简单的全屏Quad。 /// 因为我们的形状完全由Shader定义所以只需要一个覆盖整个RectTransform的矩形即可。 /// /summary protected override void OnPopulateMesh(VertexHelper vh) { Rect r rectTransform.rect; vh.Clear(); // 添加四个顶点左下 右下 右上 左上 Vector2 corner1 new Vector2(r.x, r.y); Vector2 corner2 new Vector2(r.x r.width, r.y); Vector2 corner3 new Vector2(r.x r.width, r.y r.height); Vector2 corner4 new Vector2(r.x, r.y r.height); // 使用默认UV (0,0)到(1,1)Shader会利用这个UV计算局部坐标 vh.AddVert(corner1, color, new Vector2(0f, 0f)); vh.AddVert(corner2, color, new Vector2(1f, 0f)); vh.AddVert(corner3, color, new Vector2(1f, 1f)); vh.AddVert(corner4, color, new Vector2(0f, 1f)); // 添加两个三角形0,1,2 和 0,2,3 vh.AddTriangle(0, 1, 2); vh.AddTriangle(0, 2, 3); } // 提供一个设置所有属性的便捷方法 public void SetProperties(float newRadius, float newStrokeWidth, Color newStrokeColor, Color newColor) { radius newRadius; strokeWidth newStrokeWidth; strokeColor newStrokeColor; this.color newColor; // 继承自Graphic的color属性即填充色 // SetMaterialDirty会在属性setter中调用 } }关键实现解析继承MaskableGraphic这让我们自动获得了UI系统的基础功能颜色color属性、射线检测Raycast Target、以及被Mask组件裁剪的能力。禁用传统网格生成useLegacyMeshGeneration false;这行代码很重要。UI系统默认会为Graphic生成一个网格。我们重写了OnPopulateMesh来生成一个简单的全屏Quad这比系统默认的可能更高效也更符合我们的需求整个区域由Shader处理。MaterialPropertyBlock的使用这是实现高性能、支持合批的核心。我们不在每个RoundedRectangle上单独创建和修改材质实例而是通过MaterialPropertyBlock为每个渲染器设置独立的属性。CanvasRenderer.SetPropertyBlock方法允许我们为每个使用相同材质的UI元素设置不同的属性值同时GPU Instancing可以将它们合并绘制。属性ID缓存Shader.PropertyToID将属性名称字符串转换为整数ID。在频繁调用的UpdateMaterialPropertyBlock中使用整数ID比传递字符串效率高得多。更新时机我们在OnRectTransformDimensionsChange尺寸变化、OnValidate编辑器属性修改和属性setter中调用UpdateMaterialPropertyBlock确保任何改变都能实时反映到渲染上。OnPopulateMesh我们生成一个覆盖整个矩形区域的简单四边形两个三角形UV从(0,0)到(1,1)。Shader正是利用这个UV来重建每个片元在矩形内的局部位置。4.3 第三步在Unity中配置与使用创建材质在Project窗口右键 - Create - Material。将Shader选择为我们刚创建的UI/RoundedRectangle。将这个材质命名为UIRoundedRectangleMat。创建UI元素在Hierarchy中创建任意UI对象如Panel、Button下的Image等。添加组件移除默认的Image组件添加我们编写的RoundedRectangle组件。指定材质在RoundedRectangle组件的Material字段中拖入刚刚创建的UIRoundedRectangleMat。调整参数现在你可以在Inspector中实时调整Radius圆角半径、Color填充色、Stroke Width描边宽度、Stroke Color描边色了。改变RectTransform的尺寸圆角效果也会自适应。至此一个基础但功能完整的专业级圆角UI组件就完成了。从Shader原理到C#驱动再到实际配置整个过程如果熟练确实可以在5分钟内搭建起来。5. 高级功能扩展与性能优化基础功能实现了但一个“终极”方案还需要应对更复杂的需求和极致的性能。下面分享几个进阶技巧。5.1 添加渐变填充渐变是提升UI质感的重要手段。我们可以在Shader中增加对线性渐变从上到下从左到右甚至径向渐变的支持。修改Shader在Properties块和Instancing Buffer中添加渐变相关属性如_GradientColor另一端的颜色和_GradientDirection一个float0表示垂直1表示水平。在片元着色器中根据localPos的y值或x值在_Color和_GradientColor之间进行线性插值lerp用插值结果作为填充色。// 在Props缓冲区内添加 UNITY_DEFINE_INSTANCED_PROP(float4, _GradientColor) UNITY_DEFINE_INSTANCED_PROP(float, _GradientDirection) // 在frag函数中计算基础填充色时 float4 fillColor i.color; if (_UseGradient 0.5) { float t lerp(localPos.y / _RectSize.y, localPos.x / _RectSize.x, _GradientDirection); t t * 0.5 0.5; // 从(-0.5~0.5)映射到(0~1) fillColor.rgb lerp(fillColor.rgb, UNITY_ACCESS_INSTANCED_PROP(Props, _GradientColor).rgb, t); }C#脚本相应地增加bool useGradient、Color gradientColor等属性并在UpdateMaterialPropertyBlock中传递这些值。5.2 实现内阴影与外阴影阴影能增加UI的层次感。外阴影相对简单可以在绘制完圆角矩形后用相同的SDF但扩大一定范围并施加一个模糊和颜色偏移来模拟。但更高效、更物理的方法是使用距离场阴影。距离场阴影原理对于每个像素我们不仅计算它到当前圆角矩形的距离d还可以计算它到“阴影投射体”的距离。一个简单的软阴影近似公式是shadow clamp(d / (strokeWidth * softness), 0.0, 1.0);其中softness控制阴影柔和度。然后将shadow因子乘到最终颜色的Alpha值上或者与一个阴影颜色混合。这种方法性能开销极小因为只是在SDF计算基础上多做一次除法运算。你可以添加_ShadowColor、_ShadowOffset、_ShadowSoftness等属性来实现。实操心得内阴影的实现思路类似但计算的是到“收缩后的矩形”的距离。一个技巧是将localPos反向偏移阴影偏移量然后计算SDF最后用1.0 - smoothstep(...)来得到内部阴影区域。内阴影通常不需要太柔和softness可以设小一点。5.3 性能优化终极指南减少Overdraw确保RoundedRectangle的RectTransform尺寸不要无故过大超出显示范围的部分也会被Shader计算浪费性能。合理使用Canvas的裁剪和Mask组件。慎用Raycast Target如果UI不需要响应点击事件务必取消勾选Raycast Target。这能显著减少事件系统的性能开销尤其是在复杂UI界面中。批处理破坏者MaterialPropertyBlock是支持合批的但以下情况会破坏批处理使用了不同的材质球即使Shader相同但材质球不是同一个实例。层级顺序中间插入了其他不同材质的UI元素。修改了CanvasRenderer的material属性而不是propertyBlock。确保所有RoundedRectangle实例都引用同一个材质球实例。复杂度与半径限制SDF计算本身非常高效。但要注意如果圆角半径radius设置得非常大接近或超过矩形短边的一半Shader中max(q - b r, 0.0)这部分计算可能会产生一些不必要的分支尽管现代GPU处理得很好。从美术规范上限制最大圆角半径也是一个好习惯。针对移动平台优化精度在片元着色器中对于中低端设备可以考虑将部分float运算降为half特别是颜色计算。抗锯齿如果目标平台不支持fwidth如部分OpenGL ES 2.0可以回退到使用一个固定的、较小的平滑值如0.5并通过#ifdef进行平台差异化编译。Instancing支持确保目标图形API支持GPU Instancing现代OpenGL ES 3.0 Metal Vulkan等基本都支持。6. 常见问题与排查技巧实录在实际项目中使用这个组件你可能会遇到以下问题。这里是我踩过坑后总结的排查清单。问题现象可能原因解决方案圆角不显示显示为直角矩形1. Shader编译错误。2.Radius值设置为0。3.RectSize数据未正确传递到Shader。1. 检查Console窗口是否有Shader编译错误粉色警告。2. 检查Inspector中Radius值是否大于0。3. 在Frame Debugger中查看该UI元素的材质属性检查_RectSize值是否正确。可能是OnRectTransformDimensionsChange未被触发尝试手动调用SetMaterialDirty()。圆角边缘有锯齿1. 抗锯齿计算未生效。2. Canvas的Reference Resolution与屏幕分辨率差异过大导致UI缩放后边缘计算不精确。1. 确保Shader中使用了fwidth或替代方案进行平滑处理。检查fwidth是否被目标平台支持。2. 尝试调整Canvas Scaler的设置或确保RectSize传递的是像素尺寸而非归一化尺寸。在Shader中确保用于抗锯齿的fw值与像素大小匹配。可以尝试稍微增加fw的乘数。描边显示异常错位、断开1. 描边计算逻辑有误特别是outerDist和innerDist。2.Stroke Width值过大超过了圆角半径。1. 仔细检查Shader中描边部分的smoothstep参数。确保outerDist和innerDist的计算基于同一个距离d。可以先用一个纯色测试描边屏蔽填充色。2. 逻辑上描边宽度不应超过圆角半径的两倍否则角上的描边会相交。在C#端可以加入限制strokeWidth Mathf.Min(strokeWidth, radius * 2 - 1)。UI元素点击区域不正确UI系统的点击检测基于OnPopulateMesh生成的网格形状而我们生成的是全屏Quad。MaskableGraphic默认的射线检测就是基于矩形区域的这通常符合预期。如果你需要点击区域精确匹配圆角形状即点击圆角外部直角区域无响应则需要重写IsRaycastLocationValid方法在该方法中执行与Shader类似的SDF计算如果点位于形状外部则返回false。注意这会增加CPU开销。多个圆角UI合批失败1. 使用了不同的材质实例。2. 有其他不同材质的UI元素穿插在它们之间。3. 个别UI元素单独设置了material属性。1. 确保所有RoundedRectangle都引用同一个材质球UIRoundedRectangleMat。2. 在Hierarchy中调整顺序让使用相同材质的UI元素连续排列。3. 只使用propertyBlock来设置个性化属性不要直接给canvasRenderer.material赋值。在滚动视图或Mask内显示异常Mask组件依赖于Stencil缓冲。我们的Shader可能没有正确配置Stencil状态。我们的Shader模板中已经包含了标准的UI Stencil配置块Stencil{...}这通常能保证与Mask正常工作。如果出现问题检查父级Mask对象的设置并确保Shader中的Stencil Comp等参数与UI默认Shader一致通常是Equal 8。独家避坑技巧调试Shader在开发阶段可以临时修改Shader的frag函数将中间变量如距离d、局部坐标localPos等可视化输出为颜色。例如return float4(d, d, d, 1.0);可以查看距离场分布这对于排查计算错误非常有效。Frame Debugger是你的朋友Unity的Frame Debugger可以清晰地看到每个Draw Call、使用的Shader和传递的参数。当效果不对或合批失败时第一时间打开它检查你的RoundedRectangle是否使用了正确的Shader和PropertyBlock。属性变化监听优化如果你的UI属性在运行时频繁变化例如做动画频繁调用SetMaterialDirty()和UpdateMaterialPropertyBlock可能会造成开销。可以考虑在LateUpdate中集中处理或者使用脏标记模式只在真正需要更新时才调用。这个自研的Unity UI圆角方案从原理到实现从基础到进阶已经形成了一个完整的闭环。它解决了原生UI系统缺失圆角能力的痛点以极低的学习和集成成本带来了巨大的视觉提升和足够的性能表现。下次当设计稿上再出现圆角时你可以自信地告诉团队“这个功能5分钟搞定。”
Unity UI圆角渲染终极方案：基于SDF与GPU Instancing的高性能实现
发布时间：2026/7/21 21:09:33
1. 项目概述为什么UI圆角值得你花5分钟在Unity里做UI你是不是也遇到过这样的场景产品经理指着设计稿说“这里要圆角那里也要圆角”美术同学丢过来一张全是圆角矩形的设计图而你看着Unity自带的Image组件只能默默叹气然后要么去切九宫格图要么就硬着头皮用多个半圆和矩形去拼拼出来的效果锯齿明显性能开销还不小一旦UI尺寸需要动态调整整个拼装结构就可能崩掉。这就是为什么“Unity UI圆角”会成为一个高频的搜索词和开发痛点。它看似是一个简单的视觉效果但Unity的UGUI和最新的UI Toolkit都没有提供原生的、高性能的圆角渲染支持。一个专业的、自适应的圆角UI是提升应用质感最直接、成本最低的方式。它能让你的界面瞬间摆脱“程序员审美”的刻板印象向用户传递出精致、现代、友好的产品气质。网上有很多方案比如用Shader、用Mesh生成、用Mask组合但要么实现复杂要么性能堪忧要么无法完美适配各种情况比如描边、渐变、点击反馈。今天我要分享的是一个我经过多个项目实战打磨总结出的“终极”方案。它不依赖任何第三方插件核心代码不到200行你可以在5分钟内集成到现有项目中并且获得以下特性完美圆角无锯齿支持任意圆角半径。高性能基于Command Buffer和GPU Instancing一个Draw Call可绘制大量圆角UI。全功能支持颜色、渐变、描边、内外阴影可选扩展并且能完美响应RectTransform的尺寸变化。易用性提供一个RoundedRectangle组件像使用普通Image一样使用它通过参数面板轻松调整所有视觉效果。这个方案的核心思想是用Shader在GPU上直接计算并绘制圆角矩形。我们将彻底告别拼UI和切图的原始方式。下面我就从原理到实现带你一步步拆解这个“5分钟专业级UI美化”方案。2. 核心原理GPU是如何“画”出圆角的在深入代码之前我们必须先搞清楚目标。我们不是要做一个“看起来像”圆角的东西而是要一个真正的、由像素精确构成的圆角矩形。其几何定义非常明确一个矩形四个角是四分之一圆弧。2.1 符号距离场定义形状的数学魔法如何在Shader中定义一个圆角矩形最优雅高效的方法是使用符号距离场。SDF是一个函数对于平面上的任意一点p它返回该点到目标形状边界的最短距离。并且约定点在形状内部时距离为负外部时为正恰好在边界上则为零。对于一个中心在原点、宽为w、高为h、圆角半径为r的矩形其SDF函数可以这样构建先考虑一个无限大的圆角矩形即四个角是圆的但边是无限长的。我们可以通过计算点p到中心矩形的“膨胀”距离来得到。具体做法是先取点p的绝对值q abs(p)得到第一象限的点。然后计算这个点q到一个更小的矩形(w/2 - r, h/2 - r)的距离。这个更小的矩形是原矩形向内收缩了半径r后的“核心矩形”。点q到“核心矩形”的距离d实际上就是点p到无限大圆角矩形边界的距离。如果d r说明该点位于四个圆角区域内如果d r则位于四条直边区域内。最后完整的SDF公式为sdf length(max(q - (size - r), 0.0)) - r。其中size (w/2, h/2)。这个公式巧妙地统一处理了圆角和直边区域的计算。在Shader中我们只需要几行代码就能实现这个函数float sdRoundedBox(float2 p, float2 b, float r) { float2 q abs(p); float2 d max(q - b r, 0.0); return length(d) - r; }这个函数就是所有魔法的基础。给定一个点p、矩形半宽高b和圆角半径r它就能告诉我们这个点离圆角矩形边界有多远。2.2 从距离到场着色与抗锯齿有了距离信息着色就变得非常简单。填充颜色如果sdf 0点在形状内部我们输出填充色如果sdf 0则在外部通常输出透明。描边描边本质上是一个距离范围。例如要画一个宽度为strokeWidth的描边我们只需要判断abs(sdf) strokeWidth / 2的区域并为其着色即可。平滑抗锯齿这是SDF方案相比传统像素拼贴最大的优势之一。由于我们有了精确的、连续的距离值可以在边界附近进行平滑插值。通常我们定义一个小的平滑范围fwidth与屏幕像素导数相关然后使用smoothstep函数让颜色在-fwidth到fwidth的区间内从完全填充过渡到完全透明。这样渲染出的边缘在任何分辨率下都光滑无比没有锯齿。注意fwidth函数在片元着色器中用于估算当前像素在屏幕空间中的变化率它是实现高质量、分辨率无关的抗锯齿的关键。但要注意它在某些平台如OpenGL ES 2.0上可能不支持这时我们可以使用一个固定的小值如0.5来近似虽然效果稍逊但依然可用。理解了这些我们就知道整个方案的技术栈就清晰了C#脚本负责管理UI的变换数据位置、尺寸、圆角半径、颜色等并将这些数据打包传递给一个自定义Shader。该Shader利用SDF函数在GPU上为每个像素计算其到圆角矩形的距离并根据距离值决定最终输出的颜色实现填充、描边和抗锯齿。3. 方案设计与组件拆解有了理论支撑我们来设计具体的实现方案。我们的目标是创建一个易于使用的MonoBehaviour组件——RoundedRectangle。3.1 组件架构与数据流整个组件的运行遵循以下数据流用户输入开发者在Inspector面板上设置Color、Radius、Stroke Width、Stroke Color等属性。数据准备RoundedRectangle组件在OnRectTransformDimensionsChange当UI尺寸变化时和OnValidate当Inspector属性变化时等回调中收集当前RectTransform的最终尺寸rect.width,rect.height和用户设置的属性。材质属性块为了高效批处理GPU Instancing我们不直接修改材质而是使用MaterialPropertyBlock。我们将尺寸、半径、颜色等数据打包成一个Vector4数组或其他结构通过materialPropertyBlock.SetVectorArray传递给Shader。渲染命令在CanvasRenderer或Graphics的绘制流程中使用我们自定义的Shader和设置好属性的MaterialPropertyBlock来绘制一个简单的矩形Mesh或使用UI系统的默认几何体。实际上由于我们用的是SDFGPU画的是一个覆盖整个RectTransform范围的矩形但最终只有SDF计算出的圆角矩形区域会显示出来。GPU计算Shader接收顶点数据包含UV我们将用它传递局部坐标和C#传来的属性数据。在片元着色器中将UV映射到局部坐标空间调用sdRoundedBox函数计算SDF然后根据SDF值进行着色、描边和抗锯齿计算输出最终颜色。3.2 关键类与接口设计RoundedRectangle.cs核心组件。继承自MaskableGraphicUGUI或VisualElementUI Toolkit的对应基类以集成到UI系统的裁剪、点击检测等流程中。这里以UGUI为例更常见。属性float radiusColor fillColorfloat strokeWidthColor strokeColorbool useGradient等。核心方法protected override void OnPopulateMesh(VertexHelper vh)或使用MaterialPropertyBlock的方式更新材质属性。现代更推荐使用MaterialPropertyBlock来避免材质实例化污染。监听RectTransform的尺寸变化动态更新传递给Shader的尺寸数据。RoundedRectangle.shader核心着色器。Properties块定义一些默认属性但大部分动态属性由C#脚本传递。CGINCLUDE/HLSLINCLUDE包含sdRoundedBox等工具函数。顶点着色器将模型空间顶点变换到裁剪空间并计算局部坐标或从UV派生传递给片元着色器。片元着色器接收局部坐标和属性参数计算SDF进行着色和混合。材质与资源管理创建一个使用上述Shader的材质球作为RoundedRectangle组件的默认材质。可以通过[RequireComponent(typeof(CanvasRenderer))]确保必要的组件存在。3.3 性能考量批处理与Draw CallUI性能的核心指标之一是Draw Call数量。我们的方案必须支持合批。静态合批如果多个RoundedRectangle使用相同的材质Shader并且它们的材质属性没有在运行时被MaterialPropertyBlock差异化设置或者设置的属性值相同那么它们就有可能被静态合批。但UI系统动态变化频繁静态合批不现实。GPU Instancing这是我们的救星。我们需要在Shader中启用GPU Instancing并将每个UI实例的独有数据如尺寸、位置偏移、颜色、半径通过Per-instance数据如UNITY_INSTANCING_BUFFER_START传递。这样多个外观不同但Shader相同的圆角矩形可以在一个Draw Call内绘制极大提升性能。实操心得将所有每实例数据位置、尺寸、颜色、半径等打包成尽可能少的float4变量。例如可以将(width, height, radius, strokeWidth)打包成一个float4将fillColorRGBA打包成另一个float4。减少Per-instance数据的大小有助于提升Instancing效率。4. 完整实现步骤与代码解析理论说再多不如一行代码。我们直接进入实战环节。4.1 第一步编写核心Shader创建一个新的Shader文件命名为UI-RoundedRectangle.shader。我们使用Unity的UI/Default着色器作为模板进行修改以保持与UI系统默认的混合模式、测试模式一致。Shader UI/RoundedRectangle { Properties { [PerRendererData] _MainTex (Sprite Texture, 2D) white {} _Color (Tint, Color) (1,1,1,1) _Radius (Radius, Float) 10.0 _StrokeWidth (Stroke Width, Float) 0.0 _StrokeColor (Stroke Color, Color) (0,0,0,1) _RectSize (Rect Size (Width/Height), Vector) (100, 100, 0, 0) _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 { QueueTransparent IgnoreProjectorTrue RenderTypeTransparent PreviewTypePlane CanUseSpriteAtlasTrue } 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 3.0 #pragma multi_compile_instancing // 启用GPU Instancing #pragma multi_compile __ UNITY_UI_ALPHACLIP #include UnityCG.cginc #include UnityUI.cginc 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 }; sampler2D _MainTex; fixed4 _Color; float4 _MainTex_ST; // 使用Instancing缓冲池传递每实例数据 UNITY_INSTANCING_BUFFER_START(Props) UNITY_DEFINE_INSTANCED_PROP(float, _Radius) UNITY_DEFINE_INSTANCED_PROP(float, _StrokeWidth) UNITY_DEFINE_INSTANCED_PROP(float4, _StrokeColor) UNITY_DEFINE_INSTANCED_PROP(float2, _RectSize) UNITY_INSTANCING_BUFFER_END(Props) // SDF函数 float sdRoundedBox(float2 p, float2 b, float r) { float2 q abs(p); float2 d max(q - b r, 0.0); return length(d) - r; } v2f vert(appdata_t v) { v2f o; UNITY_SETUP_INSTANCE_ID(v); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o); o.worldPosition v.vertex; o.vertex UnityObjectToClipPos(o.worldPosition); o.texcoord TRANSFORM_TEX(v.texcoord, _MainTex); o.color v.color * _Color; return o; } fixed4 frag(v2f i) : SV_Target { // 从UV计算局部坐标范围从(-0.5, -0.5)到(0.5, 0.5) float2 localPos i.texcoord - 0.5; // 缩放局部坐标以匹配实际矩形尺寸 float2 rectHalfSize UNITY_ACCESS_INSTANCED_PROP(Props, _RectSize) * 0.5; localPos * (rectHalfSize * 2.0); // 等价于 localPos.x * _RectSize.x, localPos.y * _RectSize.y float radius UNITY_ACCESS_INSTANCED_PROP(Props, _Radius); float strokeWidth UNITY_ACCESS_INSTANCED_PROP(Props, _StrokeWidth); float4 strokeColor UNITY_ACCESS_INSTANCED_PROP(Props, _StrokeColor); // 计算SDF距离 float d sdRoundedBox(localPos, rectHalfSize, radius); // 初始化颜色和透明度 half4 color i.color; half alpha color.a; // 描边计算 half strokeAlpha 0.0; if (strokeWidth 0.0) { // 计算到描边内外边界的距离 float halfStroke strokeWidth * 0.5; float outerDist abs(d) - halfStroke; float innerDist abs(d) halfStroke; // 平滑过渡描边区域 strokeAlpha 1.0 - smoothstep(0.0, 1.0, outerDist); // 在描边内部填充色需要被裁剪 alpha * smoothstep(0.0, 1.0, innerDist); } else { // 无描边时直接根据内部距离决定填充透明度 alpha * 1.0 - smoothstep(0.0, 1.0, d); } // 抗锯齿平滑处理核心边界 float fw fwidth(d); alpha * 1.0 - smoothstep(-fw, fw, d); // 混合填充色和描边色 color.rgb lerp(color.rgb, strokeColor.rgb, strokeAlpha * strokeColor.a); color.a alpha; #ifdef UNITY_UI_ALPHACLIP clip(color.a - 0.001); #endif return color; } ENDCG } } }代码解析与注意事项[PerRendererData] _MainTex这个标签很重要它告诉Unity这个属性可能会被每个渲染器单独设置是支持MaterialPropertyBlock和合批的常见写法。虽然我们可能不用纹理但保留它以兼容UI系统。UNITY_INSTANCING_BUFFER_START(Props)这是GPU Instancing的数据块。我们将每个UI实例独有的_Radius、_StrokeWidth、_StrokeColor、_RectSize放在这里。注意_RectSize是完整宽高我们在片元着色器中会取其一半。sdRoundedBox函数就是前面讲的SDF核心。顶点着色器vert非常标准将顶点和UV传递下去。关键点在于我们通过i.texcoordUV坐标范围0~1来推导局部坐标。我们把UV中心点从(0.5,0.5)平移到(0,0)然后根据实际矩形尺寸进行缩放得到正确的局部坐标localPos。片元着色器frag计算localPos和rectHalfSize。调用sdRoundedBox得到有符号距离d。描边逻辑如果设置了描边宽度strokeWidth我们计算两个距离outerDist和innerDist。outerDist小于0的点在描边外部边界之内innerDist小于0的点在描边内部边界之内即填充区域应被裁剪掉。利用smoothstep实现平滑过渡。抗锯齿利用fwidth(d)获取距离场在屏幕空间的变化率在边界附近-fw到fw进行Alpha值的平滑插值这是消除锯齿的关键。颜色混合最后用lerp函数根据描边的透明度strokeAlpha将填充色和描边色混合。UNITY_UI_ALPHACLIP这是一个UI Shader常用的宏用于Alpha裁剪性能较好但边缘较硬。在我们的SDF方案中依靠Alpha平滑过渡已经能获得完美边缘通常可以不用它。4.2 第二步编写C#驱动组件接下来创建RoundedRectangle.cs脚本。using UnityEngine; using UnityEngine.UI; [RequireComponent(typeof(CanvasRenderer))] [AddComponentMenu(UI/Rounded Rectangle, 10)] public class RoundedRectangle : MaskableGraphic { [SerializeField, Range(0, 500)] private float m_Radius 10.0f; [SerializeField] private float m_StrokeWidth 0.0f; [SerializeField] private Color m_StrokeColor Color.black; public float radius { get m_Radius; set { if (Mathf.Approximately(m_Radius, value)) return; m_Radius Mathf.Max(0, value); SetMaterialDirty(); // 标记材质需要更新 } } public float strokeWidth { get m_StrokeWidth; set { if (Mathf.Approximately(m_StrokeWidth, value)) return; m_StrokeWidth Mathf.Max(0, value); SetMaterialDirty(); } } public Color strokeColor { get m_StrokeColor; set { if (m_StrokeColor.Equals(value)) return; m_StrokeColor value; SetMaterialDirty(); } } // 用于MaterialPropertyBlock的属性ID提升查询效率 private static readonly int RadiusPropertyID Shader.PropertyToID(_Radius); private static readonly int StrokeWidthPropertyID Shader.PropertyToID(_StrokeWidth); private static readonly int StrokeColorPropertyID Shader.PropertyToID(_StrokeColor); private static readonly int RectSizePropertyID Shader.PropertyToID(_RectSize); private MaterialPropertyBlock m_PropertyBlock; protected override void OnEnable() { base.OnEnable(); // 禁用默认的Mesh生成因为我们用Shader直接画满整个矩形区域 useLegacyMeshGeneration false; if (m_PropertyBlock null) m_PropertyBlock new MaterialPropertyBlock(); UpdateMaterialPropertyBlock(); } protected override void OnRectTransformDimensionsChange() { base.OnRectTransformDimensionsChange(); // 当UI尺寸变化时更新传递给Shader的尺寸数据 UpdateMaterialPropertyBlock(); } protected override void OnDidApplyAnimationProperties() { base.OnDidApplyAnimationProperties(); // 如果属性被动画系统修改也需要更新 UpdateMaterialPropertyBlock(); } #if UNITY_EDITOR protected override void OnValidate() { base.OnValidate(); // 在编辑器里修改属性时立即更新显示 if (IsActive()) UpdateMaterialPropertyBlock(); } #endif /// summary /// 更新MaterialPropertyBlock将属性传递给Shader。 /// 这是支持GPU Instancing合批的关键。 /// /summary private void UpdateMaterialPropertyBlock() { if (!IsActive() || canvasRenderer null) return; canvasRenderer.GetPropertyBlock(m_PropertyBlock); if (m_PropertyBlock null) m_PropertyBlock new MaterialPropertyBlock(); Rect r rectTransform.rect; Vector2 rectSize new Vector2(r.width, r.height); m_PropertyBlock.SetFloat(RadiusPropertyID, m_Radius); m_PropertyBlock.SetFloat(StrokeWidthPropertyID, m_StrokeWidth); m_PropertyBlock.SetColor(StrokeColorPropertyID, m_StrokeColor); m_PropertyBlock.SetVector(RectSizePropertyID, rectSize); canvasRenderer.SetPropertyBlock(m_PropertyBlock); } /// summary /// 重写此方法以生成一个最简单的全屏Quad。 /// 因为我们的形状完全由Shader定义所以只需要一个覆盖整个RectTransform的矩形即可。 /// /summary protected override void OnPopulateMesh(VertexHelper vh) { Rect r rectTransform.rect; vh.Clear(); // 添加四个顶点左下 右下 右上 左上 Vector2 corner1 new Vector2(r.x, r.y); Vector2 corner2 new Vector2(r.x r.width, r.y); Vector2 corner3 new Vector2(r.x r.width, r.y r.height); Vector2 corner4 new Vector2(r.x, r.y r.height); // 使用默认UV (0,0)到(1,1)Shader会利用这个UV计算局部坐标 vh.AddVert(corner1, color, new Vector2(0f, 0f)); vh.AddVert(corner2, color, new Vector2(1f, 0f)); vh.AddVert(corner3, color, new Vector2(1f, 1f)); vh.AddVert(corner4, color, new Vector2(0f, 1f)); // 添加两个三角形0,1,2 和 0,2,3 vh.AddTriangle(0, 1, 2); vh.AddTriangle(0, 2, 3); } // 提供一个设置所有属性的便捷方法 public void SetProperties(float newRadius, float newStrokeWidth, Color newStrokeColor, Color newColor) { radius newRadius; strokeWidth newStrokeWidth; strokeColor newStrokeColor; this.color newColor; // 继承自Graphic的color属性即填充色 // SetMaterialDirty会在属性setter中调用 } }关键实现解析继承MaskableGraphic这让我们自动获得了UI系统的基础功能颜色color属性、射线检测Raycast Target、以及被Mask组件裁剪的能力。禁用传统网格生成useLegacyMeshGeneration false;这行代码很重要。UI系统默认会为Graphic生成一个网格。我们重写了OnPopulateMesh来生成一个简单的全屏Quad这比系统默认的可能更高效也更符合我们的需求整个区域由Shader处理。MaterialPropertyBlock的使用这是实现高性能、支持合批的核心。我们不在每个RoundedRectangle上单独创建和修改材质实例而是通过MaterialPropertyBlock为每个渲染器设置独立的属性。CanvasRenderer.SetPropertyBlock方法允许我们为每个使用相同材质的UI元素设置不同的属性值同时GPU Instancing可以将它们合并绘制。属性ID缓存Shader.PropertyToID将属性名称字符串转换为整数ID。在频繁调用的UpdateMaterialPropertyBlock中使用整数ID比传递字符串效率高得多。更新时机我们在OnRectTransformDimensionsChange尺寸变化、OnValidate编辑器属性修改和属性setter中调用UpdateMaterialPropertyBlock确保任何改变都能实时反映到渲染上。OnPopulateMesh我们生成一个覆盖整个矩形区域的简单四边形两个三角形UV从(0,0)到(1,1)。Shader正是利用这个UV来重建每个片元在矩形内的局部位置。4.3 第三步在Unity中配置与使用创建材质在Project窗口右键 - Create - Material。将Shader选择为我们刚创建的UI/RoundedRectangle。将这个材质命名为UIRoundedRectangleMat。创建UI元素在Hierarchy中创建任意UI对象如Panel、Button下的Image等。添加组件移除默认的Image组件添加我们编写的RoundedRectangle组件。指定材质在RoundedRectangle组件的Material字段中拖入刚刚创建的UIRoundedRectangleMat。调整参数现在你可以在Inspector中实时调整Radius圆角半径、Color填充色、Stroke Width描边宽度、Stroke Color描边色了。改变RectTransform的尺寸圆角效果也会自适应。至此一个基础但功能完整的专业级圆角UI组件就完成了。从Shader原理到C#驱动再到实际配置整个过程如果熟练确实可以在5分钟内搭建起来。5. 高级功能扩展与性能优化基础功能实现了但一个“终极”方案还需要应对更复杂的需求和极致的性能。下面分享几个进阶技巧。5.1 添加渐变填充渐变是提升UI质感的重要手段。我们可以在Shader中增加对线性渐变从上到下从左到右甚至径向渐变的支持。修改Shader在Properties块和Instancing Buffer中添加渐变相关属性如_GradientColor另一端的颜色和_GradientDirection一个float0表示垂直1表示水平。在片元着色器中根据localPos的y值或x值在_Color和_GradientColor之间进行线性插值lerp用插值结果作为填充色。// 在Props缓冲区内添加 UNITY_DEFINE_INSTANCED_PROP(float4, _GradientColor) UNITY_DEFINE_INSTANCED_PROP(float, _GradientDirection) // 在frag函数中计算基础填充色时 float4 fillColor i.color; if (_UseGradient 0.5) { float t lerp(localPos.y / _RectSize.y, localPos.x / _RectSize.x, _GradientDirection); t t * 0.5 0.5; // 从(-0.5~0.5)映射到(0~1) fillColor.rgb lerp(fillColor.rgb, UNITY_ACCESS_INSTANCED_PROP(Props, _GradientColor).rgb, t); }C#脚本相应地增加bool useGradient、Color gradientColor等属性并在UpdateMaterialPropertyBlock中传递这些值。5.2 实现内阴影与外阴影阴影能增加UI的层次感。外阴影相对简单可以在绘制完圆角矩形后用相同的SDF但扩大一定范围并施加一个模糊和颜色偏移来模拟。但更高效、更物理的方法是使用距离场阴影。距离场阴影原理对于每个像素我们不仅计算它到当前圆角矩形的距离d还可以计算它到“阴影投射体”的距离。一个简单的软阴影近似公式是shadow clamp(d / (strokeWidth * softness), 0.0, 1.0);其中softness控制阴影柔和度。然后将shadow因子乘到最终颜色的Alpha值上或者与一个阴影颜色混合。这种方法性能开销极小因为只是在SDF计算基础上多做一次除法运算。你可以添加_ShadowColor、_ShadowOffset、_ShadowSoftness等属性来实现。实操心得内阴影的实现思路类似但计算的是到“收缩后的矩形”的距离。一个技巧是将localPos反向偏移阴影偏移量然后计算SDF最后用1.0 - smoothstep(...)来得到内部阴影区域。内阴影通常不需要太柔和softness可以设小一点。5.3 性能优化终极指南减少Overdraw确保RoundedRectangle的RectTransform尺寸不要无故过大超出显示范围的部分也会被Shader计算浪费性能。合理使用Canvas的裁剪和Mask组件。慎用Raycast Target如果UI不需要响应点击事件务必取消勾选Raycast Target。这能显著减少事件系统的性能开销尤其是在复杂UI界面中。批处理破坏者MaterialPropertyBlock是支持合批的但以下情况会破坏批处理使用了不同的材质球即使Shader相同但材质球不是同一个实例。层级顺序中间插入了其他不同材质的UI元素。修改了CanvasRenderer的material属性而不是propertyBlock。确保所有RoundedRectangle实例都引用同一个材质球实例。复杂度与半径限制SDF计算本身非常高效。但要注意如果圆角半径radius设置得非常大接近或超过矩形短边的一半Shader中max(q - b r, 0.0)这部分计算可能会产生一些不必要的分支尽管现代GPU处理得很好。从美术规范上限制最大圆角半径也是一个好习惯。针对移动平台优化精度在片元着色器中对于中低端设备可以考虑将部分float运算降为half特别是颜色计算。抗锯齿如果目标平台不支持fwidth如部分OpenGL ES 2.0可以回退到使用一个固定的、较小的平滑值如0.5并通过#ifdef进行平台差异化编译。Instancing支持确保目标图形API支持GPU Instancing现代OpenGL ES 3.0 Metal Vulkan等基本都支持。6. 常见问题与排查技巧实录在实际项目中使用这个组件你可能会遇到以下问题。这里是我踩过坑后总结的排查清单。问题现象可能原因解决方案圆角不显示显示为直角矩形1. Shader编译错误。2.Radius值设置为0。3.RectSize数据未正确传递到Shader。1. 检查Console窗口是否有Shader编译错误粉色警告。2. 检查Inspector中Radius值是否大于0。3. 在Frame Debugger中查看该UI元素的材质属性检查_RectSize值是否正确。可能是OnRectTransformDimensionsChange未被触发尝试手动调用SetMaterialDirty()。圆角边缘有锯齿1. 抗锯齿计算未生效。2. Canvas的Reference Resolution与屏幕分辨率差异过大导致UI缩放后边缘计算不精确。1. 确保Shader中使用了fwidth或替代方案进行平滑处理。检查fwidth是否被目标平台支持。2. 尝试调整Canvas Scaler的设置或确保RectSize传递的是像素尺寸而非归一化尺寸。在Shader中确保用于抗锯齿的fw值与像素大小匹配。可以尝试稍微增加fw的乘数。描边显示异常错位、断开1. 描边计算逻辑有误特别是outerDist和innerDist。2.Stroke Width值过大超过了圆角半径。1. 仔细检查Shader中描边部分的smoothstep参数。确保outerDist和innerDist的计算基于同一个距离d。可以先用一个纯色测试描边屏蔽填充色。2. 逻辑上描边宽度不应超过圆角半径的两倍否则角上的描边会相交。在C#端可以加入限制strokeWidth Mathf.Min(strokeWidth, radius * 2 - 1)。UI元素点击区域不正确UI系统的点击检测基于OnPopulateMesh生成的网格形状而我们生成的是全屏Quad。MaskableGraphic默认的射线检测就是基于矩形区域的这通常符合预期。如果你需要点击区域精确匹配圆角形状即点击圆角外部直角区域无响应则需要重写IsRaycastLocationValid方法在该方法中执行与Shader类似的SDF计算如果点位于形状外部则返回false。注意这会增加CPU开销。多个圆角UI合批失败1. 使用了不同的材质实例。2. 有其他不同材质的UI元素穿插在它们之间。3. 个别UI元素单独设置了material属性。1. 确保所有RoundedRectangle都引用同一个材质球UIRoundedRectangleMat。2. 在Hierarchy中调整顺序让使用相同材质的UI元素连续排列。3. 只使用propertyBlock来设置个性化属性不要直接给canvasRenderer.material赋值。在滚动视图或Mask内显示异常Mask组件依赖于Stencil缓冲。我们的Shader可能没有正确配置Stencil状态。我们的Shader模板中已经包含了标准的UI Stencil配置块Stencil{...}这通常能保证与Mask正常工作。如果出现问题检查父级Mask对象的设置并确保Shader中的Stencil Comp等参数与UI默认Shader一致通常是Equal 8。独家避坑技巧调试Shader在开发阶段可以临时修改Shader的frag函数将中间变量如距离d、局部坐标localPos等可视化输出为颜色。例如return float4(d, d, d, 1.0);可以查看距离场分布这对于排查计算错误非常有效。Frame Debugger是你的朋友Unity的Frame Debugger可以清晰地看到每个Draw Call、使用的Shader和传递的参数。当效果不对或合批失败时第一时间打开它检查你的RoundedRectangle是否使用了正确的Shader和PropertyBlock。属性变化监听优化如果你的UI属性在运行时频繁变化例如做动画频繁调用SetMaterialDirty()和UpdateMaterialPropertyBlock可能会造成开销。可以考虑在LateUpdate中集中处理或者使用脏标记模式只在真正需要更新时才调用。这个自研的Unity UI圆角方案从原理到实现从基础到进阶已经形成了一个完整的闭环。它解决了原生UI系统缺失圆角能力的痛点以极低的学习和集成成本带来了巨大的视觉提升和足够的性能表现。下次当设计稿上再出现圆角时你可以自信地告诉团队“这个功能5分钟搞定。”
