High-FPS Interactive UI

P95 frame time: 48ms → 14ms. 60fps sustained on mid-range Android.

Profiled and rebuilt the rendering pipeline for Canvas/WebGL interactive game UIs. Moved expensive logic off the main thread into Web Workers, batched draw calls with a custom sprite atlas, and implemented object pooling to eliminate GC pauses. Sustained 60fps on mid-range devices; P95 frame time dropped from 48ms to 14ms.

WebGL canvas apps dropped to 20fps on mid-range Android devices under load

Highlights

• Web Worker offload: physics calculations and collision detection moved off the main thread via OffscreenCanvas + Comlink — freed ~12ms/frame on the main thread.
• Sprite atlas packing: replaced 200+ individual texture loads with a single 2048×2048 atlas generated at build time — GPU state changes per frame dropped from ~180 to ~12.
• Object pooling for projectiles and particles: pre-allocated pools of 500 objects, reused via free-list — GC pauses that caused 80ms+ frame spikes eliminated entirely.
• requestAnimationFrame scheduling with a fixed timestep accumulator: game logic runs at a stable 60 ticks/sec regardless of display refresh rate (60/90/120Hz).
• In-app purchase flow built on top: React UI layer communicates with the WebGL layer via a message bus — payment confirmation triggers an in-canvas animation without any coupling between the two rendering contexts.

See full portfolio: https://portfolio.kunal-gautam-570.workers.dev