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

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

Radial Shear 节点是 Unity URP Shader Graph 中一个功能强大的 UV 变换工具，它能够创建出类似于波浪或漩涡的径向扭曲效果。这种节点在游戏开发中特别有用，可以用于创建各种视觉效果，如水下折射、热浪扭曲、魔法特效等。通过调整中心点、强度和偏移参数，开发者可以精确控制扭曲效果的外观和行为。

Radial Shear 节点的核心原理是基于极坐标系的数学变换。它通过计算每个 UV 坐标相对于中心点的距离和角度，然后应用剪切变换来创建径向扭曲效果。这种变换不是简单的线性变换，而是随着距离中心点的远近而变化，从而产生自然的波浪状效果。

在 Shader Graph 中使用 Radial Shear 节点时，理解其数学原理和工作机制非常重要。这不仅有助于更好地控制效果，还能在遇到问题时进行有效的调试。此外，了解如何将此节点与其他节点组合使用，可以创造出更加复杂和有趣的视觉效果。

描述

Radial Shear 节点的主要功能是将类似于波的径向剪切变形效果应用于输入的 UV 坐标。这种变形效果从一个中心点向外辐射，创造出类似于石子投入水中产生的涟漪效果。通过调整不同的参数，可以控制涟漪的大小、强度和复杂程度。

工作原理

Radial Shear 节点的工作原理基于向量数学和极坐标变换。当 UV 坐标输入节点后，节点首先计算每个坐标点与指定中心点之间的向量差。然后，它计算这个向量差的点积，得到该点距离中心点的平方距离。这个平方距离随后与强度参数相乘，确定该点的扭曲程度。

关键的扭曲机制是通过将原始向量旋转 90 度，然后乘以基于距离的扭曲因子来实现的。这种旋转剪切操作产生了径向的波浪效果，距离中心越远的点受到的扭曲影响越大，但又不是简单的线性关系，从而创造出更自然的视觉效果。

参数详解

Radial Shear 节点的效果主要由四个输入参数控制：

• UV：这是基础的纹理坐标输入，决定了效果应用的位置。通常直接使用模型的默认 UV，但也可以使用其他 UV 集或经过处理的 UV 坐标作为输入，以创建更复杂的效果。
• Center：定义扭曲效果的中心点。这个二维向量表示在 UV 空间中的位置，通常取值范围是 [0,1]。改变中心点可以移动整个扭曲效果的位置，例如将热浪效果集中在角色周围。
• Strength：控制扭曲效果的强度。正值和负值会产生不同方向的扭曲，绝对值越大，扭曲效果越明显。这个参数可以动态调整，以创建动画效果，如逐渐增强的魔法漩涡。
• Offset：为结果的各个通道添加额外的偏移。这个参数可以用于微调效果，或创建更复杂的变化。例如，可以通过对 R 和 G 通道应用不同的偏移值，创建非对称的扭曲效果。

应用场景

Radial Shear 节点在游戏开发中有广泛的应用：

• 热浪效果：通过在地面或火焰上方的空气应用 Radial Shear 扭曲，可以创建逼真的热浪效果。
• 水下折射：模拟光线通过水面时的折射效果，特别是在角色潜入水中时，水面上的扭曲效果。
• 魔法特效：创建魔法漩涡、能量场或传送门等特效的扭曲边缘。
• 镜头特效：模拟鱼眼镜头、广角镜头或特殊滤镜效果。
• 界面动画：为 UI 元素添加动态的扭曲效果，吸引玩家注意力。

端口

Radial Shear 节点的端口设计直观且功能明确，每个端口都有特定的用途和数据类型。理解每个端口的作用是有效使用该节点的关键。

输入端口

• UV（输入，Vector 2，UV 绑定）：这是 Radial Shear 节点的主要输入，接收要应用扭曲效果的纹理坐标。这个端口通常连接到模型的 UV 坐标，但也可以连接到其他生成或修改过的 UV 坐标。当使用 UV 绑定时，节点会自动使用模型的主 UV 集，但也可以手动连接其他 UV 源。在实际应用中，经常会将 Tiling And Offset 节点连接到 UV 输入，以先对 UV 进行基本的缩放和平移操作，然后再应用径向剪切效果。
• Center（输入，Vector 2，无绑定）：这个端口定义扭曲效果的中心点。它是一个二维向量，表示在 UV 空间中的位置，其中 (0,0) 对应纹理的左下角，(1,1) 对应纹理的右上角。默认值通常是 (0.5, 0.5)，即纹理的中心。这个参数可以动态变化，例如跟随玩家位置或根据游戏事件移动，创建动态的扭曲中心。在实际使用中，经常会将 Time 节点与 Center 连接，创建移动的扭曲中心，或者使用 Player Position 节点使扭曲效果跟随角色移动。
• Strength（输入，Float，无绑定）：这个浮点值控制扭曲效果的强度。正值和负值会产生不同方向的扭曲旋转。较小的值产生细微的扭曲效果，适合轻微的热浪或折射；较大的值产生强烈的扭曲，适合魔法漩涡或极端镜头效果。这个参数通常与时间节点结合使用，创建脉动或波动的扭曲效果。例如，将 Sine Time 节点连接到 Strength 输入，可以创建周期性的波浪效果。
• Offset（输入，Vector 2，无绑定）：这个端口为扭曲结果的各个通道添加额外的偏移。它可以用于微调效果，或创建更复杂的变形。例如，对 R 和 G 通道应用不同的偏移值，可以创建非对称的扭曲效果。Offset 通常用于精细调整，或者与其他效果参数连接，创建更复杂的交互。

输出端口

• Out（输出，Vector 2，无绑定）：这是 Radial Shear 节点的最终输出，包含应用了径向剪切变形后的 UV 坐标。这个输出通常连接到采样纹理节点的 UV 输入，或者与其他 UV 操作节点组合使用。输出的 UV 坐标可能会超出标准的 [0,1] 范围，这取决于输入的参数和原始 UV 值。在使用时，可能需要通过 Tiling And Offset 节点或 Fraction 节点将 UV 坐标重新映射到 [0,1] 范围内，以避免纹理重复或拉伸问题。

端口连接技巧

有效使用 Radial Shear 节点需要掌握一些端口连接的技巧：

• 将 Time 节点与 Strength 参数连接，创建动态的、随时间变化的扭曲效果。
• 使用 Position 节点与 Center 参数连接，使扭曲效果跟随场景中的特定物体或玩家位置。
• 将 Noise 节点与 Offset 参数连接，为扭曲效果添加随机性，使其看起来更加自然。
• 使用 Multiply 节点调整 Strength 值，通过另一个参数（如距离或亮度）控制扭曲强度。
• 将 Radial Shear 节点的输出连接到多个纹理采样器，为不同的纹理应用相同的扭曲效果，保持视觉效果的一致性。

生成的代码示例

Radial Shear 节点在背后生成的代码揭示了其数学原理和工作机制。理解这段代码不仅有助于更好地使用该节点，还能在需要自定义效果时提供基础。

代码分析

以下是 Radial Shear 节点的典型 HLSL 代码实现：

void Unity_RadialShear_float(float2 UV, float2 Center, float Strength, float2 Offset, out float2 Out)
{
    float2 delta = UV - Center;
    float delta2 = dot(delta.xy, delta.xy);
    float2 delta_offset = delta2 * Strength;
    Out = UV + float2(delta.y, -delta.x) * delta_offset + Offset;
}

这段代码可以分解为几个关键步骤：

• 计算差值向量：float2 delta = UV - Center; 这一行计算了当前 UV 坐标与中心点之间的向量差。这个差值向量决定了当前点相对于中心点的方向和距离。
• 计算平方距离：float delta2 = dot(delta.xy, delta.xy); 这里使用点积计算差值向量的平方长度。点积运算实质上是计算向量的各个分量的平方和，即 delta.x * delta.x + delta.y * delta.y。使用平方距离而不是实际距离，避免了开方运算，提高了性能，同时保持了效果的视觉质量。
• 计算扭曲偏移：float2 delta_offset = delta2 * Strength; 这一行将平方距离与强度参数相乘，得到基于距离的扭曲因子。距离中心越远的点，这个值越大，因此扭曲效果也越明显。
• 应用旋转剪切：Out = UV + float2(delta.y, -delta.x) * delta_offset + Offset; 这是最关键的一步，它将原始 UV 坐标与旋转后的差值向量乘以扭曲因子相加。float2(delta.y, -delta.x) 实际上是将原始差值向量顺时针旋转了 90 度。这种旋转操作产生了剪切效果，结合基于距离的扭曲因子，创建了径向的波浪状扭曲。

数学原理

Radial Shear 节点的数学原理基于极坐标变换和向量旋转。在标准的笛卡尔坐标系中，点的位置由 x 和 y 坐标确定。而在极坐标系中，点的位置由距离原点的长度和与参考方向的角度确定。

Radial Shear 节点巧妙地将这两种坐标系结合：

• 通过 delta = UV - Center 将坐标系原点移动到中心点
• 通过 dot(delta, delta) 计算极坐标系中的半径平方（避免开方运算）
• 通过 float2(delta.y, -delta.x) 实现 90 度旋转，这在数学上等价于乘以虚数单位 i
• 最终将旋转后的向量按半径平方和强度的比例加到原始坐标上

这种数学操作产生的效果是：距离中心点越远的点，其移动距离越大，移动方向垂直于其与中心的连线，从而形成环绕中心的波浪图案。

自定义修改

理解生成的代码后，开发者可以基于此创建自定义的变体效果：

• 修改旋转角度：将 float2(delta.y, -delta.x) 改为 float2(delta.y * cos(angle) - delta.x * sin(angle), delta.x * cos(angle) + delta.y * sin(angle)) 可以创建任意角度的剪切效果。
• 改变距离计算：将 dot(delta.xy, delta.xy) 改为 length(delta) 或 sqrt(dot(delta.xy, delta.xy)) 可以使用实际距离而不是平方距离，这会改变扭曲的渐变特性。
• 添加非线性：在计算 delta_offset 时添加指数函数，如 pow(delta2, 1.5) * Strength，可以创建非线性的扭曲效果。
• 组合多个中心：通过循环或多次调用函数，组合多个不同中心和强度的 Radial Shear 效果，创建更复杂的干扰图案。

性能考虑

Radial Shear 节点的代码实现经过优化，使用了高效的数学运算：

• 避免使用开方、三角函数等昂贵运算
• 使用点积代替分量分别计算
• 最小化中间变量和计算步骤

---

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