Kako deluje 3D sprehod v brskalniku in kaj mora o njem vedeti arhitekt?

Kaj pomeni realnočasovni 3D sprehod v brskalniku

Pri realnočasovni vizualizaciji slika ni posnetek. Naprava obiskovalca jo izrisuje sproti, ob vsakem premiku miške ali prsta. Zato lahko obiskovalec hodi po prostoru, kamor želi, in ni vezan na vnaprej določeno pot.

Unity je razvojno okolje, ki sceno lahko izvozi v obliko WebGL. Program se prevede v WebAssembly in teče znotraj brskalnika, brez vtičnikov in namestitve. Grafično kartico uporablja prek standardnega vmesnika brskalnika, ki ga podpirajo vsi večji brskalniki.

Za arhitekta je ključno, da je to še vedno igralni pogon. Vse, kar obiskovalec vidi, mora naprava izračunati v delčku sekunde, ne glede na to, kako dobro je model izrisan v načrtovalskem orodju. Razliko med takšnim sprehodom in panoramo smo že obravnavali ločeno, zato se tu osredotočamo na tehnično ozadje.

3D sprehod v brskalniku: kaj se zgodi ob odprtju povezave

Brskalnik najprej prenese zagonsko stran, nato glavne datoteke: kodo v WebAssembly, podatke scene in morebitne zunanje vire. Datoteke so običajno stisnjene, zato morata strežnik in omrežje stisnjeno vsebino pravilno posredovati. Pri prvem obisku je to najdaljši del čakanja.

Sledijo razpakiranje, zagon pogona, prevajanje senčnikov in nalaganje scene v pomnilnik. Pri naslednjem obisku brskalnik del datotek vzame iz predpomnilnika, vendar je to odvisno od nastavitev strežnika in naprave. Med čakanjem mora obiskovalec videti napredek, sicer pogosto odide.

Večje projekte je smiselno deliti na dele. Najprej se naloži osnovni prostor, dodatne etaže ali vsebine pa šele ob potrebi, za kar Unity ponuja mehanizem naložljivih paketov vsebine.

• Prenos: koda, podatki scene in teksture
• Priprava: razpakiranje, zagon pogona, prevajanje senčnikov
• Prvi izris: scena v pomnilniku, upravljanje je pripravljeno
• Pretočno nalaganje: dodatne vsebine se naložijo naknadno

WebGL vizualizacija v arhitekturi: priprava modela

Model iz BIM orodja ali modelirnika ni pripravljen za brskalnik. Vsebuje veliko podrobnosti, ki jih obiskovalec nikoli ne vidi, in preveč podatkov za povprečno napravo. Sam postopek prenosa iz Revita ali ArchiCADa je opisan v posebnem članku, tu so načela optimizacije.

Cilj je zmanjšati količino podatkov, ki jih mora naprava obdelati v enem izrisu, in velikost pomnilnika. Največ pridobite pri geometriji, teksturah in osvetlitvi.

Vnaprej izračunana osvetlitev daje lep videz ob majhni obremenitvi, vendar sprememb sceno ne osvetli sproti. Kompromis med videzom in hitrostjo je zato odločitev projekta, ne tehnična formalnost.

• Geometrija: odstranite skrite površine in nevidne detajle, uporabite ravni podrobnosti (LOD)
• Teksture: stisnjeni formati, smiselne ločljivosti, združevanje v atlase
• Osvetlitev: vnaprej izračunane svetlobne karte namesto številnih dinamičnih luči
• Izris: združevanje objektov, instanciranje in izločanje zakritih objektov
• Materiali: čim manj različnih materialov in senčnikov

Naprave in brskalniki: za kaj načrtovati

Sodobni namizni računalniki z zmogljivo grafiko običajno ne delajo težav. Vgrajena grafika v poslovnih prenosnikih je občutno šibkejša, telefoni in tablice pa so omejeni s pomnilnikom, segrevanjem in baterijo. Projekt zato načrtujemo za najšibkejšo napravo, ki jo ciljna skupina resnično uporablja.

Upravljanje se razlikuje. Na računalniku sta na voljo tipkovnica in miška, na zaslonu na dotik pa virtualni palček ali dotik cilja v prostoru. Pri telefonih lahko brskalnik ob pomanjkanju pomnilnika stran celo zapre, zato je pogosto smiselno ponuditi lažjo različico kakovosti.

Preizkus na resničnih napravah je nujen. Simulacija na razvijalčevem računalniku ne pove, kako se bo obnesel starejši telefon, zato preverite vsaj Chrome, Safari, Edge in Firefox.

Realnočasovna vizualizacija: kje so omejitve

WebGL deluje znotraj varnostnega okolja brskalnika, zato ima pogon manj svobode kot namizna aplikacija. Pomnilnik je omejen, večnitnost je v Unity za splet močno omejena, dostop do datotečnega sistema pa ni neposreden.

Videz ne more biti enak kot pri vnaprej izrisanih slikah. Odboji, mehke sence in zapletena stekla zahtevajo kompromise, zato realnočasovni sprehod ni nadomestek za fotorealistične upodobitve, temveč dopolnilo z drugim namenom.

Dodatne omejitve prinašajo zunanji dejavniki: podjetniška omrežja, vdelava v stran prek okvirja z omejitvami celozaslonskega načina in zajema miške ter počasna povezava obiskovalca. Novejši standard WebGPU se razvija, a podpora se med brskalniki in napravami še razlikuje, zato na njem ne gradite obveznih predpostavk.

Pogoste napake pri objavi 3D sprehoda

Najpogostejša napaka je objava modela v taki obliki, kot je prišel iz načrtovalskega orodja. Posledica sta dolgo nalaganje in sekanje na povprečnih napravah.

Pred objavo odprite povezavo v čistem brskalniku brez predpomnilnika, na počasnejši povezavi in na telefonu. Če je izkušnja še vedno razumljiva, je projekt blizu objave.

• Preizkus samo na zmogljivem računalniku
• Neomejena ločljivost tekstur in preveč različnih materialov
• Brez prikaza napredka nalaganja
• Strežnik brez stiskanja ali z napačnimi nastavitvami glav
• Spregledano upravljanje na dotik in mobilni pogled
• Brez nadomestne vsebine, ko brskalnik WebGL ne podpira

Kaj lahko naredite naslednje

Odprite javni demo, prosti 3D sprehod po vzorčni hiši, na več napravah in opazujte čas nalaganja, odziv upravljanja ter videz senc. ARHIX takšne sprehode gradi v Unity WebGL, zato je demo uporabna referenca za pogovor o vašem projektu. Zapiski s teh preizkusov so dobra podlaga za naslednji korak.

Nato pripravite seznam ciljnih naprav, določite zgornjo mejo velikosti podatkov in se dogovorite, kaj mora biti v prostoru natančno prikazano ter kaj je lahko poenostavljeno. S tem se izognete težavam, ki bi se sicer pokazale šele tik pred objavo.