This explanation is currently available in Japanese.
ひとことで
曲線のパラメータ と「曲線に沿って進んだ距離(弧長)」の対応表を作り、距離から を逆引きする手法です。ほとんどの曲線は を一定に増やしても一定の速さでは進まないため、「一定速度で動かす」「等間隔に物を並べる」ときに欠かせません。
ゲームでの使いどころ
- 一定速度の移動:レール上のカメラ、乗り物、弾、パトロールする敵。速度むらはプレイヤーにすぐ気づかれます。
- 等間隔の配置:道路の白線、柵の杭、街灯、ロープの結び目などを曲線に沿って等間隔に置く。
- 進捗の表示:「コース全体の何 % まで来たか」を距離で計算するレースの順位判定やミニマップ。
- テクスチャの貼り付け:曲線に沿ったリボンや道路メッシュに、伸び縮みのない UV を与える。
しくみ
弧長は、速度ベクトルの大きさを積分したものです。
ほとんどの曲線でこの積分は解析的に解けないため、実用では数値的な表を作ります。
- を 等分し、各点 を求める。
- 隣り合う点の距離を累積して の表を作る(折れ線近似)。
- 距離 が与えられたら、表を二分探索して となる を見つけ、区間内を線形補間して を得る。
デモ右下のグラフは (全長で正規化)です。等速なら点線の直線になるはずが、実際には曲がっています。傾きが緩い区間は が進んでも距離が伸びない、つまり遅い区間です。
実装のポイント
- 表は形が変わったときだけ作り直す:毎フレーム作る必要はありません。制御点を編集したときに再計算します。
- three.js:
Curve.getPointAt(u)とgetSpacedPoints(n)はこの表(getLengths)を内部で使っています。 - 精度の目安:分割数はカーブの急さ次第ですが、ゲームでは 100〜200 程度で十分なことがほとんどです。ニュートン法で を補正するとさらに精度を上げられます。
つまずきやすい点
- 分割数が少ないと速度むらが残る:表の区間内は直線とみなしているので、急カーブでは誤差が出ます。デモで分割数を 3〜5 にすると、水色の車もぎくしゃくします。
- 閉じた曲線の継ぎ目:ループするコースでは、(全長)と が同じ点になるよう、剰余の扱いに注意します。
- 速度が可変の場合:加減速したいなら、距離 自体を時間の関数(イージングや物理)で動かし、その から を引きます。「速さの設計」と「形の設計」を分離できるのがこの手法の利点です。
デモで試すこと
- 赤い車( を一定に増やす)は、通過点が詰まった左上のカーブで遅くなり、間隔の広い長い直線で急加速します。水色の車(弧長)は常に同じ速さです。
- 「等間隔の目盛り」の赤い点は を等間隔にした位置、水色は距離を等間隔にした位置です。赤は偏り、水色は均等に並びます。
- 「弧長テーブルの分割数」を 3 にすると、表が粗すぎて水色の車にも速度むらが出ます。