[RoundedPolygon节点]原理解析与实际应用
够减少尖锐角度带来的视觉冲击，提升用户体验。在移动设备UI、游戏HUD界面和各类图标设计中，圆角设计已经成为主流趋势。
从技术实现角度来看，Rounded Polygon 节点生成的是基于距离场的形状表示，这意味着它能够提供高质量的边缘抗锯齿效果，并且在不同分辨率下都能保持清晰的边缘质量。这种实现方式使得生成的形状非常适合用于遮罩、轮廓描边和各种形状组合操作。
描述
Rounded Polygon 节点的主要功能是基于输入的UV坐标生成圆角多边形形状。该形状的大小由宽度（Width）和高度（Height）两个参数精确控制，允许用户创建各种比例的长方形、正方形或其他矩形变体。通过调整边数（Sides）参数，用户可以定义多边形的基本结构，从三角形（3边）到圆形（理论上无限多边）之间的任意正多边形。
圆度（Roundness）参数是该节点的特色功能，它定义了多边形每个角的圆滑程度。当Roundness值为0时，多边形将保持原始的锐角状态；随着值的增加，角部会逐渐变得圆滑；当值接近1时，多边形将趋近于圆形或椭圆形，具体取决于宽度和高度的比例关系。
在实际使用中，该节点通常与其他节点配合使用以增强其功能。例如，通过连接Tiling And Offset节点，用户可以轻松地对生成的形状进行偏移或平铺操作，创建重复的图案效果。需要注意的是，为了保持形状在UV空间中偏移的能力，节点在设计时没有内置自动重复功能。如果用户需要创建重复的点状图案，建议先通过Fraction节点处理UV输入，然后再连接到Rounded Polygon节点。
从着色器阶段的角度来看，此节点仅限于片段着色器阶段使用，这意味着它主要在像素级别进行计算和渲染。这种限制确保了形状生成的精度和视觉效果的质量，但同时也意味着它不能直接用于顶点着色器阶段的几何变形操作。
技术原理深度解析
Rounded Polygon 节点的内部实现基于复杂的数学计算，主要包括极坐标变换、角度分割和圆弧插值等技术。节点首先将输入的UV坐标从标准的[0,1]范围转换到[-1,1]的对称空间，然后根据宽度和高度参数进行适当的缩放，确保形状能够正确适应指定的尺寸。
多边形边数的处理涉及到底层的三角函数计算。节点通过将360度圆周等分来创建正多边形的边，每个边对应一个特定的角度区间。圆角的实现则更加复杂，它需要在多边形的每个角点处计算一个圆弧过渡，这个圆弧的半径由Roundness参数控制，半径越大，圆角效果越明显。
距离场技术是该节点的核心技术之一。节点输出的实际上是一个有符号距离场（SDF）值，表示每个像素到形状边界的距离。正值表示像素在形状内部，负值表示在形状外部，零值恰好位于边界上。这种表示方法使得形状的边缘可以通过fwidth函数进行高质量的抗锯齿处理，最终通过saturate函数将距离场转换为标准的[0,1]遮罩值。
端口
Rounded Polygon 节点提供了五个输入端口和一个输出端口，每个端口都有特定的功能和数据类型要求。理解这些端口的作用对于正确使用该节点至关重要。
UV输入端口
UV输入端口接收Vector2类型的坐标数据，通常绑定到着色器的UV通道。这个端口决定了形状在纹理空间中的位置和分布。用户可以直接使用模型的原始UV坐标，也可以通过其他节点（如Tiling And Offset、Rotate等）对UV进行变换，从而实现形状的平移、旋转、缩放等效果。
在实际应用中，UV输入端口的灵活性使得用户可以创建复杂的图案组合。例如，通过将Time节点连接到UV的偏移，可以实现形状的动画效果；通过使用不同的UV通道，可以在同一材质中创建多个独立的形状层。
Width和Height输入端口
Width和Height输入端口均接受Float类型的数值，分别控制生成形状的宽度和高度。这两个参数共同决定了形状的基本比例和尺寸。当Width和Height值相等时，形状在各个方向上对称；当值不相等时，形状会相应地拉伸或压缩。
- Width控制形状在水平方向（U轴）的尺寸
- Height控制形状在垂直方向（V轴）的尺寸
- 两个参数都支持动态调整，可以通过其他节点驱动
- 当参数值为0时，节点内部会使用一个极小的epsilon值避免除零错误
Sides输入端口
Sides输入端口接受Float类型的数值，用于指定多边形的边数。这个参数决定了形状的基本几何结构：
- 当Sides=3时，生成圆角三角形
- 当Sides=4时，生成圆角矩形或正方形
- 当Sides=5时，生成圆角五边形
- 当Sides=6时，生成圆角六边形
- 当Sides值较大时（如Sides≥8），形状趋近于圆形
需要注意的是，Sides参数理论上支持任意正整数值，但实际使用中通常设置在3到8之间，因为边数过多时视觉上难以与圆形区分，但计算成本会增加。
Roundness输入端口
Roundness输入端口接受Float类型的数值，范围通常在[0,1]之间，用于控制多边形角的圆滑程度。这个参数是Rounded Polygon节点的特色功能，它通过复杂的数学计算在多边形的每个角点处创建平滑的圆弧过渡。
- Roundness=0时，多边形保持原始锐角
- Roundness=0.5时，角部呈现明显的圆角效果
- Roundness=1时，形状趋近于椭圆形
在内部实现中，Roundness参数实际上控制的是圆角半径与多边形边长的比例关系。较高的Roundness值会产生较大的圆角半径，直到圆角半径达到多边形内切圆半径的上限。
Out输出端口
Out输出端口提供Float类型的数值，表示基于输入参数生成的形状遮罩。输出值的范围通常是[0,1]，其中1表示像素完全在形状内部，0表示完全在形状外部，中间值表示抗锯齿的边缘区域。
这个输出可以连接到各种其他节点的输入，如：
- 颜色节点的Alpha输入，用于创建形状遮罩
- 混合节点的透明度输入，用于形状间的混合操作
- 步长节点的阈值输入，用于创建硬边缘效果
- 自定义光照模型的输入，用于特殊渲染效果
生成的代码示例
以下示例代码展示了Rounded Polygon节点的完整实现，通过分析这段代码可以深入理解节点的内部工作原理和数学基础。
HLSL |
void RoundedPolygon_Func_float(float2 UV, float Width, float Height, float Sides, float Roundness, out float Out) |
{ |
// 将UV从[0,1]转换到[-1,1]范围 |
UV = UV * 2. + float2(-1.,-1.); |
// 防止除零错误的小值 |
float epsilon = 1e-6; |
// 根据宽度和高度缩放UV |
UV.x = UV.x / ( Width + (Width==0)*epsilon); |
UV.y = UV.y / ( Height + (Height==0)*epsilon); |
// 限制圆度参数的有效范围 |
Roundness = clamp(Roundness, 1e-6, 1.); |
// 计算实际使用的边数（取整并确保为正数） |
float i_sides = floor( abs( Sides ) ); |
// 计算多边形的基本角度参数 |
float fullAngle = 2. * PI / i_sides; // 每个边的完整角度 |
float halfAngle = fullAngle / 2.; // 半边角度 |
float opositeAngle = HALF_PI - halfAngle; // 对边角度 |
// 计算多边形的对角线长度（用于后续缩放） |
float diagonal = 1. / cos( halfAngle ); |
// 计算倒角（圆角）相关的参数 |
float chamferAngle = Roundness * halfAngle; // 倒角占据的角度 |
float remainingAngle = halfAngle - chamferAngle; // 剩余的角度 |
float ratio = tan(remainingAngle) / tan(halfAngle); // 多边形三角形长度与倒角中心距离的比例 |
// 计算倒角圆弧的中心坐标 |
float2 chamferCenter = float2( |
cos(halfAngle), |
sin(halfAngle) |
) * ratio * diagonal; |
// 计算倒角圆弧的起点坐标 |
float2 chamferOrigin = float2( |
1., |
tan(remainingAngle) |
); |
// 使用三角学计算距离参数 |
float distA = length(chamferCenter); // 倒角中心到多边形中心的距离 |
float distB = 1. - chamferCenter.x; // 倒角半径 |
float distCref = length(chamferOrigin); // 倒角起点的参考距离 |
// 计算UV缩放因子以确保多边形适合UV空间 |
float uvScale = diagonal; |
UV *= uvScale; |
// 将笛卡尔坐标转换为极坐标 |
float2 polaruv = float2 ( |
atan2( UV.y, UV.x ), // 角度分量 |
length(UV) // 半径分量 |
); |
// 调整角度范围和对齐 |
polaruv.x += HALF_PI + 2*PI; |
polaruv.x = fmod( polaruv.x + halfAngle, fullAngle ); |
polaruv.x = abs(polaruv.x - halfAngle); |
// 将极坐标转换回笛卡尔坐标（但已进行角度对齐） |
UV = float2( cos(polaruv.x), sin(polaruv.x) ) * polaruv.y; |
// 计算倒角区域的角度比例 |
float angleRatio = 1. - (polaruv.x - remainingAngle) / chamferAngle; |
// 使用余弦定理计算多边形中心到倒角边缘的距离 |
float distC = sqrt( distA*distA + distB*distB - 2.*distA*distB*cos( PI - halfAngle * angleRatio ) ); |
// 初始化输出值为X坐标（用于非倒角区域） |
Out = UV.x; |
// 检测当前像素是否位于倒角区域 |
float chamferZone = ( halfAngle - polaruv.x ) < chamferAngle; |
// 根据区域选择使用不同的距离计算 |
Out = lerp( UV.x, polaruv.y / distC, chamferZone ); |
// 将距离场转换为形状遮罩（包含抗锯齿） |
Out = saturate((1 - Out) / fwidth(Out)); |
} |
代码解析与优化建议
这段生成的代码展示了Rounded Polygon节点的完整计算流程，从坐标变换到最终的距离场生成。代码的逻辑可以分为几个主要阶段：
坐标预处理阶段将输入的UV从标准的[0,1]范围转换到[-1,1]的对称空间，这样便于后续的中心对称计算。同时根据Width和Height参数进行适当的缩放，确保形状能够正确匹配指定的尺寸。
几何参数计算阶段根据Sides参数计算多边形的各种角度关系，包括完整角度、半角度和对角线长度。这些参数是构建多边形几何的基础。
圆角处理阶段是代码中最复杂的部分，它根据Roundness参数计算倒角（圆角）的各种属性，包括倒角角度、倒角中心位置和倒角半径等。这里使用了三角学和几何关系来精确计算圆角的形状。
极坐标变换阶段将笛卡尔坐标系转换为极坐标系，这样可以更方便地处理多边形的径向对称性。通过角度对齐和模运算，代码将问题简化为处理单个扇形区域。
距离场计算阶段根据像素所在的不同区域（平面边区域或圆角区域）使用不同的距离计算方法。对于平面边区域，直接使用X坐标作为距离；对于圆角区域，使用复杂的三角公式计算到圆弧边缘的距离。
后期处理阶段将计算得到的距离场通过fwidth函数进行抗锯齿处理，最终通过saturate函数转换为标准的[0,1]遮罩值。
在实际使用中，如果性能成为瓶颈，可以考虑以下优化策略：