Frame Budget Skyline 3D | mysimulator.uk

Frame budget

Render cost 6.0 ms

GC pause chance 4%

GC pause length 45 ms

Main-thread events

Frame time

–

Budget

–

Dropped frames

–

Effective FPS

–

—

How it works

Same frame-budget mechanic as the 2D version, rendered as a skyline: every generated frame becomes one column of an InstancedMesh that spawns at the horizon and marches toward the camera along Z, its height scaled to that frame's simulated workload in milliseconds. A translucent budget plane sits at the 1000/targetFPS height — any column that pokes through it was a janky frame, colored by how far it overshot. A tracked ball on the rail beside the skyline is the "perceived stutter" readout: instead of moving a fixed distance per render tick, it advances along the rail by an amount proportional to each generated frame's real duration, so on a run of over-budget frames it visibly leaps ahead in a burst rather than gliding — the same effect as a scrolling list jumping after a stall on a real device.

budget = 1000 / targetFPS
workload = renderCost + jitter + (GC roll < p ? gcLen : 0) + spikes
columnHeight ∝ workload;  janky = workload > budget
ballRailX += workload * railSpeed   // stutter = uneven step size

Render cost — steady per-frame work; raises the whole skyline's baseline height.
GC pause chance / length — a rare tall red spike among mostly-green columns, the classic isolated dropped frame.
Layout thrash / Slow task — one-off spikes you trigger, each charged to exactly the next column.
Orbit the camera to see the budget plane cut through the skyline from any angle — columns above it are the frames a user would feel as a stutter.

within budget over budget (jank) severe (>2× budget) tracked ball (perceived motion)

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.