カメラとアニメーション — 指数関数となめらかさ

中継カメラが馬群をなめらかに追いかける仕組みを、微分方程式とその解 (指数関数) で説明します。「毎フレーム 1 割近づける」というよくある書き方が、なぜ画面によって速さが変わってしまうのか、そしてどう直すのか。

#線形補間 (lerp)

2 つの値 $x$ と $g$ の間を、割合 $k$ ($0 \le k \le 1$) だけ進んだ点は

です。$k = 0$ なら $x$ のまま、$k = 1$ なら $g$ に一致します。3D のカメラは毎フレーム、現在の位置 $x$ を目標の位置 $g$ (集団の横) へ lerp で少しずつ近づけています。

#よくある書き方の問題 — 速さがフレームレートで変わる

いちばん簡単なのは、毎フレーム同じ割合 (たとえば $k = 0.08$) だけ近づける書き方です。$n$ フレーム後には、残りの距離が

になります。問題は「1 秒が何フレームか」が画面によって違うことです。1 秒後の残りは

• 30 fps: $0.92^{30} \approx 0.082$
• 60 fps: $0.92^{60} \approx 0.0067$
• 144 fps: $0.92^{144} \approx 0.0000062$

同じプログラムなのに、144Hz のモニターではカメラが 30 fps のときよりはるかに速く動いてしまいます。

#時間で考える — 微分方程式

「フレームごと」ではなく「時間ごと」に動きを決めるため、連続的な時間 $t$ での変化を考えます。

「目標までの残りに比例した速さで近づく」という式です ($\lambda$ は近づく速さの係数、単位は 1/秒)。残り $y = g - x$ と置くと $dy/dt = -\lambda y$ となり、これは「自分の大きさに比例して減る」量なので、解は指数関数です。

1 フレーム ($\Delta t$ 秒) の間にこの式どおり動かすには、残りを $e^{-\lambda \Delta t}$ 倍にすればよいので、lerp の係数を

にします。アプリの中継カメラは $\lambda = 2.5$ です。

const k = 1 - Math.exp(-real * 2.5);
this.camPos.lerp(pos, this.t === 0 ? 1 : k);

#フレームレートに依存しない証明

$\Delta t_1$ 秒と $\Delta t_2$ 秒の 2 フレームで進んだときの残りは

で、「$\Delta t_1 + \Delta t_2$ 秒を 1 フレームで進んだ場合」と完全に同じです。指数関数の $e^a e^b = e^{a+b}$ という性質のおかげで、フレームの区切り方 (= フレームレート) に関係なく、時刻 $t$ での位置が同じになります。

#半減期と時定数

残りが半分になるまでの時間 (半減期) は $e^{-\lambda t} = 1/2$ を解いて

また $1/\lambda = 0.4$ 秒を 時定数 と呼び、この時間で残りが $e^{-1} \approx 37\%$ になります。中継カメラは「0.3 秒ほどで半分、1 秒で 9 割以上追いつく」速さで動いている、ということです。

#映像を安定させる小さな工夫

#1 フレームの時間に上限をつける

const real = Math.min(this.clock.running ? this.clock.getDelta() : 0, 0.05);

ブラウザのタブを裏に回すと、描画が止まり、戻ったときに「前のフレームから 10 秒たった」ことになります。そのまま計算するとレースが一瞬で進み、ゴールの判定も飛んでしまうので、1 フレームの時間を最大 0.05 秒 (20 fps 相当) に制限しています。

#脚の速さを走る速さに合わせる

h.act.timeScale = Math.max(0.35, h.v / 15);

駆け足 (Gallop) のアニメーションの再生速度を、馬の速度 $v$ (m/s) に比例させています ($v = 15$ で等速)。地面を滑っているように見えない、という見た目のための調整です。

#速度の平滑化

h.v += (v - h.v) * 0.2;

フレームごとの速度 $(x_\text{今} - x_\text{前}) / \Delta t$ はガタガタするので、指数移動平均 (毎回 2 割だけ新しい値に寄せる) でならしています。こちらはフレームごとの固定係数なので、厳密にはフレームレートに依存しますが、見た目への影響は小さいため簡単な形にしています。

#順位表の更新を間引く

左上の順位表 (HTML) は毎フレームではなく、0.12 秒に 1 回 (約 8 回 / 秒) だけ作り直しています。HTML の作り直しは 3D の描画より重いことがあり、人の目には 8 回 / 秒で十分滑らかに見えるからです。