Kako radi 3D obilazak u pregledniku i što o njemu mora znati arhitekt?

Što znači 3D obilazak u pregledniku u stvarnom vremenu

Kod vizualizacije u stvarnom vremenu slika nije snimka. Uređaj posjetitelja crta je u hodu, pri svakom pomaku miša ili prsta. Zato posjetitelj može hodati kamo želi i nije vezan uz unaprijed zadanu putanju.

Unity je razvojno okruženje koje scenu može izvesti u WebGL formatu. Program se prevodi u WebAssembly i radi unutar preglednika, bez dodataka i instalacije. Grafičku karticu koristi preko standardnog sučelja preglednika, koje podržavaju svi veći preglednici.

Za arhitekta je ključno da je to i dalje pogon za igre. Sve što posjetitelj vidi uređaj mora izračunati u djeliću sekunde, bez obzira na to koliko je model dobro prikazan u alatu za projektiranje. Razliku između takvog obilaska i panorame već smo obradili zasebno, pa se ovdje usredotočujemo na tehničku pozadinu.

3D obilazak u pregledniku: što se događa pri otvaranju poveznice

Preglednik najprije preuzme početnu stranicu, zatim glavne datoteke: kod u WebAssemblyju, podatke scene i eventualne vanjske resurse. Datoteke su obično komprimirane, pa poslužitelj i mreža moraju ispravno isporučiti komprimirani sadržaj. Pri prvom posjetu to je najduži dio čekanja.

Slijede raspakiranje, pokretanje pogona, prevođenje shadera i učitavanje scene u memoriju. Pri sljedećem posjetu preglednik dio datoteka uzima iz predmemorije, no to ovisi o postavkama poslužitelja i uređaja. Tijekom čekanja posjetitelj mora vidjeti napredak, inače često odlazi.

Veće projekte ima smisla podijeliti na dijelove. Najprije se učita osnovni prostor, a dodatne etaže ili sadržaji tek po potrebi, za što Unity nudi mehanizam učitljivih paketa sadržaja.

• Prijenos: kod, podaci scene i teksture
• Priprema: raspakiranje, pokretanje pogona, prevođenje shadera
• Prvi prikaz: scena je u memoriji, upravljanje je spremno
• Postupno učitavanje: dodatni sadržaji učitavaju se naknadno

WebGL vizualizacija arhitektura: priprema modela

Model iz BIM alata ili modelera nije spreman za preglednik. Sadrži mnogo detalja koje posjetitelj nikada ne vidi i preveliku količinu podataka za prosječan uređaj. Sam postupak prijenosa iz Revita ili ArchiCADa opisan je u zasebnom članku, a ovdje su načela optimizacije.

Cilj je smanjiti količinu podataka koje uređaj mora obraditi u jednom crtanju te veličinu memorije. Najviše se dobiva na geometriji, teksturama i osvjetljenju.

Unaprijed izračunano osvjetljenje daje lijep izgled uz malo opterećenje, no promjene u sceni ne osvjetljava u hodu. Kompromis između izgleda i brzine zato je odluka projekta, a ne tehnička formalnost.

• Geometrija: uklonite skrivene površine i nevidljive detalje, koristite razine detalja (LOD)
• Teksture: komprimirani formati, razumne rezolucije, spajanje u atlase
• Osvjetljenje: unaprijed izračunane mape svjetla umjesto brojnih dinamičkih svjetala
• Crtanje: spajanje objekata, instanciranje i izbacivanje zaklonjenih objekata
• Materijali: što manje različitih materijala i shadera

Uređaji i preglednici: za što planirati

Suvremena stolna računala s jakom grafikom obično ne stvaraju probleme. Ugrađena grafika u poslovnim prijenosnicima osjetno je slabija, a mobiteli i tableti ograničeni su memorijom, zagrijavanjem i baterijom. Projekt zato planiramo za najslabiji uređaj koji ciljana skupina stvarno koristi.

Upravljanje se razlikuje. Na računalu su dostupni tipkovnica i miš, a na zaslonu osjetljivom na dodir virtualni joystick ili dodir cilja u prostoru. Kod mobitela preglednik zbog manjka memorije može čak i zatvoriti stranicu, pa je često pametno ponuditi lakšu verziju kvalitete.

Provjera na stvarnim uređajima je nužna. Simulacija na razvojnom računalu ne pokazuje kako će se ponašati stariji mobitel, zato provjerite barem Chrome, Safari, Edge i Firefox.

Vizualizacija u stvarnom vremenu: gdje su granice

WebGL radi unutar sigurnosnog okruženja preglednika, pa pogon ima manje slobode nego desktop aplikacija. Memorija je ograničena, višedretvenost je u Unityju za web jako ograničena, a pristup datotečnom sustavu nije izravan.

Izgled ne može biti jednak kao kod unaprijed renderiranih slika. Refleksije, meke sjene i složena stakla traže kompromise, pa obilazak u stvarnom vremenu nije zamjena za fotorealistične prikaze, nego dopuna s drugom svrhom.

Dodatna ograničenja donose vanjski čimbenici: korporativne mreže, ugradnja u stranicu preko okvira s ograničenjima cijelozaslonskog načina i hvatanja miša te spora veza posjetitelja. Noviji standard WebGPU se razvija, no podrška se među preglednicima i uređajima još razlikuje, pa na njemu ne gradite obvezne pretpostavke.

Česte pogreške pri objavi 3D obilaska

Najčešća pogreška je objava modela u obliku u kojem je izašao iz alata za projektiranje. Posljedica su dugo učitavanje i trzanje na prosječnim uređajima.

Prije objave otvorite poveznicu u čistom pregledniku bez predmemorije, na sporijoj vezi i na mobitelu. Ako je iskustvo i dalje razumljivo, projekt je blizu objave.

• Testiranje samo na snažnom računalu
• Neograničena rezolucija tekstura i previše različitih materijala
• Bez prikaza napretka učitavanja
• Poslužitelj bez kompresije ili s pogrešnim postavkama zaglavlja
• Previđeno upravljanje dodirom i mobilni prikaz
• Bez zamjenskog sadržaja kada preglednik ne podržava WebGL

Što možete učiniti sljedeće

Otvorite javni demo, slobodni 3D obilazak uzorne kuće, na više uređaja i pratite vrijeme učitavanja, odziv upravljanja i izgled sjena. ARHIX takve obilaske gradi u Unity WebGL-u, pa je demo korisna referenca za razgovor o vašem projektu. Bilješke s tih testiranja dobra su podloga za sljedeći korak.

Zatim pripremite popis ciljnih uređaja, odredite gornju granicu veličine podataka i dogovorite što u prostoru mora biti točno prikazano, a što smije biti pojednostavljeno. Tako izbjegavate probleme koji bi se inače pokazali tek neposredno prije objave.