← Knowledge Base
WebGLR3FPerformance

WebGL Performance Budgets for Enterprise UIs

How Stitchaxis keeps a single persistent R3F canvas cinematic without tanking INP — adaptive DPR, bloom fallbacks, and transform-only motion contracts.

JRJonah ReyesRealtime Graphics9 min · Updated 2026-07-18

One canvas rule

Spawning a new WebGL context per route melts demo laptops. Stitchaxis marketing uses 2D depth + motion; tool pages use paper asset sockets — never a nested Canvas per route.

Dashboard and admin surfaces dim or blur that layer instead of unmounting it — context warm-start stays intact while data density wins the foreground.

Adaptive DPR and bloom fallbacks

Pair PerformanceMonitor with a DPR ceiling. When frame time climbs, drop pixel ratio before killing post-processing. Bloom is a privilege, not a right — fall back to unlit materials when the GPU protests.

Disable antialias on the renderer for dense HUD routes. Operators notice jank more than 1px stair-steps on cyan LED edges.

Motion contract: transform and opacity only

Framer Motion and GSAP must animate transform and opacity exclusively. Layout-affecting tweens fight Lenis and inflate CLS. Scroll entrances use viewport once: true so React does not re-subscribe forever.

Live telemetry belongs in DOM refs, not setInterval → setState loops that re-render the entire marketing tree every frame.

Ship with an explicit budget

Publish a budget: ≤1 WebGL context, ≤3 post-process passes on marketing, zero perpetual React animation loops, and a hard INP target under 200ms on mid-tier laptops. Treat regressions as release blockers.