Parimatel WebGL-veebilehtedel on ühine tunnus: 3D täidab ülesannet, millega foto või video hakkama ei saa. WebGL on brauseritehnoloogia, mis joonistab seadme graafikaprotsessori abil 3D-d reaalajas. Praktikas õigustab see end kuues olukorras: toote avavaade, konfiguraator, andmete visualiseerimine, ruumiline portfoolio, hoone fassaad ja varjutajatega loodud taust. Igaühe juures vaatame pärisnäidet ja arenduseks vajalikku.
Rühmitame WebGL-veebilehti kasutusotstarbe, mitte efektse välimuse järgi. Samast põhimõttest tasub lähtuda ka arenduse lähteülesandes.
WebGL-veebilehtede näited lühidalt
| Kasutusotstarve | Milleks sobib | Mida on vaja | Risk mobiilis |
|---|---|---|---|
| Toode avavaates | Tootebrändid, uute toodete turuletoomine | Üks kvaliteetne mudel, valgus ja liikumine | Madal |
| Konfiguraator | Tootevariandid, eritellimused | Iga valiku mudelid, reeglid ja hinnaandmed | Keskmine |
| Andmegloobus / andmete visualiseerimine | Platvormid, tegevuse ulatuse näitamine | Andmevoog, instantsimine ja kohandatud varjutajad | Keskmine |
| Ruumiline portfoolio | Stuudiod, loovisikud | Virtuaalne maailm, füüsika ja läbimõeldud navigeerimine | Kõrge |
| Kinnisvara fassaadivaade | Kinnisvaraarendajad, müügimeeskonnad | Hoone mudel, korterite andmed ja staatuste sünkroonimine | Keskmine |
| Varjutajatega loodud taust | Iga bränd | Varjutajate spetsialist, muud on vaja vähe | Madal |
1. Toode avavaates
Üks stuudiovalgustusega toode pöördub kursori või kerimise järgi. See on kõige tavalisem WebGL-kujunduse soov, millega meie poole tullakse, ning pakub parimat töömahu ja mõju suhet.
Mida on vaja: üks lõppkasutuseks valmis kvaliteetne GLB-mudel, sinu fotodega sobiv valgustus ja läbimõeldud liikumine. Kihthaaval selgitab seda artikkel sellise Three.js-i veebilehe loomisest. Millal loobuda: kui külastaja tootega ei suhtle, on sujuvalt korduv video kergem. Reaalajas 3D tasub ära siis, kui kursor midagi muudab.
2. Konfiguraator
Valid värvi, vahetad materjali ja näed kohe uut hinda. Siin muutub 3D kujunduselemendist müügitööriistaks. Kõige keerulisem osa pole renderdamine, vaid loogika: milliseid valikuid saab ühendada, kui palju igaüks maksab ja mis juhtub ostukorvi lisamisel.
Mida on vaja: iga seadistatava osa mudel, tekstuurikomplektid iga viimistluse jaoks, tootevalikute reeglid ja ühendus e-poega. Planeeri selleks eraldi eelarve. Meie 3D-veebilehe hinna juhend selgitab, miks konfiguraatorid kuuluvad kõrgeimasse hinnaklassi.
3. Andmegloobus
Tuntud näide on GitHubi avalehe gloobus. GitHubi insenerid kirjutasid, et see on loodud Three.js-iga ning koosneb umbes 12 000 väikesest ringist, mis joonistatakse ühe InstancedMeshi abil. Muudatustaotlusi näidatakse kiirte ja kaarjoontena. Instantsimine tähendab, et graafikaprotsessor joonistab tuhanded koopiad korraga, mitte tuhandete eraldi käskudega.
Tellijale on kasulik laadimisvõte: kuni esimese kaadri valmimiseni näitab leht SVG-eelvaadet ja seejärel asendab selle 600 ms jooksul sujuvalt lõuendiga. Külastaja ei pea tühja kasti vaatama.
Mida on vaja: korras andmeallikas, varjutajate ja instantsimisega tuttav arendaja ning varupilt.
4. Ruumiline portfoolio
Portfooliost saab koht, kus saad ringi liikuda. Tuntud näide on Bruno Simoni sait, kus sõidad väikese autoga tema tööde vahel. Selle loomisel kasutati renderdamiseks Three.js-i, füüsikaks Cannon.js-i ja modelleerimiseks Blenderit. Töö võttis umbes kolm kuud ning 2020. aasta jaanuaris, kui Pastel sellest kirjutas, oli külastajaid juba üle 400 000.
Mida on vaja: virtuaalse maailma kujundus, füüsika seadistamine ja hoolikalt läbimõeldud navigeerimine. Keeruline koht: seda formaati on kõige raskem teha ligipääsetavaks ja telefonis kiireks. Paku selle kõrval alati ka tööde tavalist loendivaadet.
5. Kinnisvara fassaadivaade
Hoone ise on menüü: liigud kursoriga aknale ja näed korterit. Lõime Tallinnas näidisprojekti elamule, kus iga hämaras valgustatud aken tähistab kodu. Aknale liikudes näed tubade arvu, pinda, hinda ja staatust. Sama mõtet kasutavad ka agentuurid, näiteks Lazarev oma Riviera City projektis.
Mida on vaja: hoone mudel, iga korteri andmed ja viis hoida müüdud ning vabade korterite staatus ajakohasena. Ühe korterivalija arendusjuhendi sõnul „peitub väärtus mudelis ja andmetes”. Ilus renderdus on lihtsam osa; andmete toimiv liikumine määrab, kas müügimeeskond süsteemi usaldab.
6. Varjutajatega loodud taust
Iga WebGL-sait ei vaja mudelit. Varjutaja on väike programm, mis töötab graafikaprotsessoril ja määrab iga piksli värvi. See sobib hästi liikuvate gradientide, müramustrite ja eri kujundeid moodustavate osakeste loomiseks.
Mida on vaja: varjutajatega töötav arendaja ja selge liikumise lähteülesanne. See on kõige soodsam viis reaalajas graafikaga alustamiseks ning tavaliselt ka mobiilis kõige kergem lahendus.
Milleks WebGL hästi ei sobi
Ära kasuta reaalajas 3D-d pikkade tekstide, põhinavigatsiooni, otsingus leitava sisu ega turundustiimi iganädalaste sisumuudatuste jaoks. Lõuendisse ehitatud menüüd takistavad klaviatuuri ja ekraanilugeja kasutajaid ning Google loeb HTML-i, mitte lõuendi piksleid.
Kui kaalud täielikult kaasahaarava veebikeskkonna ja tagasihoidlikumate efektide vahel, aitab meie ruumilise ja kaasahaarava veebidisaini juhend otsustada, millal põhjalikum lahendus end õigustab.
Kust leida parimaid WebGL-veebilehti
Tavapärane koht näidete leidmiseks on Awwwards. Selle žürii hindab disaini, kasutusmugavust, loovust ja sisu, mitte üksnes vaatemängulisust. Ava iga sait ka telefonis: seal tuleb teostuse kvaliteet hästi esile.
