1. 项目概述为什么我们需要一个专门的圆角矩形节点在ShaderGraph的世界里绘制一个矩形是基础中的基础但当你想要一个带圆角的矩形时事情就变得微妙起来。很多刚接触Shader开发的朋友可能会想我直接用SDF有向距离场公式手写一个不就行了确实一个基础的圆角矩形SDF公式并不复杂。但Unity在ShaderGraph中内置这个Rounded Rectangle Node其意义远不止是提供一个“快捷方式”。它封装了一套经过优化、考虑周全的算法特别是在处理抗锯齿Anti- Aliasing和UV空间变换时能帮你避开无数新手甚至老手都容易踩的坑。这个节点的核心价值在于“标准化”和“可组合性”。它接受明确的宽度Width、**高度Height和圆角半径Radius**参数输出一个在[0,1]范围内的灰度图Alpha遮罩。这意味着你可以像搭积木一样将它与其他节点如Tiling And Offset、Gradient、Color Blend快速组合创造出按钮、头像框、进度条、平滑的光晕遮罩等UI元素或游戏内特效而无需从零开始推导和调试SDF公式。对于需要快速迭代视觉效果的TA技术美术或图形程序员来说这能节省大量时间。2. 节点核心原理与数学拆解要真正用好一个节点不能只停留在“连接输入输出”的层面。理解其内部的数学原理能让你在参数调节、问题排查和效果扩展时游刃有余。2.1 输入参数的空间定义首先我们必须明确节点所有计算都发生在标准的UV空间即[0,1]范围内。这是理解其行为的关键。UV默认是Shader的纹理坐标。节点期望的输入UV范围通常是[0,1]其原点(0,0)对应矩形的左下角。Width 与 Height这两个参数定义的并非像素宽度而是在UV空间中的尺寸比例。例如Width0.5 Height0.3意味着这个圆角矩形在水平方向上占据UV空间的一半宽度在垂直方向上占据30%的高度。它们的值通常应小于1且Width 2*Radius和Height 2*Radius理论上不应超过1否则形状会超出UV边界。Radius同样是在UV空间中定义的圆角半径。它控制着四个角的弯曲程度。这里有一个极易被忽略的关键点在内部代码中半径会被乘以2进行处理Radius * 2。这意味着你输入的Radius参数其视觉效果上接近直径的感知。这是为了数学计算的便利性但我们在调节时需要心中有数。2.2 内部算法逐步解析让我们结合官方文档中给出的那个简洁而强大的函数一步步拆解void Unity_RoundedRectangle_float(float2 UV, float Width, float Height, float Radius, out float Out) { // 步骤1半径的安全限制 Radius max(min(min(abs(Radius * 2), abs(Width)), abs(Height)), 1e-5); // 步骤2坐标变换与边框距离计算 float2 uv abs(UV * 2 - 1) - float2(Width, Height) Radius; // 步骤3计算到边框的符号距离 float d length(max(0, uv)) / Radius; // 步骤4应用抗锯齿平滑 Out saturate((1 - d) / fwidth(d)); }步骤1半径的安全限制这行代码是算法的“安全阀”。它做了三件事abs(Radius * 2)取半径绝对值的两倍。min(min(..., abs(Width)), abs(Height))确保这个值不超过Width和Height的绝对值。这是为了防止圆角半径大于矩形短边的一半导致形状变得不可预测例如变成一个圆形或出现奇怪的交叠。max(..., 1e-5)最后确保半径不小于一个极小的正值1e-5。这是为了避免除零错误因为后续计算中Radius会作为分母。这就是为什么有时候你把Radius调到0依然能看到微小圆角的原因。步骤2坐标变换与边框距离计算float2 uv abs(UV * 2 - 1) - float2(Width, Height) Radius;这是整个算法的精髓它巧妙地将UV空间从[0,1]映射到了以中心为原点的坐标系并计算到矩形内框的距离。UV * 2 - 1将UV从[0,1]映射到[-1, 1]。此时UV空间中心点(0.5, 0.5)变成了新坐标系的原点(0, 0)。abs(...)取绝对值。这个操作非常关键它利用了矩形的对称性。经过这一步我们只需要处理第一象限即x, y都为正的情况因为其他三个象限可以通过对称性得到。此时UV坐标表示的是当前点到中心轴X轴和Y轴的距离。- float2(Width, Height)减去矩形的半宽和半高。想象一下在第一象限矩形的右上角顶点坐标原本应该是(Width, Height)。减去之后如果点(x, y)在矩形内部非圆角区域则uv.x和uv.y至少有一个会变为负数。 Radius加上半径。经过这个操作uv向量现在表示的是从当前点指向矩形直角边框向内收缩了Radius距离后形成的更小矩形的向量。如果这个向量的分量有负值说明该点在“更小矩形”的内部。步骤3计算到边框的符号距离float d length(max(0, uv)) / Radius;max(0, uv)将uv向量的负分量钳制为0。这意味着对于在“更小矩形”内部的点我们只关心其到原点的距离此时uv的某个分量为负被置0length计算的是到坐标轴的距离对于在“更小矩形”外部的点uv的两个分量都为正length计算的就是到“更小矩形”顶点的向量长度。length(...) / Radius将这个距离除以半径进行归一化。当d 1时点在圆角范围内d 1时点在圆角边界上d 1时点在圆角范围外或矩形平坦边上。步骤4应用抗锯齿平滑Out saturate((1 - d) / fwidth(d));这是生成平滑边缘抗锯齿的标准SDF处理技巧。1 - d将距离场反转。现在值越接近1表示越靠近形状内部越接近0表示越外部。fwidth(d)这是一个非常重要的函数它估算当前像素在屏幕空间或纹理空间中d值的变化率近似于偏导数的绝对值之和。简单理解它给出了在边缘区域d值变化的“快慢程度”。(1 - d) / fwidth(d)这个除法操作在边缘处d在1附近会生成一个从大于1到小于0的过渡值。saturate函数将其钳制在[0,1]范围内。最终效果是在边缘处输出值Alpha会在几个像素的宽度内从1平滑过渡到0实现了完美的抗锯齿无论形状放大还是缩小。实操心得很多自写的SDF形状边缘有锯齿就是因为缺少了fwidth这一步抗锯齿处理。Unity的这个节点帮你完美封装了这也是推荐使用内置节点而非手写简单公式的重要原因之一。3. 节点参数详解与实战配置理解了原理我们再来看看每个输入端口应该如何连接和配置以及一些常见的组合技巧。3.1 基础参数配置与视觉关系创建一个Rounded Rectangle节点你会看到四个输入口。最基础的用法是直接赋予常量。UV通常连接UV节点或经过处理的UV。保持默认[0,1]范围即可绘制一个居中的形状。Width/Height控制矩形的核心形状。它们的值相对于UV空间。视觉比例如果你想要一个屏幕空间内保持固定宽高比的矩形比如16:9需要根据屏幕宽高比来动态计算其中一个值。例如在UI场景中你可能需要用一个Aspect Ratio节点来修正。常见误区认为Width1, Height1会填满整个UV空间。这是错误的。因为算法中UV * 2 - 1的变换当Width1时矩形的边缘会刚好触及UV空间的边界左/右或上/下。要填满需要结合Offset。Radius控制圆角大小。它的最大值受限于min(Width, Height)/2。当Radius等于这个最大值时如果Width等于Height你会得到一个完美的圆形如果不等你会得到一个“体育场”形状两端是半圆的胶囊形。一个快速验证的配置将Width设为0.6 Height设为0.4 Radius设为0.1。连接到Unlit Master节点的Color你会看到一个灰色的圆角矩形。将输出连接到Alpha并将表面类型Surface Type改为Transparent你就能看到一个透明的圆角矩形遮罩。3.2 动态控制与节点组合静态参数只是开始动态控制才能发挥Shader的威力。动态圆角将Radius端口连接一个Time节点或Sine Time节点你可以创建圆角周期性脉动的效果非常适合用于科幻UI或能量护盾的指示器。形状变形将Width和Height连接到同一个控制器可以实现等比例缩放。分别控制则可以实现拉伸动画。与Tiling And Offset节点的组合这是官方文档特别强调的一点。如果你想平铺重复多个圆角矩形不能直接将Rounded Rectangle节点的输出连接到Tiling And Offset。正确的做法是将Tiling And Offset节点连接到Rounded Rectangle节点的UV输入口。这样UV坐标本身被平铺和偏移每个UV区间内都会独立生成一个圆角矩形。错误做法UV-Rounded Rectangle-Tiling And Offset- 输出。这会导致整个生成的形状被拉伸平铺边缘会断裂。正确做法UV-Tiling And Offset-Rounded Rectangle- 输出。这样每个平铺格子内都有一个完整的圆角矩形。创建边框利用Step或Smoothstep节点可以轻松创建边框。例如将Rounded Rectangle的输出连接到一个Smoothstep节点的Edge1和Edge2通过调节这两个阈值可以提取出形状的边缘区域然后赋予不同的颜色。[Rounded Rectangle Out] -- [Smoothstep.Edge1] [Smoothstep.Edge2] (设为Edge1 一个小的偏移量如0.05) [Smoothstep.Out] -- [边框颜色]同时用另一个Smoothstep提取内部填充Edge1为0Edge2为略小于1的值两者相加或叠加就得到了一个带边框的圆角矩形。4. 高级应用与效果延伸掌握了基础我们可以探索一些更高级、视觉效果更丰富的应用。4.1 实现渐变与纹理填充圆角矩形节点输出的是一个单通道的遮罩Alpha这使其成为完美的“蒙版”。线性渐变填充创建一个Linear Gradient节点将其Out端口连接到一个Multiply节点的一个输入将Rounded Rectangle的Out连接到Multiply的另一个输入。这样渐变只会在圆角矩形区域内显示。通过旋转Linear Gradient的Rotation角度可以改变渐变方向。径向渐变填充使用Radial Gradient节点代替线性渐变可以创建从中心向四周发散的光晕效果常用于按钮高光。纹理采样填充使用Sample Texture 2D节点采样一张纹理如金属拉丝、布料将其颜色输出与Rounded Rectangle的遮罩输出进行Multiply操作。这样纹理就被精确地裁剪在圆角矩形框内。结合UV的缩放和偏移可以实现纹理在框内的滚动动画。4.2 构建复杂UI元素结合多个图形节点可以构建出游戏中的常见UI。进度条使用两个Rounded Rectangle节点。一个作为背景条灰色较大圆角一个作为前景填充条蓝色相同或稍小圆角。将前景条的Width输入连接到一个Remap节点该节点将你的进度值如0到1映射到合适的宽度范围如从0到背景条的Width值。对前景条应用一个鲜艳的Linear Gradient就能做出动态填充的进度条。头像框将Rounded Rectangle节点作为遮罩与一个Circle节点或另一个Radius更大的Rounded Rectangle进行Subtract相减操作可以挖空中间部分只留下边框。然后在边框上叠加纹理或发光效果。平滑的对话气泡对话气泡通常有一个矩形主体和一个三角形尾巴。你可以用Rounded Rectangle做主体再用一个Polygon节点或自定义SDF绘制三角形最后用Maximum并集或Add节点将两者平滑地融合在一起。调节融合区域的抗锯齿参数是关键。4.3 融入3D物体表面Rounded Rectangle不仅用于UI也可以用于3D物体表面的图案绘制。物体表面贴花将3D物体的世界空间或物体空间坐标通过一系列变换通常包括投影到某个平面、缩放和偏移映射到UV坐标再输入给Rounded Rectangle节点。这样就可以在物体的特定区域如盔甲的胸甲、地板的中心绘制一个圆角矩形徽章或标记。边缘发光Rim Light的遮罩将Rounded Rectangle的遮罩与基于法线和视角计算的边缘光因子相乘可以限制边缘光只出现在特定的圆角矩形区域内创造出一种“能量从面板缝隙中渗出”的科技感效果。5. 常见问题、性能分析与优化技巧在实际项目中使用这个节点你可能会遇到一些典型问题。5.1 常见问题排查表问题现象可能原因解决方案形状不显示或显示不全Width/Height参数过大接近或超过1导致形状超出UV的[0,1]范围。检查Width和Height值确保它们远小于1如0.8以内为UV变换留出空间。使用Fraction节点处理UV。圆角不圆或形状怪异Radius值超过了min(Width, Height)/2被内部算法钳制。减小Radius值确保其小于矩形短边的一半。边缘有锯齿Aliasing在极少数情况下如果UV输入本身有剧烈变化如来自屏幕坐标fwidth计算可能不够精确。或者是在移动设备上没有启用合适的抗锯齿。确保UV输入是平滑连续的。对于屏幕后处理效果可以考虑使用ddx/ddy手动计算更精确的导数。在Unity项目设置中开启MSAA或FXAA。平铺Tiling时形状断裂错误地将节点输出进行平铺而不是将UV输入进行平铺。严格按照“正确做法”将Tiling And Offset节点连接在Rounded Rectangle节点的UV输入之前。在粒子系统或Line Renderer中无效Rounded Rectangle节点设计用于片元着色器阶段且依赖UV。某些渲染器可能不提供标准UV。检查渲染组件是否提供了合适的纹理坐标如TEXCOORD0。可能需要自定义顶点着色器传递UV。性能开销突然增大在循环或非常复杂的节点网络中过度使用该节点或者将其用于全屏幕后处理。该节点本身计算不重但应避免每帧每像素进行多次调用。对于静态UI考虑将结果烘焙到纹理中。对于动态效果评估其必要性。5.2 性能考量与优化建议Rounded Rectangle节点在Shader中属于计算成本较低的一类。它的计算量主要在于几次abs、max、min、length和一次fwidth调用这些都是现代GPU擅长处理的简单算术运算。优化建议一复用计算结果。如果你的Shader中需要多个相同尺寸但不同位置的圆角矩形比如网格布局的按钮可以考虑只计算一次基础形状然后通过变换UV坐标来“移动”这个形状而不是实例化多个节点。优化建议二权衡精度与性能。在移动平台或VR项目中如果对边缘质量要求不是极端苛刻可以尝试用一个更简单的、没有fwidth抗锯齿的版本比如直接用step(0.5, 1-d)来替代但这会带来明显的锯齿。通常不建议这样做因为内置的fwidth开销很小带来的视觉提升却很大。优化建议三降采样处理。对于作为全屏遮罩或大幅面背景的圆角矩形如果性能吃紧可以考虑在较低分辨率下渲染这个遮罩然后上采样upscale利用其本身的平滑特性视觉损失可能很小。5.3 调试技巧当效果不符合预期时可以尝试以下调试方法可视化中间变量创建一个临时的Unlit Shader Graph将Rounded Rectangle节点内部的中间变量如变换后的uv向量、距离d通过Remap节点映射到颜色上输出。这能帮你直观地看到距离场是如何分布的。分离测试将复杂的节点网络拆开先单独测试Rounded Rectangle节点确保其基础功能正常。然后再逐步添加其他节点如Tiling、Gradient每次添加一个观察变化。检查UV流向在Shader Graph中使用Custom Function节点或编写简单的HLSL代码将输入的UV坐标直接作为颜色输出return float4(UV, 0, 1);。这样可以确认传入节点的UV坐标是否是你期望的范围和流向。我个人在大量UI和VFX项目中频繁使用这个节点。它最让我欣赏的一点是可靠性和一致性。无论屏幕分辨率如何变化它生成的抗锯齿边缘总是那么平滑。比起在网上找到的各种SDF代码片段这个经过Unity官方测试和优化的节点在跨平台兼容性和性能上更让人放心。记住图形编程不仅是创造炫酷效果更是关于在性能、质量和开发效率之间找到最佳平衡。Rounded Rectangle节点正是这样一个优秀的平衡点。