Grid 节点是 Unity URP Shader Graph 中一个功能强大的工具节点，用于生成基于输入 UV 坐标的网格状纹理图案。这个节点在创建各种视觉效果时非常有用，从简单的参考网格到复杂的材质设计都能发挥重要作用。通过调整节点的各项参数，可以精确控制网格的外观特征，包括网格的密度、线条粗细、位置偏移和旋转角度等。
在 Shader Graph 的工作流程中，Grid 节点通常用于创建程序化纹理，这意味着不需要依赖外部纹理图片就能生成网格图案。这种程序化方法具有多个优势：文件体积更小、分辨率无关、参数可动态调整，并且能够无缝平铺。网格图案的输出是一个浮点值，表示在特定 UV 位置网格的强度或可见性，这个值通常用于后续的颜色混合、透明度控制或其他视觉效果处理。
Grid 节点的核心原理是基于数学函数来检测 UV 空间中的线条位置。当 UV 坐标接近网格线时，节点输出较高的值（接近1）；当 UV 坐标处于网格单元格内部时，输出较低的值（接近0）。通过控制频率、宽度等参数，可以调整网格线的间距和粗细，创造出从细密网格到粗大网格的各种效果。
端口
输入端口
UV 输入端口
- 方向：输入
- 类型：Vector 2
- 绑定：UV
- 详细说明：UV 输入端口接收二维向量坐标，用于确定网格图案的映射位置。在大多数情况下，这个端口会连接到 Shader Graph 中的 UV 节点，使用模型的标准纹理坐标。但也可以连接其他坐标源，如经过变换的 UV、屏幕空间坐标或世界空间坐标，以实现不同的映射效果。如果未连接任何输入，Grid 节点将使用默认的 UV0 坐标。
Frequency 输入端口
- 方向：输入
- 类型：Float
- 绑定：无
- 详细说明：Frequency 参数控制网格纹理的重复频率，即单位面积内网格单元格的数量。较高的频率值会产生更密集的网格，单元格尺寸更小；较低的频率值会产生更稀疏的网格，单元格尺寸更大。从数学角度理解，频率参数实际上是对输入 UV 坐标的缩放因子，频率值为 N 意味着在 UV 空间的每个单位长度内会重复 N 次网格图案。
Offset 输入端口
- 方向：输入
- 类型：Float
- 绑定：无
- 详细说明：Offset 参数控制网格图案的整体偏移量，可以沿着网格的对角线方向移动整个网格图案。这个偏移是相对于原始 UV 坐标的，可以用于创建网格动画效果或调整网格与模型的对齐方式。偏移值的改变会影响网格线的位置，但不会改变网格的基本结构和比例。
Width X 输入端口
- 方向：输入
- 类型：Float
- 绑定：无
- 详细说明：Width X 参数专门控制网格线在水平方向（X 轴）的宽度。宽度值是一个相对值，表示网格线占据整个网格单元的比例。例如，Width X 值为 0.1 表示水平网格线占据单元格宽度的 10%。较小的宽度值产生细线，较大的宽度值产生粗线。当宽度值达到 0.5 时，网格线会相互接触，形成实心效果。
Width Y 输入端口
- 方向：输入
- 类型：Float
- 绑定：无
- 详细说明：Width Y 参数控制网格线在垂直方向（Y 轴）的宽度，其工作原理与 Width X 类似，但只影响垂直方向的网格线。通过分别设置 Width X 和 Width Y，可以创建非正方形的矩形网格，或者只在一个方向显示网格线的特殊效果。
Rotation 输入端口
- 方向：输入
- 类型：Float
- 绑定：无
- 详细说明：Rotation 参数控制网格图案的旋转角度，单位为度。正值表示逆时针旋转，负值表示顺时针旋转。旋转操作围绕 UV 空间的原点 (0,0) 进行，这意味着旋转中心通常是纹理的角落。如果需要围绕其他点旋转，需要先通过其他节点对 UV 坐标进行相应处理。
输出端口
Out 输出端口
- 方向：输出
- 类型：Float
- 绑定：无
- 详细说明：Out 端口输出一个浮点值，范围通常在 0 到 1 之间，表示在给定的 UV 坐标处网格的强度。值为 1 表示该位置完全处于网格线上，值为 0 表示该位置处于网格单元格内部。在实际应用中，这个输出值通常连接到颜色节点的透明度输入，或与其他纹理进行混合，以创建复杂的视觉效果。
参数详解与使用技巧
Frequency 参数的深入理解
Frequency 参数是控制网格密度的关键因素，理解其数学原理对于高效使用 Grid 节点至关重要。从技术角度看，Frequency 参数实际上是对输入 UV 坐标的乘数。当 Frequency 值为 1 时，每个 UV 单位内包含一个完整的网格单元格；当 Frequency 值为 2 时，每个 UV 单位内包含两个网格单元格，以此类推。
在实际应用中，Frequency 参数可以动态变化，创造出有趣的动画效果。例如，可以通过 Time 节点驱动 Frequency 参数，实现网格密度随时间变化的效果。这种技术可以用于创建科幻界面中的扫描效果或能量场可视化。
Frequency 参数还影响网格线的视觉平滑度。当频率非常高时，网格线可能会因为像素精度限制而出现锯齿。在这种情况下，可以考虑使用抗锯齿技术或后处理效果来改善视觉质量。
Width X 和 Width Y 参数的高级应用
Width X 和 Width Y 参数不仅控制网格线的粗细，还可以用于创建各种非传统网格效果。通过将这两个参数设置为不同的值，可以创建长方形而非正方形的网格单元格，这在某些设计场景中非常有用。
当 Width X 或 Width Y 的值设置为 0 时，相应方向的网格线将完全消失，这可以用于创建只有水平或垂直线的条纹图案。相反，当这两个值都设置为 0.5 时，网格线会相互接触，形成一种类似棋盘格的效果，但线条交叉处会有叠加效果。
一个有趣的高级技巧是使用其他节点（如 Noise 或 Sine）来动态控制 Width 参数，这样可以创建粗细不均匀的网格线，模拟手绘效果或特殊的艺术风格。
Offset 参数的创意使用
Offset 参数虽然简单，但在动画和效果设计中极为有用。通过随时间变化偏移值，可以创建网格移动的效果，类似于扫描线或流动的能量场。这种技术常用于科幻游戏中的全息投影效果或数据可视化。
Offset 参数还可以用于对齐网格与特定几何特征。例如，在建筑可视化中，可能希望网格线与墙壁或地板边缘对齐，通过调整 Offset 值可以实现这种精确对齐。
当结合 Rotation 参数使用时，Offset 可以创造出绕中心点旋转的网格效果，尽管这需要一些额外的数学处理来确保旋转中心正确。
Rotation 参数的技术细节
Rotation 参数实现的是标准的 2D 旋转变换，围绕 UV 空间的原点 (0,0) 进行。这意味着如果直接旋转网格，旋转中心通常是纹理的角落，这可能不是期望的效果。
要实现围绕纹理中心旋转，需要先对 UV 坐标进行预处理：将 UV 坐标减去 0.5 使中心点移动到 (0,0)，应用旋转，然后再加回 0.5。这种技术可以通过 Combine 节点和数学运算节点在 Shader Graph 中实现。
Rotation 参数接受任何浮点值，包括大于 360 或小于 0 的值。Grid 节点会自动处理这些值，将其转换为有效的 0-360 度范围内的角度。这使得可以通过 Time 节点直接驱动 Rotation 参数，创建连续旋转的网格效果，而不需要担心角度值的包装。
实际应用案例
基础网格材质创建
创建一个基础的网格材质是理解 Grid 节点工作原理的最佳起点。以下是详细步骤：
- 在 Shader Graph 中创建新图，添加 Grid 节点
- 将 Grid 节点的 UV 输入连接到 UV 节点
- 设置 Frequency 为 10，这将创建中等密度的网格
- 设置 Width X 和 Width Y 为 0.02，创建细线网格
- 将 Grid 节点的输出连接到 Color 节点的 Alpha 输入
- 设置 Color 节点的基础颜色为黑色，Alpha 为 1
- 创建一个白色背景，将网格颜色设置为与背景对比明显的颜色
这种基础网格可以用于各种参考和设计目的，如对齐辅助线或测量参考。
动态网格动画效果
通过将 Time 节点连接到 Grid 节点的不同输入端口，可以创建各种动态网格效果：
- 连接 Time 节点到 Offset 输入，创建平移滚动的网格
- 连接 Time 节点到 Rotation 输入，创建旋转的网格
- 使用 Sine 或 Noise 节点处理 Time 输出后再连接到 Frequency，创建脉动变化的网格密度
- 结合多个动画参数，创建复杂的复合动画效果
这些动态网格效果特别适用于科幻界面、能量场特效或数据可视化场景。
高级混合效果
Grid 节点可以与其他纹理和节点结合，创建复杂的混合效果：
- 将 Grid 输出与图像纹理结合，创建网格覆盖效果
- 使用 Grid 输出作为蒙版，在不同区域显示不同的纹理或颜色
- 将多个不同参数的 Grid 节点组合，创建复杂的多层网格图案
- 使用 Grid 输出驱动其他效果参数，如凹凸强度或高光强度
这些高级技术可以极大地扩展 Grid 节点的应用范围，创造出独特而专业的视觉效果。
性能考虑与优化建议
虽然 Grid 节点本身计算效率较高，但在复杂场景或移动平台上使用时仍需考虑性能因素：
- 高频率值可能导致摩尔纹或锯齿问题，需要适当的抗锯齿处理
- 动态变化的参数（特别是 Rotation）可能增加着色器计算负担
- 在移动平台上，建议限制同时使用的 Grid 节点数量
- 对于静态网格，考虑将结果烘焙到纹理中以减少实时计算
通过理解这些性能特征，可以在保证视觉效果的同时优化渲染效率。
【Unity Shader Graph 使用与特效实现】专栏-直达 （欢迎点赞留言探讨，更多人加入进来能更加完善这个探索的过程，🙏）