【节点】[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 代码实现：

ini 复制代码

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 使用与特效实现】专栏-直达 （欢迎点赞留言探讨，更多人加入进来能更加完善这个探索的过程，🙏）