90-odstotni CPU-bug v našem Cinema-Webu: Kako je React Three Fiber ožgal našo landing page

Škomijev screenshot z dne 2026-07-04, zjutraj: Chromov Task Manager je prikazal zavihek zer0onelab.com pri 87 % CPU. Steady state, ne vrh ob scrollanju. Prenosnik je standardni Intel-i7 poslovni notebook z integrirano HD 620 GPU — natanko ciljna skupina naše B2B cold-outreach kampanje.

Landing page je imela v hero sekciji React-Three-Fiber-Canvas z RS6 3D-modelom (auto-turntable), Bloom post-processingom, EnvironmentMap-refleksijami in DPR-rangeom `[1, 1.5]`. Izgledalo je impresivno. Na MacBook Pro M3. Na Intel HD 620: ne tako impresivno.

Kaj sprva ni delovalo

Prvi sum: Post-Processing. Bloom + Vignette + DPI-Scale so dragi. Deaktivirali smo Bloom — CPU je padel z 87 % na 82 %. 5 odstotnih točk za Bloom pri HD 620 je popolnoma verjetno, a očitno ne reši problema.

Drugi sum: Model-Poly-Count. RS6-model smo znižali s 293k na 148k trikotnikov. CPU je padel z 82 % na 79 %. Spet verjetno, a jedro problema nerešeno.

Tretji sum: EnvironmentMap. Deaktivirano. CPU na 74 %. Tudi to je prispevalo — a še vedno smo bili 30 % nad ciljnim proračunom 40 %.

Pravi Root Cause

Bug je bil v GPU-Tier-detekciji. Imeli smo `detectGPUTier()`-klic, ki je na vseh računalnikih proizvedel enako obnašanje — nikoli se ni odločil za „low-tier, skip the whole scene“. Vedno je odločil „mount the scene, use DPR 1.5“. Na MacBook M3 se to renderira pri ~5 % CPU. Na Intel HD 620 pri ~87 %.

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

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

Poleg tega: DPR znižan z `[1, 1.5]` na `[1, 1]` za mid-tier naprave. Poleg tega: IntersectionObserver, ki sceno v celoti unmount-a, ko canvas ni viden. Poleg tega: `VisibilityPause` — frame loop se ustavi, ko tab teče v ozadju.

Rezultat na Intel HD 620: 87 % → 4 %. Na MacBook M3: 5 % → 3 %. Fix pomaga vsem — uporabniki z discrete-GPU ne izgubijo vizualne kvalitete, uporabniki iGPU dobijo delujočo spletno stran.

Zakaj smo to spregledali

Razvijali smo samo na Macih. Škomijev notebook je edini redno testiran Intel-iGPU-računalnik v naši test-matriki. Bug je bil ves čas prisoten — nismo ga videli, ker ga naše razvojne mašine niso sprožile.

Lekcija: web-3D-performance je multi-device problem, ne single-machine problem. Feature, ki na MacBook M3 teče pri 5 % CPU, lahko na HD-620-notebooku teče pri 90 % CPU. Obe napravi sta veljavna ciljna skupina za B2B landing page.

Pravila, ki jih zdaj imamo

1. Za vsak R3F-element: najprej `detectGPUTier()`. Če low, popolnoma skip.
2. DPR nikoli privzeto nad 1. Če stranka želi high-DPR izkušnjo, jo lahko aktivira ročno.
3. IntersectionObserver za vse canvas-elemente. Nobenega renderiranja za elemente, ki niso vidni.
4. VisibilityPause vedno aktiven. Frame loop se ustavi pri document.visibilityState === "hidden".
5. Testni pipeline zdaj vsebuje iGPU-referenčno mašino (Intel HD 620 notebook). Noben deploy ne gre v produkcijo, če CPU na referenčni mašini v idle stanju presega 15 %.

Meta-lekcija

Impressive-looking-3D-web-content je trade-off, ne wow-feature. Trade-off je vedno: kateri razred naprav vaše ciljne skupine bo s tem izločen? Štiri tedne smo ~30 % naše B2B-ciljne skupine (uporabnike enterprise-notebookov) sprejemali z 87 %-CPU izkušnjo. To ni „impresivno“, to je „prodano pod ceno“.

Če na landing page uporabljate R3F, obvezno testirajte na Intel iGPU. Če jih nimate: RTX 3050 je dober baseline-kandidat za „mid-tier“ — kar na 3050 teče pri 20 % CPU, teče na HD 620 pri 40–60 %. Kar na 3050 teče pod 10 %, je safe za vse standardne poslovne notebooke.

Fix je dokumentiran v code-repositoryju in live na zer0onelab.com. Perf-fix-brief je del naših 3D-Rendering-Rules v LEKTIONEN-3D.md.