3D na sajtu: kad ima smisla, a kad ga izbacujem

Kad 3D ima smisla

3D je koristan kad posetilac iz njega sazna nešto što ne bi saznao iz fotografije:

• prostor kroz koji se kreće: stan, kuća, lokal, sala;
• proizvod sa svih strana: nameštaj, mašina, ambalaža, nakit;
• konfiguracija: kupac bira boju, materijal ili delove i odmah vidi rezultat;
• predmet koji se teško fotografiše: eksponat, maketa, deo mašine.

Za neke delatnosti glavni sajt ima posebne strane: 3D sajt za nekretnine, za restoran, za galeriju i za muzej.

Konfigurator ne mora ni da bude 3D. Na sajtu Jupiter Planet boja majice se menja filterom preko jedne fotografije, pa kupac vidi svaku nijansu, sa senkama i naborima, bez 3D modela.

Šta 3D košta: brzina, baterija i greške

3D scena u pregledaču radi preko WebGL-a, na grafičkom procesoru, i radi sve vreme dok je vidljiva. To se plaća na nekoliko mesta.

Težina

Biblioteka za 3D, model i teksture preuzimaju se pre nego što scena krene. Prva verzija sajta Balkan RP (sopstveni demo, ne klijentski sajt) bila je Three.js scena u kojoj je samo jedan modul nosio 934 KB, previše za jednu naslovnu stranu. Posle preuzimanja scena troši procesor svake sekunde dok se strana gleda, a to se na telefonu oseti i na bateriji.

Uređaj bez WebGL-a

Neki uređaji nemaju WebGL: stariji telefon, isključen grafički sloj. Na sajtu Diamond Lux Kopaonik biblioteka za 3D je tada bacala grešku, a bez zaštitne komponente iznad nje padala je cela strana, ne samo scena. Sada zaštita hvata grešku i tiho vraća statičnu fotografiju planine. Biblioteka se učitava tek kad se potvrdi da WebGL postoji, u posebnom paketu, pa prvo učitavanje strane ostaje na 136 kilobajta, bez obzira na to da li će scena uopšte krenuti.

Spoljni fajlovi

Gotovo osvetljenje u nekim 3D bibliotekama preuzima fajl sa tuđeg servera, a bezbednosna pravila mojih sajtova takav zahtev odbijaju. Na sajtu Diamond Lux Kopaonik odbijeni zahtev obarao je prikaz, a na demou DJ Njace (sopstveni demo) scena je znala da ostane crna. Rešenje je na oba mesta isto, a na sajtu Kraljevi Čardaci primenjeno je unapred, da do greške ne dođe: svetla se postavljaju ručno, u kodu.

Telefon vidi drugi kadar

Kamera podešena za širok ekran na uspravnom telefonu seče scenu na uzak pojas. U prvoj verziji demoa DJ Njace telefon je video samo srednji deo scene, a svaki novi predmet donosio je kratko kočenje, jer grafička kartica materijale priprema tek kad nešto prvi put postane vidljivo. Oba problema su rešena, ali slojem koda koji postoji samo da ih pokrije.

Kad 3D ostaje: pravila

Kad 3D ima razlog da ostane, radim ga po ovim pravilima:

1. Posle prvog prikaza strane. Biblioteka se učitava naknadno, kad posetilac već vidi sadržaj. Na sajtu Halo City Leskovac, dok je scena postojala, ta izmena podigla je ocenu za telefon sa 88 na 92.
2. Provera pre montiranja. Kod prvo proverava da li pregledač ume da crta 3D. Ako ne ume, na tom mestu stoji mirna zamena i niko ne vidi grešku (Kraljevi Čardaci, Diamond Lux Kopaonik).
3. Na telefonu ništa, ili manje. Na sajtu Kraljevi Čardaci ispod 768 piksela širine nije bilo ni platna ni biblioteke. Na sajtu Kašmir Exclusive dekorativna scena je mirnija na manjim ekranima.
4. Bez teške obrade slike. Na sajtu Diamond Lux Kopaonik nema zamućenja ni sjaja preko cele scene, namerno: naknadna obrada je najskuplji deo i najčešći uzrok pada na slabijim telefonima.
5. Pauza kad se ne gleda. Scena na sajtu Halo City Leskovac stajala je kad kartica nije u prvom planu, a gustina piksela bila je ograničena odozgo.
6. Smanjen pokret se poštuje. Ko je u sistemu isključio animacije, ne dobija scenu (Diamond Lux Kopaonik, Halo City Leskovac), a na sajtu Kašmir Exclusive scena je tada mirnija.
7. Sadržaj ne zavisi od scene. Sve što piše na strani čita se i bez 3D-a (Kašmir Exclusive).

I scena ima svoj kontrast. Providan dijamant na toploj, skoro beloj pozadini sajta Diamond Lux Kopaonik prosto je nestajao, jer je prelamao belo u belo. Iza kamena danas stoji svetao, ledenoplav oreol, pa kamen ima šta da prelama i vidi se kao kristal. Kako se kontrast meri za tekst i boje, piše na strani Boje za sajt.

Kad sam 3D izbacio

Halo City Leskovac. Sajt radnje i servisa mobilnih telefona najčešće otvara neko kome je telefon u kvaru, često u autobusu, na slaboj vezi. WebGL scena sa šesnaest bledih kristala zato je u drugoj verziji sajta, početkom septembra 2026, uklonjena u celosti, zajedno sa three.js-om, bibliotekom za animacije i glatkim skrolom. U kodu sajta danas nema nijedne 3D zavisnosti.

Kraljevi Čardaci. Na računaru se u zaglavlju vrtela zlatna petlja rađena u React Three Fiber-u, treći pokušaj posle krune sa parom i mermernog obeliska, koji su odbačeni. U redizajnu, septembra 2026, zaglavlje je umesto scene dobilo fotografiju kompleksa, a biblioteka za 3D se više ne učitava ni na jednom uređaju. Razlika između tri scene nije bila tehnička: pitanje je bilo da li scena pristaje apartmanu koji se prodaje ozbiljnim kupcima.

DJ Njace (sopstveni demo). Prva verzija imala je pravu 3D scenu, sa gramofonom, mikserom, binom i slušalicama, kroz koju je kamera prolazila po skrolu. Svaki problem je popravljen i sajt je radio, ali za sajt koji treba da zaključi termin 3D je bio trošak bez uzvrata. U redizajnu su biblioteke za 3D, animaciju i meko skrolovanje obrisane i ničim nisu zamenjene.

Šta umesto 3D

Utisak pokreta ne traži uvek 3D scenu.

• Video koji prati skrol. Na oba moja sopstvena demoa, Balkan RP i DJ Njace, 3D scenu je zamenio film koji se pomera skrolom. Video se preuzme jednom i posle se samo dekoduje, za šta uređaj ima posebno kolo, dok 3D scena troši procesor svake sekunde. Kad je sadržaj ionako unapred određena putanja kamere, film je jeftiniji na svakom uređaju.
• CSS pokret. Sneg na sajtu Kraljevi Čardaci nije bio 3D, nego dvadesetak običnih elemenata sa CSS animacijom, na telefonu upola manje. Pozadinu na sajtu Halo City Leskovac danas crta sam pregledač iz nekoliko CSS pravila: dve meke mrlje boje, fina mreža i prsten koji se polako okreće i stoji kad je uključen smanjen pokret.
• Fotografija. Posle redizajna zaglavlje sajta Kraljevi Čardaci nosi fotografiju kompleksa umesto scene.

Pet pitanja pre nego što naručite 3D

1. Šta posetilac iz scene sazna, a ne bi iz fotografije?
2. Šta vidi telefon: istu scenu, manju ili ništa?
3. Ko menja model kad se proizvod ili prostor promeni?
4. Šta se prikazuje kad uređaj nema WebGL ili kad je uključen smanjen pokret?
5. Kako se meri da scena ne usporava stranu, na primer ocenom za telefon pre i posle?

Ako za svih pet pitanja postoji jasan odgovor, 3D ima razlog da uđe na sajt.

Kako izgleda izrada i od čega zavisi cena, piše na glavnom sajtu: izrada 3D sajtova, cena izrade 3D sajta, 3D animacija na postojećem sajtu i WebGL sajtovi. Kako se 3D uklapa u ceo posao, opisano je na strani Proces dizajna sajta.

Ako imate proizvod ili prostor koji bi 3D zaista pokazao, pošaljite upit.

Česta pitanja