## —— 从三角函数、圆弧参数方程到顶点位置偏移
## 目录

1. 学习目标与问题背景
2. 三维空间中的位置与向量
3. 圆的几何结构：Radius、Distance 与圆弧半径
4. 正弦与余弦：从直角三角形到圆上坐标
5. 圆的参数方程及其推导
6. MF_Bend 中的角度计算
7. 从圆弧坐标到三维空间位置
8. 顶点变形与 WPO 的数学原理
9. MF_Bend 的完整数学模型
10. UE 材质节点与数学公式的对应关系
11. 算法的数学性质与局限
12. 思考题与知识检查

---

## 第一章：序

在 UE 中制作草地风动时，一个常见的需求是：让原本竖直生长的草叶产生弯曲效果。

假设一根草叶由多个顶点组成，原始状态下顶点沿着竖直方向排列：草根位于底部，草叶中部位于中间，草尖位于顶部。我们希望通过数学计算，让这些顶点按照一定的规律改变位置，最终形成一条弯曲的草叶。这里存在一个核心问题：**如何根据一个顶点原来的位置，计算它弯曲之后应该到达的位置？** 
我们使用圆弧几何来描述这种弯曲，它的数学过程可以概括为：
1. 先获取顶点相对于 Pivot 的位置
2. 再根据顶点高度计算一个角度
3. 然后使用 Sin 和 Cos 计算圆弧上的坐标
4. 接着将计算结果组合成新的空间位置
5. 最后用新位置减去原始位置，得到顶点偏移量。

## 第二章：计算草叶的弯曲角度

### 2.0 弧长公式
![请添加图片描述](https://developer.qcloudimg.com/http-save/yehe-12898113/2a8a13fe7c7544e3e2ebb34417cfbf6b.jpg)

假设绿色的线是草，当它随风摆动时，总长度也是不会变的，所以草的总长度**设为S**，可以近似看成圆弧
r是半径，它随草随风摇摆程度的变化而变化，换句话说就是随角度的变化而变化
弧长公式 $S=r\theta$，

这就是草叶弯曲角度的数学原理
下面是实现
### 2.1 获取顶点相对于 Pivot 的位置？

在草叶弯曲中，我们通常不希望直接使用顶点的世界坐标进行几何计算。

例如草根的位置是：$$O=(1000,2000,0)$$
草尖的位置是：$$P=(1000,2000,100)$$

如果直接使用 P，计算会受到草在世界中的摆放位置影响。但真正需要知道的是：草尖距离草根有多远？因此：

$$P_{\text{relative}}=P-O$$ 得到：$$P_{\text{relative}}=(0,0,100)$$

无论这根草放在世界坐标的哪个位置，只要它的形状和相对位置不变，得到的相对坐标就不变。这就是使用 Pivot 作为参考点的意义

在UE中，我们这样实现：
![我们先看前面的部分，后面的马上讲到](https://developer.qcloudimg.com/http-save/yehe-12898113/a57e864f0015b035502c59864f830f2f.png)
**节点解析**
ObjectPivotPoint：它输出当前正在渲染的这个物体，其中心原点，对于一棵草来说，这个原点通常就在草的根部
绝对世界位置和ObjectPivotPoint相减：草叶当前世界高度 - 草根的世界高度
用mask的B通道提取Z轴： 表示当前顶点相对于 Pivot 的高度差，而我们之所以需要这个高度，是因为希望草叶不同高度的顶点产生不同的弯曲结果

### 2.2 根据顶点高度计算一个角度

![我们看后半部分，Radiuse节点的详情在下面](https://developer.qcloudimg.com/http-save/yehe-12898113/97bac0b96da4dece0840fddb3ba7fc69.png)

![Radius，就是弧长公式中的那个r](https://developer.qcloudimg.com/http-save/yehe-12898113/697f757f617db40d1517a9514d9db068.png)
因为$$Radius = Hight / BendAngle(弧度)$$
我们使用$$P_{\text{relative}}=P-O$$，也就是草尖距离草根的距离，除以2π r(圆周长)
得到的是“当前圆弧占整个圆的百分比，范围在0到1之间
接着，我们将**cosine** **sine**节点的细节面板中的周期改成1.0，这样就可以相连了

## 第三章：草弯曲时点的坐标位置

### 3.0 如何算P点的坐标

![请添加图片描述](https://developer.qcloudimg.com/http-save/yehe-12898113/5335399be637ffe2774d1d0c48827533.jpg)
我们要算P点的坐标，画图很容易算出：
因为是在圆的左侧，X坐标是向后退的，所以水平坐标是Xc 减去一个投影长度：xc−r⋅cosθ 
垂直坐标是向上翘的：y =r⋅sinθ

在UE中，我们这样实现：
### 3.1 蓝图中算P位置
先看Distan函数和Tangent函数

先说明BenDir函数里的节点是Input Bend Direction (Vector2) -> Normalize -> BendDir
其中：
Input Bend Direction：输入风向

Normalize：核心！把长度变成1，只留方向

BendDir：输出变量，供后续计算使用

这三个节点做的事情非常明确：把输入的任意风向向量，强行“归一化（Normalize）”成单位向量，提取出纯粹的“方向

现在就可以看下面的这张图了
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-12898113/aa4dc5d899c16e8535a01a9667c0ff27.png)
先看Tangent函数：

BendDir是一个二维向量
Mask(G)提取y
Mask(R)提取x，再经过乘-1，得到-x
Mask(G)提取yAppend的得到
$$T = (y, -x)$$
它实际上是在计算一个与BendDir垂直的向量，因为这两个向量点积等于0
$$（x， y） * （y， -x） = xy - xy  = 0$$

T向量与BendDir向量垂直，与向量P进行点积，计算出位置向量P在T上的投影
Multiply将T乘以投影向量长度，输送到Tangent
数学表达：
$$Tangent = T(P * T)$$
总的来说，Tangent是计算当前位置在垂直于弯曲方向的方向上偏移了多少
下两张图有直观展示，如还有疑惑可往下翻翻见**向量演示**这一模块

接下来就是Distance函数，这个函数就很简单了
位置向量P直接与向量BendDir进行点积
输送到Distance
数学展示：
$$Distance = P * BendDir$$
得到位置向量在弯曲方向上的投影长度

![](https://developer.qcloudimg.com/http-save/yehe-12898113/6b5c36a2aa732b0591aec7c52a4e5743.png)
Radius：圆弧半径。
Distance：当前位置沿弯曲方向的投影。
Radius - Distance：当前位置(当前位置在绿色线，我们要算的是P点，不要弄混）与圆心之间的剩余半径距离（这是该模型采用的几何定义）。
Sin、Cos：根据旋转角度计算圆弧上的两个方向分量。
Tangent：保留垂直于弯曲方向的位置分量。

上面的节点主要做的就是
$$  x = R - (Radius - Distance)cosθ$$
将得到的x乘以BendDir，这样就将一维的数变成有方向的二维向量
加上Tangent，Tangent 的值是通过顶点相对于中心轴的偏置距离（投影点乘）算出来的。这意味着越靠近叶片边缘的点，它的切线扭曲越大
P = Distance * BendDir + Tangent。在顺着风倒的基础上，加上边缘的扭曲偏移，让根部与尖端受风力度不一样，叶子看起来更生动

$$ y = (Radius - Distance)sinθ$$

Append（拼装节点）：

A 接刚才算出的水平坐标（XY）

B 接刚才算出的垂直高度（Z）

作用：把它们拼成一个完整的三维向量 (X, Y, Z)。这个向量就是草叶弯曲后的“目标绝对位置”


![上图中R是错误的，R是圆心到坐标原点的距离](https://developer.qcloudimg.com/http-save/yehe-12898113/0f163560c99d2221db188329e38db496.jpg)

## 第四章：算出偏移量
其实就是黄色线垂直和水平的长度
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-12898113/0081e446b0e90a78bc8d07be479a2d84.png)
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-12898113/0e9c401006db294c9c7d4c2329de1be5.png)
$$P_new = (R - r cosθ, r sinθ)$$
$$WPO = P_new - P_old$$


## 第五章：完整数学模型

### 5.1 输入

- 顶点世界位置 $P$。
- Pivot 位置 $O$。
- Radius 参数 $R$。
- Distance 参数 $D$。
- BendDir 方向。
- Tangent 方向。

### 5.2 中间变量
相对位置：
$$P_r=P-O$$

高度：$$z=P_r.z$$

圆弧半径：$$r=R-D$$

角度：$$\theta=\frac{z}{R\times2\pi}$$

圆弧坐标：
$$X'=R-r\cos\theta$$
$$Y'=r\sin\theta$$

### 5.3 输出

新位置：$$P_{\text{new}}=\text{Combine}(X',Y',BendDir,Tangent)$$

WPO：$$WPO=P_{\text{new}}-P$$
### 5.4 完整流程图

![mermaid diagram](https://developer.qcloudimg.com/http-save/yehe-12898113/3782f77cf2bf14b34c94f02f3084c071.png)

## 第十二章：知识检查

### 12.1 基础题

1. 为什么两个位置相减得到的是位移，而不是位置？
2. Mask(B) 提取的是哪个分量？为什么需要这个分量？
3. 如果 R=100，Distance=40，圆弧半径 r 是多少？

### 12.2 进阶题

1. 当 θ=0 时，圆弧起点的坐标是多少？请用 R 和 Distance 表示。
2. 为什么Cos 前面是减号？
3. 如果直接把新位置接到 WPO，会发生什么？

### 12.3 综合题

1. 请角度 θ 与顶点高度 z 的关系。
2. 请解释 BendDir 和 Tangent 分别参与什么计算。
3. 请说明为什么最后需要 Subtract 才能输出 WPO。

### 12.4 参考答案要点

1. 位移是两点之间的差，抵消了共有偏移。
2. B 通道对应 Z 分量，Z 是竖直方向，代表顶点相对草根的高度。
3. r=100-40=60。
4. 起点坐标为 $(Distance,0)$。
5. 因为圆弧从圆心向左起始，圆上点的水平坐标要用圆心减去水平投影。
6. 会叠加两次位移，草叶会飞出去。
7. $\theta=z/(R\times2\pi)$。
8. BendDir 决定弯曲水平朝向，Tangent 把二维圆弧映射到三维平面。
9. WPO 需要的是偏移量，必须用新位置减去原位置。

---

## 总结

1. 用 Mask(B) 取出顶点相对草根的高度。
2. 用高度除以 R 再除以 2π 得到角度。
3. 用 Sin 和 Cos 把角度映射成圆弧上的二维点。
4. 用 BendDir 和 Tangent 把二维点映射到三维空间。
5. 用新位置减去原位置，得到 WPO 偏移量。

只要把这五步串起来，之前那些看似零散的节点就会变成一条清晰的几何推导链。

假设一根草叶由多个顶点组成，原始状态下顶点沿着竖直方向排列：草根位于底部，草叶中部位于中间，草尖位于顶部。我们希望通过数学计算，让这些顶点按照一定的规律改变位置，最终形成一条弯曲的草叶。这里存在一个核心问题：如何根据一个顶点原来的位置，计算它弯曲之后应该到达的位置？ 我们使用圆弧几何来描述这种弯曲，它的数学过程可以概括为：

UE5学习文档：基于圆弧参数方程的草地风动 (WPO) 算法推导

架构设计

算法

客户端

UE5材质草叶弯曲核心算法：基于圆弧参数方程与三角函数，通过顶点高度计算弯曲角度，结合Sin/Cos映射圆弧坐标，BendDir与Tangent控制三维方向，最终输出WPO偏移实现自然风动效果。

对象存储COS新用户低至1元！


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

UE5学习文档：基于圆弧参数方程的草地风动 (WPO) 算法推导-腾讯云开发者社区-腾讯云

UE5学习文档：基于圆弧参数方程的草地风动 (WPO) 算法推导

UE5学习文档：基于圆弧参数方程的草地风动 (WPO) 算法推导

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐