3D veebileht Revit-mudelist: veebiarenduse juhtum

Korterit müüakse enamasti piltide, plaanide ja visualiseeringute järgi. Ostja peab ise ette kujutama, kus korter majas asub, kuhu aknad avanevad ja kuidas toad omavahel seotud on. Selles veebiarenduse juhtumis näitame, kuidas tegime arhitekti Revit-mudelist 3D veebilehe, kus külastaja saab maja ise ringi keerata, selle korruse kõrguselt lahti lõigata ja iga korterit eraldi vaadata.

Tegemist on demoga. Lehe nimi on 3D House Demo, see ei ole kliendi tellimus ja lehe kaudu ei müüda päris kortereid. Tegime selle, et näidata, mis on arhitekti failidest brauseris võimalik. Kõik, mida allpool kirjeldame, töötab ja seda saab ise proovida.

Lühidalt

• Lähtefail: arhitekti Revit-mudeli FBX-eksport, 24 MB.
• Veebis: Draco-pakitud glTF-fail, 2,2 MB. Sama geomeetria, umbes üksteist korda väiksem.
• Maja: viis korterit kahel korrusel. Mudelis on 347 võrgustikku (mesh) ja 589 419 tippu.
• Mida külastaja teeb: keerab maja, vahetab vaadet (linnulennult, tänavalt, plaanina), valib viimistluse (Render, White, Lines), tõstab korrused lahku ja valib korteri.
• Tehnika: Next.js, React Three Fiber ja three.js, üks WebGL-lõuend. Midagi ei ole ette renderdatud.

Kellele selline 3D veebileht on mõeldud

Mõtlesime demo tegemisel eelkõige kinnisvaraarendajatele ja arhitektidele, kes müüvad või tutvustavad kortereid enne, kui maja valmis on.

Tavapärane lahendus on renderdatud pildid ja PDF-plaanid. Need on ilusad, kuid staatilised: iga uus nurk on uus renderdus ja ostja näeb ainult seda, mida talle valiti näidata. 3D veebilehel valib külastaja vaate ise. Ta näeb, kuidas korter paikneb teiste suhtes, millisel korrusel see on ja kuidas maja päriselt välja näeb igast küljest.

Oluline on, et selleks ei ole vaja midagi uut modelleerida. Arhitektil on mudel Revitis niikuinii olemas. Küsimus on selles, kuidas see kiiresti ja korrektselt veebi viia.

Revitist brauserisse: 24 MB-st 2,2 MB-ni

Revit oskab eksportida FBX-faili. See sobib failivahetuseks, aga veebi jaoks on 24 MB liiga palju, eriti telefonis mobiilse andmesidega.

Seetõttu teisendasime faili eraldi skriptiga enne avaldamist:

1. three.js-i FBX-laadija loeb FBX-faili sisse.
2. Kõik materjalid asendatakse ühe lihtsa materjaliga, sest need määratakse brauseris hiljem niikuinii uuesti (sellest allpool).
3. three.js-i glTF-eksportija kirjutab mudeli GLB-failiks.
4. gltf-pipeline pakib geomeetria Draco-tihendusega.

Tulemus on 2,2 MB suurune fail. Geomeetria jääb samaks, see on lihtsalt palju kompaktsemalt kirja pandud. Brauser laadib selle korra alla, pakib lahti ja kogu edasine töö käib külastaja seadmes. Laadimise ajal näeb külastaja protsendiriba, et oleks selge, et midagi toimub.

Revit kasutab Z-telge üles, veebi 3D-maailm Y-telge. Mudel pööratakse laadimisel õigetpidi ja tsentreeritakse, et see seisaks maapinnal.

Materjalid Revit-elementide nimede järgi

Revit-eksport annab kõigile pindadele sama halli materjali. Kui panna selline mudel veebi, näeb see välja nagu kipsist makett.

Uusi tekstuure me ei joonistanud. Selle asemel loeb kood iga Revit-elemendi nime ja määrab materjali selle järgi. Arhitekti mudelis on elementidel eestikeelsed nimed, nii et näiteks:

• klaas muutub läbipaistvaks klaasiks;
• välissein saab krohvitud fassaadi tooni;
• põrand ja vahelagi muutuvad tammepõrandaks;
• railing saab terasest piirde;
• timber saab puidust posti tooni.

Kokku on 11 materjalirühma, alates klaasist ja alumiiniumraamidest kuni mööbli ja sisustuseni. Iga rühm saab realistliku (PBR) materjali: värvi, kareduse ja metalsuse. Kui arhitekt mudelit muudab ja uue ekspordi saadab, saavad uued elemendid materjali automaatselt oma nime järgi.

Realistlik renderdus reaalajas

Mudel renderdatakse brauseris reaalajas WebGL-iga. Et see ei näeks välja nagu tavaline 3D-vaatur, kasutasime mõnda võtet:

• päikesevalgus ja varjud ühe suunavalgusega ning ümbritsev valgus keskkonnakaardist;
• ümbritseva varjutuse efekt (ambient occlusion), mis tumendab nurki ja ühenduskohti nagu päris valguses;
• neutraalne toonivastendus, et valged pinnad ei põleks üle;
• ainult varjuga maapind, mille toon on kalibreeritud lehe taustaga ühte, nii et maja seisab lehel, mitte eraldi kastis.

Viimase puhul mõõtsime Playwrightiga renderdatud piksli värvi ja sättisime tausta nii, et see ühtiks lehe taustaga täpselt.

Lisaks realistlikule renderdusele on veel kaks viimistlust:

• White ehk valge makett, kus materjalid on heledad ja servad õrnalt joonistatud;
• Lines ehk joonis, kus pinnad on valged ja servad tumedad nagu arhitekti joonisel.

Nii saab sama mudelit näidata nii ostjale, kes tahab näha, kuidas maja välja näeb, kui ka arhitektile, kes tahab näha selle vormi.

Lõiked ja korterid

Selle demo tähtsaim osa on korterite valik. Kui külastaja valib korteri, juhtub kolm asja:

1. mudel lõigatakse horisontaalselt selle korruse kõrguselt läbi;
2. kõik, mis jääb korteri põhiplaanist välja, peidetakse, nii et korter tõstetakse justkui hoonest välja;
3. kaamera lendab korteri juurde ja raamib selle ülejäänud liidese kõrvale.

Korteri jaoks on kolm vaadet: üldvaade, plaan ülevalt ja vastasnurk.

Lõike kõrgust me käsitsi ei valinud. Kood leiab mudelist põranda-, vahelae- ja katuseplaadid ning loeb nende kõrgused. Lõige tehakse 62% kõrgusel iga korruse põrandast laeni. See on piisavalt kõrgel, et ruume lugeda, ja piisavalt madalal, et sisse näha. Korteri piirid võtsime arhitekti korruseplaanidelt, samad plaanid on lehel korteri valiku juures.

Lõige on tehtud lõikepindadega (clipping planes), mitte mudelit tükkideks lõigates. See tähendab, et lõige saab sujuvalt liikuda ja mudel jääb terveks. Kus lõige avab seina või plaadi, täidetakse selle sisekülg tumedaga, nagu arhitektuurses lõikejoonises. Seda tehakse ainult lõike ajal, sest muidu jääksid ümarate seinte segmentide vahele nähtavad tumedad kriipsud.

Lahkutõstmine, vaated ja kompass

Lisaks korteritele on lehel veel mõned juhtimisvahendid:

• Explode tõstab teise korruse ja katuse liuguriga üles, nii et näeb iga korruse sisse. Kihid on jaotatud samade plaatide kõrguste järgi.
• Aerial, Street ja Plan on valmis kaameravaated. Plaanivaade on tehtud väga kitsa vaatenurgaga kaugelt, nii et see mõjub peaaegu nagu tasapinnaline joonis.
• Kompass näitab maja põhiplaani ja seda, kust suunast kaamera vaatab. Seda saab lohistada, et maja ümber käia, ja see töötab ka klaviatuuri nooleklahvidega.

Suumimist ja nihutamist me teadlikult ei lubanud ning kaamera ei saa minna maapinnast allapoole. Nii ei saa külastaja end ära eksitada ja maja jääb alati kaadrisse.

Mis läks keeruliseks

Nagu igas projektis, ilmnesid ka siin probleemid alles päris mudeliga:

• Värelevad pinnad. Revit-mudelis on palju pindu, mis asuvad täpselt samas tasapinnas, näiteks varikatus ja seinaühendused. Kaamera lähi- ja kaugtasand olid alguses liiga kaugel teineteisest ja sügavuse täpsusest ei piisanud, nii et need pinnad virvendasid mudeli keeramisel. Lahendus oli hoida need tasandid kogu aeg mudeli ümber tihedalt.
• Telefonis puudutused. Kui 3D-lõuend täidab ekraani, tahab puudutus korraga nii lehte kerida kui mudelit keerata. Lahendus: vertikaalne libistus kerib lehte, horisontaalne keerab maja.

Kiirus ja telefonid

3D veebileht on raskem kui tavaline koduleht ja seda ei tasu varjata. Mõned otsused, mis hoiavad selle mõistlikuna:

• mudel laaditakse korra ja kogu leht kasutab üht WebGL-lõuendit;
• varjukaart arvutatakse uuesti ainult siis, kui geomeetria liigub, sest päike ei liigu;
• kui 3D-osa on ekraanilt välja keritud, renderdamine peatub;
• telefonis on pikslitihedus piiratud ja varjutusefekt arvutatakse poole resolutsiooniga.

Kiiruse ja Core Web Vitalsi kohta üldiselt kirjutasime lähemalt artiklis kodulehe tegemisest.

Mida selline projekt arendajalt või arhitektilt vajab

Kui kaalute sarnast 3D veebilehte, on siin nimekiri sellest, mis tuleb kokku leppida:

• Mudel: Revit, FBX või glTF eksport. Mida puhtamad on elementide nimed, seda lihtsam on materjale määrata.
• Korteriplaanid: korterite piirid ja andmed (pindala, toad, rõdu).
• Mida külastaja peab tegema: ainult vaatama või ka korteri valima, broneerima, päringu saatma?
• Andmed: kas korterite staatus (vaba, broneeritud, müüdud) tuleb käsitsi või mõnest süsteemist?
• Bränd: lehe kujundus arendaja või projekti järgi.
• Muudatused: mis juhtub, kui arhitekt mudelit muudab?

Demos ei ole korterite staatust ega päringuvormi taga süsteemi. Päris projektis ühendaksime selle arendaja müügi- või CRM-süsteemiga.

Kokkuvõte

Arhitekti Revit-mudel on juba olemas ja see on täpsem kui ükski renderdus. Hea veebiarendus viib selle brauserisse nii, et see laadib kiiresti, näeb välja nagu päris maja ja laseb ostjal ise korterit leida. Meie 3D House Demo näitab, et 24 MB FBX-fail mahub 2,2 MB sisse ja töötab ka telefonis.

Demot saab ise proovida aadressil ravien-3d-house-demo.vercel.app, teisi töid näete meie tööde all. Kui müüte või planeerite kortereid ja teil on Revit-mudel olemas, kirjutage meile. Vaatame koos, kas 3D veebileht on teie projektile õige lahendus.