曲線・補間

エルミート曲線

Cubic Hermite Curve

両端の位置と接線で曲がる軌道を指定する。

1 / 10

インタラクティブデモ

デモを準備しています…

エルミート曲線

ドラッグで視点を回転、Ctrl(⌘)+ スクロールでズーム。タッチ操作は 2 本指です。

ひとことで

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

ゲームでの使いどころ

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

しくみ

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

P(t)=h00(t) P0+h10(t) T0+h01(t) P1+h11(t) T1\mathbf{P}(t) = h_{00}(t)\,\mathbf{P}_0 + h_{10}(t)\,\mathbf{T}_0 + h_{01}(t)\,\mathbf{P}_1 + h_{11}(t)\,\mathbf{T}_1 h00(t)=2t3−3t2+1,h10(t)=t3−2t2+t,h01(t)=−2t3+3t2,h11(t)=t3−t2\begin{aligned} h_{00}(t) &= 2t^3 - 3t^2 + 1, & h_{10}(t) &= t^3 - 2t^2 + t,\\ h_{01}(t) &= -2t^3 + 3t^2, & h_{11}(t) &= t^3 - t^2 \end{aligned}

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

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

実装のポイント

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

つまずきやすい点

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

デモで試すこと

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

参考資料

Autodesk — Hermite Curve ↗