Home▸Computer Science▸Frame Budget Optimization

Frame Budget Skyline 3D

A 3D skyline of frame-time bars marches toward the camera, each column's height showing how far a simulated frame's render cost, GC pause or layout thrash landed above or below the 16.7ms/60fps budget plane — with a tracked ball whose real-time jumps show the resulting stutter.

Computer Science3DEasy60 FPS📱 Mobile-adapted⇄ 2D version

Every simulated frame becomes one column in a 3D skyline that marches toward the camera, its height set by that frame's workload — steady render cost plus occasional GC pauses, layout thrash and slow-task spikes you can trigger. A budget plane marks the 1000/targetFPS ceiling: columns that break through it were janky frames, and how far they broke through decides their color. A tracked ball riding a rail beside the skyline turns that same data into a felt stutter — it advances each generated frame by an amount proportional to that frame's real duration, so a run of over-budget frames makes it visibly leap instead of gliding smoothly, exactly like a UI that stalls and then jumps.

⚙ Under the hood

Visualize each frame as an instanced bar moving towards the camera. The translucent budget plane cuts through these bars, showing which ones exceed the budget and cause drops.

performanceoptimizationgamingmobile

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install