Hermite 与 Bezier 曲线的转换公式

最新推荐文章于 2024-09-14 11:29:04 发布

CoderHustlion

最新推荐文章于 2024-09-14 11:29:04 发布

阅读量2.4k

点赞数 9

分类专栏：游戏开发算法

本文链接：https://blog.csdn.net/techfield/article/details/113744152

版权

Hermite曲线 Bezier曲线转换公式矩阵运算控制点

关键词由CSDN通过智能技术生成

游戏开发同时被 2 个专栏收录

28 篇文章

订阅专栏

算法

3 篇文章

订阅专栏

简介

本文给出 Hermite 与 Bezier 曲线互转的公式及其推导过程。

Bezier 曲线

$\mathbf{p}(t) = \mathbf{p}_0 B_0(t) + \mathbf{p}_1 B_1(t) + \mathbf{p}_2 B_2(t) + \mathbf{p}_3 B_3(t), t \in [0, 1]$
其中：
$\begin{aligned} B_0(t) &= (1 − t)^3 \\ B_1(t) &= 3(1 − t)^2t \\ B_2(t) &= 3(1 − t)t^2 \\ B_3(t) &= t^3 \end{aligned}$

矩阵形式：

$\mathbf{p}(t) = \begin{bmatrix} 1 & t & t^2 & t^3 \end{bmatrix}\begin{bmatrix} 1 & 0 & 0 & 0 \\ -3 & 3 & 0 & 0 \\ 3 & -6 & 3 & 0 \\ -1 & 3 & -3 & 1 \end{bmatrix} \begin{bmatrix} \mathbf{p}_0 \\ \mathbf{p}_1 \\ \mathbf{p}_2 \\ \mathbf{p}_3 \end{bmatrix}$

Hermite 曲线

$\mathbf{q}(t) = \mathbf{q}_0 H_{00}(t) + \mathbf{u}_0 H_{10} (t) + \mathbf{q}_1 H_{01}(t) + \mathbf{u}_1 H_{11}(t), t \in [0, 1]$
其中：

$\begin{aligned} H_{00}(t) &= (1 + 2t)(1 − t)^2 \\ H_{10}(t) &= t(1 − t)^2 \\ H_{01}(t) &= t^2(3 − 2t) \\ H_{11}(t) &= −t^2(1 − t) \end{aligned}$

矩阵形式：

$\mathbf{q}(t) = \begin{bmatrix} 1 & t & t^2 & t^3 \end{bmatrix}\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ -3 & -2 & 3 & -1 \\ 2 & 1 & -2 & 1 \end{bmatrix} \begin{bmatrix} \mathbf{q}_0 \\ \mathbf{u}_0 \\ \mathbf{q}_1 \\ \mathbf{u}_1 \end{bmatrix}$

转换公式

推导

将 hermite 和 bezier 的参数写成矩阵 $C_h$ 和 $C_b$ ，如下：

$\begin{aligned} C_h &= \begin{bmatrix} \mathbf{q}_0 \\ \mathbf{u}_0 \\ \mathbf{q}_1 \\ \mathbf{u}_1 \end{bmatrix}\\ C_b &= \begin{bmatrix} \mathbf{p}_0 \\ \mathbf{p}_1 \\ \mathbf{p}_2 \\ \mathbf{p}_3 \end{bmatrix} \end{aligned}$

由于 bezier 和 hermite 是等价的，有：

$\begin{aligned} x(t) &= \begin{bmatrix}1&t&t^2&t^3\end{bmatrix}M_bC_b \\ &= \begin{bmatrix}1&t&t^2&t^3\end{bmatrix}M_hC_h \end{aligned}$

其中矩阵 M 是 hermite 和 bezier 矩阵形式中间的那个矩阵。

于是：

$M_bC_b = M_hC_h$

所以有：
$\begin{aligned} C_b &= M_b^{-1}M_hC_h \\ &= \begin{bmatrix}1 & 0 & 0 & 0 \\1 & 1/3 & 0 & 0 \\1 & 2/3 & 1/3 & 0 \\1 & 1 & 1 & 1\end{bmatrix} \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ -3 & -2 & 3 & -1 \\ 2 & 1 & -2 & 1 \end{bmatrix} C_h \\ &= \begin{bmatrix} 1 & 0 & 0 & 0 \\ 1 & 1/3 & 0 & 0 \\ 0 & 0 & 1 & -1/3 \\ 0 & 0 & 1 & 0 \end{bmatrix} C_h \end{aligned}$

所以，Herimite 控制参数与 Bezier 控制参数的关系是：

$\begin{aligned} \begin{bmatrix} \mathbf{p}_0 \\ \mathbf{p}_1 \\ \mathbf{p}_2 \\ \mathbf{p}_3 \end{bmatrix} = \begin{bmatrix} 1 & 0 & 0 & 0 \\ 1 & 1/3 & 0 & 0 \\ 0 & 0 & 1 & -1/3 \\ 0 & 0 & 1 & 0 \end{bmatrix} \begin{bmatrix} \mathbf{q}_0 \\ \mathbf{u}_0 \\ \mathbf{q}_1 \\ \mathbf{u}_1 \end{bmatrix} \end{aligned}$

Hermite 转 Bezier

由推导的公式，可知：

$\begin{aligned} \mathbf{p}_0 &= \mathbf{q}_0 \\ \mathbf{p}_1 &= \mathbf{q}_0 + \frac{\mathbf{u}_0}{3} \\ \mathbf{p}_2 &= \mathbf{q}_1 - \frac{\mathbf{u}_1}{3} \\ \mathbf{p}_3 &= \mathbf{q}_1 \end{aligned}$

Bezier 转 Hermite

由推导的公式，可知：
$\begin{aligned} \mathbf{q}_0 &= \mathbf{p}_0 \\ \mathbf{u}_0 &= 3(\mathbf{p}_1 - \mathbf{p}_0) \\ \mathbf{q}_1 &= \mathbf{p}_2 \\ \mathbf{u}_1 &= 3(\mathbf{p}_3 - \mathbf{p}_2) \end{aligned}$

转换效果示例

可以看到，两条曲线完美重合。

上图为 Tikz 绘制，绘制代码为：

\begin{tikzpicture}[scale=8]
\draw[help lines,thick,color=gray,step=.5cm,
dashed] (0,0) grid (1,1);
\draw[->] (-0.2,0) -- (1.2,0) node[right] {$x$};
\draw[->] (0,-0.2) -- (0,1.2) node[above] {$y$};
% 0, 1, 0, 1 for bezier
\draw[scale=1,domain=0:1, samples=50, smooth, variable=\x,blue] plot ({\x},{ 0 * (1 - \x) ^ 3 + 3 * 1 * (1 - \x)^2 * \x + 3 * 0 * (1 - \x) * \x ^ 2 + \x ^ 3});
\node[down] at (0, 0.8) {$f(x) = 0 * B_0(x) + 1 * B_1(x) + 0 * B_2 (x) + 1 * B_3 (x)$};

\draw[scale=1,domain=0:1, samples=50, smooth,variable=\x,red] plot ({\x},{
0 + 3 * 1 * \x * (1 - \x) ^ 2 + 1 * \x ^ 2 * (3 - 2 * \x) + 3 * 1 * (-1) * \x ^ 2 * (1 - \x)
});
\node[down] at (1, 0.2) {$f(x) = 0 * H_{00}(x) + 3 * H_{10}(x) + 1 * H_{01}(x) + 3 * H_{11}(x)$};
\end{tikzpicture}