90-postotni CPU bug u našem Cinema Webu: kako je React Three Fiber pekao naš landing page

Škomijev screenshot od 2026-07-04, ujutro: Chromeov Task Manager pokazivao je tab zer0onelab.com na 87 % CPU-a. Steady state, ne peak pri scrollanju. Laptop je standardni Intel i7 business notebook s integriranim HD 620 GPU-om — točno ciljana skupina naše B2B cold-outreach kampanje.

Landing page imao je u hero sekciji React Three Fiber canvas s RS6 3D modelom (auto-turntable), Bloom post-processingom, EnvironmentMap refleksijama i DPR-rangeom `[1, 1.5]`. Izgledalo je impresivno. Na MacBook Pro M3. Na Intel HD 620: ne tako impresivno.

Što isprva nije funkcioniralo

Prva sumnja: post-processing. Bloom + Vignette + DPI-Scale su skupi. Deaktivirali smo Bloom — CPU je pao s 87 % na 82 %. Pet postotnih bodova za Bloom na HD 620 apsolutno je uvjerljivo, ali očito ne rješava problem.

Druga sumnja: Model-Poly-Count. Reducirali smo RS6 model s 293k na 148k trisa. CPU je pao s 82 % na 79 %. Opet uvjerljivo, ali osnovni problem nije riješen.

Treća sumnja: EnvironmentMap. Deaktiviran. CPU na 74 %. I to je pridonijelo — ali još uvijek smo bili 30 % iznad ciljanog budgeta od 40 %.

Stvarni root cause

Bug je bio u GPU-Tier-Detection. Imali smo `detectGPUTier()` poziv koji je na svim strojevima proizvodio isto ponašanje — nikada nije odlučio „low-tier, skip the whole scene". Uvijek je odlučivao „mount the scene, use DPR 1.5". Na MacBooku M3 to se renderira s ~5 % CPU-a. Na Intel HD 620 s ~87 %.

Fix u `src/components/lab-hero-r3f/index.tsx`:

```tsx const tier = detectGPUTier(); if (tier === "low") { return <StaticFallback />; // čisti CSS + video-loop } ```

Plus: DPR spušten s `[1, 1.5]` na `[1, 1]` za mid-tier uređaje. Plus: IntersectionObserver koji potpuno unmounta Scene kad canvas nije vidljiv. Plus: `VisibilityPause` — Frame-Loop staje kad tab radi u pozadini.

Rezultat na Intel HD 620: 87 % → 4 %. Na MacBooku M3: 5 % → 3 %. Fix pomaže svima — Discrete-GPU korisnici ne gube vizualnu kvalitetu, iGPU korisnici dobivaju website koji radi.

Zašto smo to previdjeli

U razvoju smo radili samo na Macovima. Škomijev notebook jedini je redovito testirani stroj s Intel iGPU-om u našoj test matrici. Bug je bio ondje cijelo vrijeme — nismo ga vidjeli jer ga naši development strojevi nisu triggerali.

Lekcija: Web 3D performance je multi-device problem, ne single-machine problem. Feature koji radi s 5 % CPU-a na MacBooku M3 može raditi s 90 % CPU-a na HD 620 notebooku. Oba stroja valjana su ciljana skupina za B2B landing page.

Pravila koja sada imamo

1. Za svaki R3F element: `detectGPUTier()` prvo. Ako je low, potpuno skip.
2. DPR nikada iznad 1 by default. Ako klijent želi high-DPR iskustvo, može ga manualno aktivirati.
3. IntersectionObserver za sve canvas elemente. Nema renderiranja za elemente koji nisu vidljivi.
4. VisibilityPause uvijek aktivan. Frame-Loop staje kod document.visibilityState === "hidden".
5. Testing pipeline sada sadrži referentni stroj s iGPU-om (Intel HD 620 notebook). Nijedan deploy ne izlazi van ako je CPU na referentnom stroju iznad 15 % u idleu.

Meta-lekcija

Impressive-looking 3D web content je trade-off, ne wow feature. Trade-off je uvijek: koja se klasa uređaja tvoje ciljane skupine time isključuje? Četiri tjedna smo ~30 % naše B2B ciljane skupine (korisnici enterprise notebooka) pozdravljali 87 %-CPU iskustvom. To nije „impressive", to je „prodano ispod vrijednosti".

Ako koristiš R3F na landing pageu, obavezno testiraj na Intel iGPU-ovima. Ako ih nemaš: RTX 3050 je dobar baseline kandidat za „mid-tier" — što na 3050 radi s 20 % CPU-a, na HD 620 radi s 40–60 %. Što na 3050 radi ispod 10 %, sigurno je za sve standardne business notebooke.

Fix je dokumentiran u code repozitoriju i live je na zer0onelab.com. Perf-Fix-Brief dio je naših 3D-Rendering pravila u LEKTIONEN-3D.md.