Client-side interpolation between ticks #2

New issue

Closed

opened 2026-03-16 06:58:10 +00:00 by kit · 0 comments

kit commented

2026-03-16 06:58:10 +00:00

Owner

The client currently snaps entities to their new positions each time a snapshot arrives. At 66 tick/sec this looks choppy, especially when network jitter causes uneven delivery.

Implement interpolation:

Buffer 2-3 snapshots and render between them (lerp position/angle)
Render at display refresh rate (requestAnimationFrame) while interpolating between tick states
Handle missing/late snapshots gracefully (extrapolate briefly, then hold)

This should happen in scene.js — store previous + current state per entity and lerp in the render loop based on elapsed time since last snapshot.

The client currently snaps entities to their new positions each time a snapshot arrives. At 66 tick/sec this looks choppy, especially when network jitter causes uneven delivery. Implement interpolation: - Buffer 2-3 snapshots and render between them (lerp position/angle) - Render at display refresh rate (requestAnimationFrame) while interpolating between tick states - Handle missing/late snapshots gracefully (extrapolate briefly, then hold) This should happen in `scene.js` — store previous + current state per entity and lerp in the render loop based on elapsed time since last snapshot.