ShaderGraph节点解析(136):矩形节点（Rectangle Node）详解

目录

一、节点功能概述

二、端口详解

三、控制选项

四、技术原理解析

4.1 数学原理（距离场计算）

4.2 生成代码解析

4.3 视觉特性

五、应用场景与实战案例

5.1 UI 元素（矩形按钮 / 面板）

场景：在 UI 中生成无纹理的矩形按钮或面板，支持动态调整大小和圆角（配合其他节点）

5.2 材质纹理（网格 / 条纹）

场景：为材质添加矩形网格或条纹纹理（如布料格子、屏幕像素感）

5.3 粒子形状（矩形粒子 / 条纹）

场景：控制粒子的形状为矩形（如激光束、广告牌粒子）

5.4 遮罩效果（矩形区域限制）

场景：用矩形遮罩限制特效范围（如屏幕底部的 UI 提示区、局部高亮）

六、使用技巧与注意事项

6.1 平铺与重复图案

6.2 边缘锐利度控制

6.3 避免零尺寸或负尺寸

6.4 性能考量

七、总结与拓展应用

---

一、节点功能概述

矩形节点（Rectangle Node）是 Unity Shader Graph 中用于生成矩形或正方形形状的核心工具。它基于输入的 UV 坐标生成边缘平滑的矩形图案，矩形的宽和高由Width和Height参数精确控制。生成的矩形通过 “距离场” 计算实现 —— 通过像素到矩形边缘的归一化距离，结合抗锯齿处理，得到从矩形内部（值为 1）到外部（值为 0）的平滑过渡效果。

该节点的核心特性在于：

• 形状精准可控：通过Width和Height参数调整矩形的宽高比（Width=Height时为正方形），支持从狭长矩形到标准正方形的全场景需求。
• 边缘抗锯齿：利用 GPU 的屏幕空间导数函数（fwidth）动态调整边缘过渡范围，确保在任何分辨率下边缘都平滑无锯齿。
• UV 适配灵活：支持通过Tiling And Offset Node进行偏移或平铺，但默认不会自动重复（需配合Fraction Node实现重复矩形图案）。
• 片段着色器限制：仅能在片段着色器中使用，适合生成 UI 元素、材质纹理、粒子形状、遮罩等像素级效果。

二、端口详解

端口名称	方向	类型	描述
UV	输入	Vector 2	矩形的 UV 坐标（默认绑定主纹理 UV，范围通常为 [0,1]）
Width	输入	Float	矩形的宽度系数 —— 值越大，矩形水平方向越宽（建议范围 [0.1, 1.0]）
Height	输入	Float	矩形的高度系数 —— 值越大，矩形垂直方向越高（建议范围 [0.1, 1.0]）
Out	输出	Float	矩形形状的距离场结果（范围 [0,1]，内部为 1，外部为 0，边缘平滑过渡）

三、控制选项

控制名称	类型	可选值	描述
Dropdown	下拉菜单	Fastest / Nicest	计算健壮性选项 ——Fastest优先性能，Nicest优先边缘质量（通常默认Nicest）

四、技术原理解析

4.1 数学原理（距离场计算）

4.2 生成代码解析

节点的底层实现直接反映上述逻辑，示例代码如下：

hlsl

void Unity_Rectangle_float(float2 UV, float Width, float Height, out float Out)
{
    // 1. 将UV从[0,1]映射到[-1,1]，计算到矩形边缘的距离（超出为正，内部为负）
    float2 d = abs(UV * 2 - 1) - float2(Width, Height);
    
    // 2. 用fwidth计算边缘过渡，转换为平滑的0-1值
    d = 1 - d / fwidth(d);
    
    // 3. 取x和y分量的最小值（确保矩形内部全为1），并限制范围到[0,1]
    Out = saturate(min(d.x, d.y));
}

• 关键函数解析：
  • fwidth(d)：返回d在屏幕空间的导数（约等于相邻像素d的差值），用于自适应调整边缘过渡宽度 —— 分辨率越高，过渡越窄，边缘越锐利；
  • min(d.x, d.y)：确保矩形的四个边都被 “合并” 为一个形状（x 方向和 y 方向都在内部时，才视为矩形内部）；
  • saturate(x)：将结果限制在 [0,1]，避免超出有效范围。

4.3 视觉特性

• 形状控制：Width和Height直接决定矩形的宽高比：
  • Width=1, Height=1：生成标准正方形；
  • Width=2, Height=1：生成水平拉伸的矩形；
  • Width=0.5, Height=1：生成水平压缩的矩形。
• 边缘过渡：距离场计算确保边缘从 1（内部）平滑过渡到 0（外部），过渡范围由屏幕分辨率自动适配，避免硬边锯齿。

五、应用场景与实战案例

5.1 UI 元素（矩形按钮 / 面板）

场景：在 UI 中生成无纹理的矩形按钮或面板，支持动态调整大小和圆角（配合其他节点）

1. 需求：创建一个边缘平滑的矩形按钮，宽高比为 2:1
2. 实现步骤：

   hlsl

   // 输入UI的UV（已归一化到[0,1]）
   float2 uv = IN.uv;
   
   // 生成矩形（Width=0.8, Height=0.4，宽高比2:1）
   float rect = RectangleNode.Out; // UV=uv, Width=0.8, Height=0.4
   
   // 应用按钮颜色（内部为主题色，边缘渐变）
   float3 buttonColor = _ThemeColor * rect;
   float alpha = rect; // 边缘外透明
   
   o.Albedo = buttonColor;
   o.Alpha = alpha;
   

5.2 材质纹理（网格 / 条纹）

场景：为材质添加矩形网格或条纹纹理（如布料格子、屏幕像素感）

1. 步骤：

   hlsl

   // UV添加平铺（控制网格密度）
   float2 uv = IN.uv_MainTex * 10; // 10x10网格
   
   // 生成矩形（小尺寸，作为网格单元）
   float cell = RectangleNode.Out; // UV=uv, Width=0.8, Height=0.8
   
   // 用Fraction Node处理UV，实现重复网格
   float2 tiledUV = frac(uv);
   float repeatedRect = RectangleNode.Out; // UV=tiledUV, Width=0.8, Height=0.8
   
   // 混合网格颜色与基础色
   float3 color = lerp(_BaseColor, _GridColor, 1 - repeatedRect); // 网格边缘为_GridColor
   o.Albedo = color;
   

5.3 粒子形状（矩形粒子 / 条纹）

场景：控制粒子的形状为矩形（如激光束、广告牌粒子）

1. 实现：

   hlsl

   // 粒子UV（[0,1]范围，Y轴拉伸模拟激光束）
   float2 uv = IN.uv * float2(1, 5); // 高度拉伸5倍
   
   // 生成矩形（窄宽高比，模拟激光束）
   float rect = RectangleNode.Out; // UV=uv, Width=0.2, Height=4.5
   
   // 应用形状到粒子透明度（中心不透明，边缘渐变）
   float alpha = rect * _Intensity;
   
   o.Albedo = _LaserColor;
   o.Alpha = alpha;
   

5.4 遮罩效果（矩形区域限制）

场景：用矩形遮罩限制特效范围（如屏幕底部的 UI 提示区、局部高亮）

1. 示例：

   hlsl

   // UV添加偏移（控制遮罩位置，如屏幕底部）
   float2 uv = IN.uv + float2(0, 0.3); // 向下偏移30%
   
   // 生成矩形遮罩（宽全屏，高占30%）
   float mask = RectangleNode.Out; // UV=uv, Width=1, Height=0.3
   
   // 高亮遮罩区域（底部30%区域为提示色）
   float3 highlight = lerp(_BaseColor, _TipColor, mask);
   o.Albedo = highlight;
   

六、使用技巧与注意事项

6.1 平铺与重复图案

矩形节点默认不会自动重复（UV 超出 [0,1] 后形状会变形），若需生成重复的矩形阵列，需先用Fraction Node处理 UV（取小数部分）：

hlsl

// 重复矩形图案（5x5阵列）
float2 tileCount = 5;
float2 tiledUV = frac(IN.uv_MainTex * tileCount);
float repeatedRect = RectangleNode.Out; // UV=tiledUV, Width=0.8/tileCount.x, Height=0.8/tileCount.y

• 注意按tileCount缩放Width和Height，避免矩形在阵列中重叠。

6.2 边缘锐利度控制

默认边缘锐利度由fwidth(d)自动控制，若需手动调整，可添加缩放系数：

hlsl

float sharpness = 1.5; // 系数越大，边缘越锐利
d = 1 - d / (fwidth(d) * sharpness);

6.3 避免零尺寸或负尺寸

Width或Height为 0 或负值会导致矩形形状异常，实际使用中建议设置最小值（如 0.1）：

hlsl

float safeWidth = max(Width, 0.1);
float safeHeight = max(Height, 0.1);
float2 d = abs(UV * 2 - 1) - float2(safeWidth, safeHeight);

6.4 性能考量

矩形节点的计算仅包含基础算术运算、abs、fwidth和min，属于轻量级操作，适合片段着色器高频调用。优化建议：

• 重复图案需控制tileCount，避免过度密集（如 > 100x100）导致性能浪费；
• 静态矩形（如 UI 背景）可预烘焙到纹理，减少实时计算；
• 选择Fastest模式（控制选项）可略微提升性能，适合移动平台。

七、总结与拓展应用

矩形节点通过距离场计算生成平滑边缘的矩形，为 UI 设计、材质纹理、粒子形状等场景提供了高效工具，其核心价值在于：

1. 形状精准可控：通过Width和Height灵活调整矩形的宽高比，适配从正方形到狭长矩形的全场景需求。
2. 边缘自动抗锯齿：基于fwidth的动态过渡确保在任何分辨率下都有平滑边缘，无需手动调整参数。
3. 轻量高效：计算逻辑简单，性能开销低，适合片段着色器高频调用。

拓展方向：

• 结合Round Node对矩形边缘进行圆角处理（如通过smoothstep控制拐角过渡）；
• 用噪声节点扰动UV，使矩形边缘不规则（如模拟撕裂的纸张、破损的屏幕）；
• 叠加多个矩形节点，通过Subtract操作生成复杂形状（如矩形挖空、十字交叉）。