Skip to content
← All insights
Engineering

WebGL without the lag: how we keep 3D sites at 60fps

Immersive does not have to mean slow. The budget-first rules we follow on every 3D build.

A 3D website that stutters feels worse than no 3D at all. Every immersive build at Urja Lab starts with a frame budget: 16 milliseconds per frame, shared between the browser, your JavaScript and the GPU.

One canvas, many views

Browsers cap the number of WebGL contexts a page can hold, and every context duplicates memory. We render the whole page through a single canvas and draw each section into its own scissored viewport. Sections that are off-screen skip rendering entirely.

Move work to the GPU

Particle systems animate in the vertex shader, not in a JavaScript loop. Repeated objects such as desks, nodes and LEDs are instanced, so a hundred meshes cost one draw call.

Adapt, do not assume

We measure frame rate at runtime and lower the pixel ratio when a device struggles. Phones get fewer particles and simpler meshes automatically, and visitors who ask for reduced motion get a calmer experience.

Building something similar?

Talk to Urja Lab