Svaka agencija koja se bavi premium web dizajnom danas ima Three.js u portfoliju. Sferе koje se rotiraju, particleovi koji prate kursor, 3D scene koje reaguju na skrol — sve to izgleda sjajno u demo videu. Malo ko govori šta se dešava na Samsung Galaxy A32 klijentovog korisnika.
Problemi koje niko ne najavljuje
Bundle size
Three.js cijela biblioteka je ~600KB minified. Sa geometrijama, shader materijalima i post-processing efektima, lako dođeš do 1-1.5MB JavaScript-a samo za 3D scenu. Na sporoj mobilnoj mreži to je 3-5 sekundi do interaktivnosti. Za korisnika koji je kliknuo na Google oglas i čeka — to su tri sekunde koje završavaju na Back dugmetu.
GPU performanse na mobilnom
Desktop GPU može renderovati kompleksnu scenu na 60 FPS bez problema. Mali mobilni GPU — posebno mid-range Android telefoni koji su ogromna većina srpskog tržišta — može pasti na 15-20 FPS ili se grejati i throttlovati do usporavanja.
WebGL dostupnost
WebGL 2.0 ne podržavaju svi browseri na svim uređajima. Stari iOS Safari, corporate browseri, Chromebooks sa integrated GPU — sve to može da prikaže blank screen gdje treba da bude tvoja 3D scena.
Pravilo koje koristimo: 3D scena mora biti vizuelni bonus, ne sadržaj koji nosi informaciju. Sajt mora raditi savršeno i bez nje.
Kako to radimo mi
1. Dinamički import sa Suspense
Three.js se nikad ne učitava u prvom bundle-u. Koristimo dynamic import koji pokreće učitavanje tek kada korisnik dođe blizu elementa (IntersectionObserver sa 300px margin). Korisnici koji nikad ne skroluju do 3D sekcije nikad ne preuzimaju tu biblioteku.
2. Mobile detekcija i graceful degradation
Na mobilnim uređajima, pixel ratio se ograničava na 1 (umesto 2x ili 3x na retina ekranima), broj particleova se prepolovljuje, shadow mapping se gasi, i kompleksne geometrije se zamjenjuju nižim polygon brojem. Animacija je ista, GPU teret je 70% manji.
3. Shader umesto 3D geometrije kada je moguće
GLSL shader koji renderuje efekt na punoj 2D ravni je dramatično jeftiniji od 3D mesh-a sa istim vizuelnim efektom. Naše pozadine za service kartice su shaderi — izgledaju kompleksno, troše malo.
4. IntersectionObserver za pause/resume
Svaka Three.js scena kod nas ima IntersectionObserver koji pauzira requestAnimationFrame kad scena nije vidljiva. Ako korisnik skroluje dalje, GPU se oslobađa. To nije optimizacija — to je osnovna kultura.
Kada 3D ima smisla
- Hero sekcija gdje korisnik provodi više od 3 sekunde
- Interaktivni konfigurator proizvoda (3D preview koji korisnik kontroliše)
- Data vizualizacija koja je korisniku lakše razumljiva u 3D
- Brending moment koji agencija može da dozvoli kao inicijalni loader
Kada 3D nije rešenje
- Stranice usluga gdje korisnik treba tekst i CTA, ne spektakl
- E-commerce listing stranice sa stotine produkata
- Blog i content stranice
- Bilo šta gdje Core Web Vitals score pada zbog 3D bundle-a
