Interpolation（補間）とは？Fixed Time Stepを滑らかにする最重要技術

1.Fixed Time Stepを滑らかに見せる最後のピース

#09 Fixed Time Step の記事で Fixed Time Step を導入しました。

• update は 固定時間で進む
• 描画（render）は モニターのフレームレートで呼ばれる

ここで問題が起きます。

なにが問題？

Fixed Time Stepでは、例えば

const fixedDelta = 16.67; // 60fps相当

で update が進みます。

つまりオブジェクトの位置は

0px → 5px → 10px → 15px → 20px

のように「カクカク」更新されます。

でも render はモニターの更新タイミングで呼ばれます。

• 60Hzなら問題なし
• 144Hzなら？
• 不安定なfpsなら？

👉 描画タイミングと更新タイミングがズレる

その結果、

「物理計算は正しいのに、見た目がカクつく」

という状態になります。

2.Interpolation（補間）とは？

補間とは、

「前の状態」と「次の状態」の間を滑らかにつなぐこと

です。

Fixed Time Step ではすでに

• previous state
• current state

が存在します。

そこで render 時に

interpolated = previous + (current - previous) * alpha;

のように「中間値」を計算します。

alphaって何？

alpha は 0〜1 の値。

alpha = accumulator / fixedDelta;

accumulator は

「まだ update に使われていない余り時間」

でしたね。

つまり：

• alpha = 0 → 直前の状態
• alpha = 1 → 次の状態
• alpha = 0.5 → ちょうど中間

という意味です。

3.なぜこれで滑らかになる？

update は固定刻み（16.67ms）ですが
render はそれより細かく呼ばれる可能性があります。

そのたびに

「途中の状態」を計算して描画すればいい。

結果：

✔ 物理は安定
✔ 見た目は滑らか

両立できます。

4.実装イメージ（最小構成）

let previous = 0;
let current = 0;
let accumulator = 0;
const fixedDelta = 16.67;

function loop(now) {
  const delta = now - lastTime;
  lastTime = now;
  accumulator += delta;

  while (accumulator >= fixedDelta) {
    previous = current;
    current += velocity * (fixedDelta / 1000);
    accumulator -= fixedDelta;
  }

  const alpha = accumulator / fixedDelta;
  const interpolated = previous + (current - previous) * alpha;

  render(interpolated);

  requestAnimationFrame(loop);
}

重要なのはここ：

previous = current;

を update の直前で保存している点。

これがあるから補間できる。

5.Interpolationはどこで使う？

シリーズ全体で見ると：

• #09 Fixed Time Step → 時間を安定させる
• #10 状態管理統合 → 状態を分離する
• #11 Interpolation → 描画を滑らかにする

という役割分担です。

Interpolationは

update と render を完全分離した設計の仕上げ

です。

6.実験：補間ON / OFF比較

このデモでは、Fixed Time Step（60Hz固定更新）で動くオブジェクトに対して、

• 🔴 update位置（固定刻み）
• 🔵 render位置（補間済み）

を同時に描画しています。

🔍 観察ポイント

1. Render FPS を 15 に下げる
2. Interpolation を OFF にする

→ 赤と青が重なり、ガタガタの階段状になります。

次に Interpolation を ON にすると、

→ 青が赤の間を滑らかに移動します。特に fps を 30 に落とすと違いが明確。

なぜ差が出る？

OFFの場合：

位置は16msごとにジャンプ
描画はバラバラ

ONの場合：

描画のたびに中間位置を計算

だから滑らか。

🎯 よくある誤解

❌ Interpolation = easing？

違います。

• easing → 速度変化の演出
• interpolation → 状態間の補間

目的が違います。

7.まとめ

Interpolationとは：

Fixed Time Step の副作用（カクつき）を解決する仕組み

✔ update は固定
✔ render は自由
✔ 中間値を描く

これで

安定 × 滑らか

が完成します。

8.次回

#12 Canvas統合では、

この補間済みの値を使って
実際の描画に組み込みます。

ここから「設計」から「画面」へ進みます。

🔎 このラボの全体像はこちら
→ UI Architecture Roadmap