Cubic Hermite Curve

This explanation is currently available in Japanese.

ひとことで

始点と終点の位置、そしてそれぞれの点での接線（向きと勢い）の 4 つを指定して、その間を 3 次多項式でつなぐ曲線です。「ここから、この向きで出て、あそこへ、この向きで入る」という指定がそのまま形になるので、ゲームの軌道設計と非常に相性が良い曲線です。

ゲームでの使いどころ

• 曲がって飛ぶレーザー・誘導弾：発射口の向き（始点の接線）と着弾の向き（終点の接線）を決めるだけで、弧を描いて標的に吸い込まれる軌道が作れます。
• アニメーションカーブ：Unity の AnimationCurve や Unreal のカーブエディタのキー間補間は、キーの値と接線（タンジェント）で決まるエルミート補間です。
• スプラインのつなぎ目：カトマル・ロムは、エルミート曲線の接線を周囲の点から自動で決めたものです。
• ネットワーク同期の補間：受信した位置と速度（接線）を両端として補間すると、カクつかずに相手のキャラクターを動かせます。

しくみ

パラメータ $t \in [0, 1]$ に対して、位置 $\mathbf{P}_0, \mathbf{P}_1$ と接線 $\mathbf{T}_0, \mathbf{T}_1$ を 4 つの基底関数で重み付けして足します。

基底関数は「$t = 0$ で位置 $\mathbf{P}_0$、傾き $\mathbf{T}_0$」「$t = 1$ で位置 $\mathbf{P}_1$、傾き $\mathbf{T}_1$」という 4 つの条件をちょうど満たすように作られています。たとえば $h_{00}$ は $t=0$ で 1、$t=1$ で 0、両端での傾きが 0 です。デモ右下のグラフで、各重みが $t$ とともにどう変化するかを確認できます。

接線の長さも形に効きます。長い接線は「その向きを長く保つ」ことを意味し、曲線は大きく膨らみます。0 にすると単なる（smoothstep で加減速する）直線移動になります。

実装のポイント

• 接線の単位：$\mathbf{T}$ は「$t$ が 0→1 で進む間の変化量」です。速度 [m/s] から作る場合は所要時間を掛けます。これを忘れると、所要時間を変えたとたんに軌道の形が変わってしまいます。
• ベジェとの変換：$\mathbf{B}_1 = \mathbf{P}_0 + \mathbf{T}_0/3$、$\mathbf{B}_2 = \mathbf{P}_1 - \mathbf{T}_1/3$ とすれば 3 次ベジェ曲線として描けます。エディタのハンドル表示はこの関係を使っています。
• エフェクトとの組み合わせ：軌道上にリボン・トレイルを引き、先端にブルームをかけると、デモのような光る弾道になります。

つまずきやすい点

• 等速にはならない：$t$ を一定に増やしても、曲線上を進む速さは一定ではありません。弾速を揃えたいときは弧長パラメータ化が必要です。
• 接線が長すぎるとループする：接線を極端に長くすると、曲線が自己交差したり、始点の後ろに回り込んだりします。
• 標的が動く場合：終点が毎フレーム動くと軌道全体が揺れます。着弾予測位置を発射時に決めるか、終盤だけ追尾に切り替えるなどの工夫をします。

デモで試すこと

1. 光る球（端点）と、矢印の先の小さな球（接線）をドラッグしてください。砲台の向きと標的に入る向きがそのまま軌道に反映されます。
2. 「接線の長さ」を 0 にすると直線、3 まで上げると大きく膨らむ弧になります。
3. 右下のグラフで、弾が飛んでいる間に 4 つの重みがどう入れ替わるかを追ってみてください。