【节点】[RoundedRectangle节点]原理解析与实际应用

【Unity Shader Graph 使用与特效实现】专栏-直达

Rounded Rectangle 节点是 Unity URP Shader Graph 中一个功能强大的形状生成工具，专门用于创建具有圆角的矩形形状。该节点基于输入的 UV 坐标系统，通过精确的数学计算生成平滑的圆角矩形图案，为着色器开发提供了丰富的视觉效果可能性。

在图形编程和着色器开发中，圆角矩形是一种常见的设计元素，广泛应用于用户界面、游戏元素、特效制作等领域。与传统的硬边矩形相比，圆角矩形具有更加柔和、现代的外观，能够有效减少视觉上的尖锐感，提升整体的美学体验。

该节点的核心功能是通过输入参数动态控制圆角矩形的大小、比例和圆角程度。宽度（Width） 和 高度（Height） 参数分别控制矩形的横向和纵向尺寸，而半径（Radius） 参数则精确控制每个拐角的圆滑程度。这种参数化的设计使得开发者能够快速创建各种尺寸和风格的圆角矩形，从轻微圆角到近乎圆形的极端情况都能完美处理。

在实际应用场景中，Rounded Rectangle 节点经常与其他节点配合使用以实现更复杂的效果。例如，通过连接 Tiling And Offset 节点，开发者可以轻松地对生成的形状进行偏移或平铺操作，这在创建重复图案或复杂布局时特别有用。需要注意的是，为了保持形状在 UV 空间中的偏移能力，该节点在平铺时不会自动重复形状，这一设计选择确保了形状的完整性和可控性。

对于需要创建重复点状效果的情况，建议先通过 Fraction 节点处理输入，这样可以确保形状在重复时保持正确的间距和排列。这种方法在制作网格背景、点阵图案或其他周期性设计时特别有效。

一个重要的技术限制是，Rounded Rectangle 节点仅可用于片段着色器阶段。这意味着它主要在像素处理阶段发挥作用，用于确定每个像素的最终颜色和外观。理解这一限制对于正确使用该节点至关重要，特别是在构建复杂着色器时需要考虑节点的适用阶段。

该节点的输出是一个浮点值，通常表示在给定 UV 坐标处形状的"存在程度"。值为 1 表示完全在形状内部，值为 0 表示完全在形状外部，中间值则表示在边缘过渡区域。这种连续的输出特性使得圆角矩形能够与其他效果平滑融合，创造出自然的过渡和混合效果。

技术实现原理

Rounded Rectangle 节点的实现基于符号距离函数（SDF）的概念，这是一种在计算机图形学中广泛使用的技术。SDF 通过数学函数描述空间中每个点到形状边界的距离，正表示在形状外部，负表示在形状内部，零表示正好在边界上。

节点的核心算法可以分为几个关键步骤：

半径限制处理：首先对输入的半径值进行约束，确保其不会超过矩形宽度或高度的一半，防止出现不合理的形状
坐标变换：将输入的 UV 坐标从 $0,1$ 范围转换到 $-1,1$ 范围，并进行适当的缩放以适应指定的宽度和高度
距离计算：通过向量运算计算每个点到矩形边界的距离，考虑圆角的影响
边缘抗锯齿：使用 fwidth 函数实现自动的边缘抗锯齿，确保形状在不同分辨率下都能保持平滑的外观

这种实现方式不仅效率高，而且产生的形状质量优秀，边缘平滑自然，非常适合实时图形应用。

端口详细说明

输入端口

UV：Vector 2 类型，绑定到 UV 语义。这是节点的核心输入，决定了形状生成的位置和方式。UV 坐标系统是着色器中用于纹理映射和空间定位的基础，通常范围在 $0,1$ 之间。开发者可以通过连接不同的 UV 源来实现各种效果，如使用屏幕空间 UV 创建全屏效果，或使用物体空间 UV 创建基于物体表面的图案。
Width：Float 类型，无特定绑定。控制生成圆角矩形的宽度尺寸。该参数接受任意浮点数值，允许创建从细长条状到宽矩形等各种比例的形状。当宽度值设置为 1.0 时，矩形将横跨整个 UV 空间的水平方向；较小的值会产生较窄的矩形，而较大的值可能会导致形状超出 UV 空间范围。
Height：Float 类型，无特定绑定。控制生成圆角矩形的高度尺寸。与宽度参数类似，高度参数决定了形状在垂直方向上的延伸程度。通过组合不同的宽度和高度值，可以创建正方形、长方形等各种比例的矩形形状。
Radius：Float 类型，无特定绑定。定义圆角矩形的拐角半径，即圆角的弯曲程度。半径值越大，拐角越圆滑；当半径值足够大时（接近宽度或高度的一半），形状会趋近于圆形或胶囊形。该参数支持动态控制，允许在着色器中实现圆角程度的动画效果。

输出端口

Out：Float 类型，无特定绑定。输出一个浮点值，表示在给定 UV 坐标处形状的强度或存在程度。输出值的范围通常在 $0,1$ 之间，其中 1 表示完全在形状内部，0 表示完全在形状外部，中间值表示在平滑过渡的边缘区域。这种连续的输出特性使得节点能够与其他着色器效果自然融合，特别适合用于遮罩、透明度控制和效果混合。

参数配置详解

UV 输入配置

UV 输入端口的正确配置是使用 Rounded Rectangle 节点的关键。根据不同的应用场景，可以选择多种 UV 源：

默认 UV：使用模型自带的纹理坐标，适合在物体表面创建固定图案
屏幕 UV：通过 Screen Position 节点获取，适合创建全屏后处理效果
自定义 UV：通过数学运算生成的 UV，可以实现动画、变形等特殊效果
处理后的 UV：通过 Tiling And Offset、Rotate 等节点处理后的 UV，可以增加平铺、旋转等变换效果

尺寸参数优化

宽度和高度参数的设置需要考虑最终应用场景和性能要求：

比例保持：当需要保持特定宽高比时，建议将宽度和高度参数关联，避免形状失真
性能考虑：过大的尺寸值可能会导致形状超出可视范围，增加不必要的计算负担
动态调整：通过连接 Time 节点或其它动态参数，可以实现形状大小的动画效果

半径参数技巧

半径参数的控制需要特别注意其有效范围和一些特殊效果：

有效范围：半径的实际有效值受宽度和高度的限制，最大不能超过 min(Width, Height)/2
极端情况：当半径设置为 0 时，生成的是标准直角矩形；当半径设置为足够大时，会生成圆形或胶囊形
非均匀半径：通过预处理 UV 或使用多个节点组合，可以实现每个角不同半径的特殊效果
动画应用：半径参数的动态变化可以创建形状变形的动画效果，如从矩形变为圆形

生成的代码示例分析

以下示例代码展示了 Rounded Rectangle 节点的完整实现，通过分析代码可以深入理解其工作原理：

scss 复制代码

void Unity_RoundedRectangle_float(float2 UV, float Width, float Height, float Radius, out float Out)
{
    // 第一步：半径限制处理
    Radius = max(min(min(abs(Radius * 2), abs(Width)), abs(Height)), 1e-5);

    // 第二步：坐标变换和距离计算
    float2 uv = abs(UV * 2 - 1) - float2(Width, Height) + Radius;

    // 第三步：距离场计算
    float d = length(max(0, uv)) / Radius;

    // 第四步：抗锯齿处理
    Out = saturate((1 - d) / fwidth(d));
}

代码步骤详解

半径限制处理：这行代码确保半径值在合理范围内。首先将半径乘以 2（转换为直径），然后取绝对值，接着通过 min 函数确保不超过宽度和高度的绝对值，最后通过 max 函数设置一个极小值（1e-5）作为下限，防止除零错误。这种处理保证了无论输入什么半径值，都能生成有效的形状。
坐标变换 ：UV * 2 - 1 将 UV 坐标从 $0,1$ 范围转换到 $-1,1$ 范围，然后取绝对值使得四个象限对称处理。减去 Width 和 Height 将坐标缩放到指定尺寸，最后加上 Radius 为圆角计算做准备。这个变换是距离场计算的基础。
距离场计算 ：max(0, uv) 确保只考虑正值的部分，这对应于矩形外部的区域。length 函数计算到最近边界的欧几里得距离，然后除以 Radius 进行归一化处理。这个距离值 d 表示当前位置到形状边界的相对距离。
抗锯齿处理 ：这是实现平滑边缘的关键。(1 - d) 将距离转换为形状的强度值，然后除以 fwidth(d) 实现基于屏幕空间导数的自动抗锯齿。fwidth 函数返回在屏幕空间中该值的近似变化率，这样在边缘区域会产生平滑的过渡。最后 saturate 函数确保输出值在 $0,1$ 范围内。

性能优化考虑

该实现考虑了实时渲染的性能需求：

数学运算优化：使用尽可能简单的数学运算，避免复杂的三角函数或指数运算
分支避免：通过 max 和 min 函数替代条件判断，适合 GPU 并行架构
精度平衡：在保证质量的同时使用合理的精度，避免过度计算

实际应用案例

UI 元素渲染

Rounded Rectangle 节点在游戏 UI 渲染中有着广泛的应用：

按钮和面板：创建具有现代感的圆角按钮和背景面板
进度条和滑块：制作平滑的进度指示器和交互控件
图标和标志：生成风格化的图标和标识元素
边框和装饰：为各种 UI 元素添加精美的边框效果

游戏特效制作

在游戏特效领域，该节点可以创建各种视觉效果：

技能范围指示器：显示技能影响区域的圆角矩形指示器
地图元素：生成小地图中的各种区域标记和范围显示
光影效果：配合发光和模糊效果创建柔和的光照区域
碰撞区域可视化：调试和显示游戏中的碰撞体积

材质和表面效果

在材质制作中，Rounded Rectangle 节点可以增强表面细节：

面板和屏幕：模拟电子设备屏幕的圆角外观
瓷砖和地板：创建具有圆角边缘的铺装图案
标识和贴花：在物体表面添加品牌标识或装饰图案
磨损效果：通过组合多个圆角矩形模拟边缘磨损

高级技巧和最佳实践

性能优化建议

合理使用抗锯齿：在不需要高质量边缘的情况下，可以考虑简化抗锯齿计算
避免过度细分：在几何体本身已经足够精细时，不需要通过着色器增加过多细节
预处理静态参数：对于不会变化的形状参数，考虑在材质属性中预设，减少实时计算

创意应用扩展

组合多个形状：通过组合多个 Rounded Rectangle 节点可以创建复杂图案
动态变形：连接时间或噪声节点实现形状的动态变化
三维扩展：通过结合深度信息创建伪三维的圆角矩形效果
特殊材质：配合其他节点创建发光、透明、反射等特殊材质效果

常见问题解答

形状显示不完整

当圆角矩形在边缘处被截断时，通常是因为 UV 坐标范围限制。解决方案包括：

调整宽度和高度参数，确保形状完全在 $0,1$ UV 范围内
使用 Tiling And Offset 节点重新映射 UV 坐标
检查模型的原始 UV 布局是否合理

边缘锯齿明显

如果圆角矩形的边缘出现明显锯齿，可以尝试：

确保使用了正确的抗锯齿设置
增加渲染分辨率或使用多重采样抗锯齿（MSAA）
在后期处理中应用额外的抗锯齿效果

性能问题

当使用多个 Rounded Rectangle 节点导致性能下降时：

考虑合并形状，使用一个节点通过参数变化创建多个元素
优化其他部分的着色器代码，减少整体计算负担
在不需要高质量的情况下降低形状的复杂度

【Unity Shader Graph 使用与特效实现】专栏-直达 （欢迎点赞留言探讨，更多人加入进来能更加完善这个探索的过程，🙏）