Conţinut
- Exportați 3D pentru web
- Cazuri practice de utilizare pentru WebGL
- Explorarea realității virtuale
- Realitate augmentată
Tehnologiile 3D pot fi folosite în browser pentru a crea experiențe interactive interactive frumoase și extrem de atractive. WebGL este un API JavaScript pentru redarea în timp real a graficelor 3D și 2D într-un browser. Se bazează pe OpenGL ES - API-ul software utilizat pe sisteme încorporate precum smartphone-uri și tablete.
În mod tradițional, browserele web foloseau CPU pentru a reda conținut, dar în ultimii ani browserele au adoptat suport pentru accelerarea hardware, ceea ce înseamnă că dezvoltatorii web pot acum să acceseze GPU-ul unui dispozitiv pentru a permite redarea graficii complexe (dacă site-ul dvs. este complex, asigurați-vă că găzduirea dvs. web vă poate susține nevoile).
- Începeți cu WebGL folosind three.js
Este un limbaj greu de înțeles, dar, din fericire, există o serie de biblioteci JavaScript care fac WebGL mai accesibil, cum ar fi Babylon.js și three.js. O astfel de tehnologie îmbină seturi de abilități între dezvoltatorii web tradiționali, dezvoltatorii de jocuri și artiștii VFX, unde toate aceste discipline funcționează împreună pentru a dezvolta experiențe interactive pe web.
Înțelegerea principiilor de bază VFX este crucială - iluminarea, camerele, animația și geometria 3D intră în joc - și este vital să cunoașteți cadrele JavaScript și HTML.
Pentru mai multe resurse de bază de proiectare web, încercați ghidul nostru către cel mai bun constructor de site-uri web și acești furnizori de stocare în cloud.
Exportați 3D pentru web
O problemă particulară asociată cu exportul activelor 3D într-un mediu WebGL este greutatea fișierelor. Atunci când aveți de-a face cu active grele, cum ar fi modelele 3D, trebuie să aveți grijă suplimentară în timpul creării activelor pentru a vă asigura că modelele sunt încărcate eficient.
Există mulți factori care pot crește dimensiunea unui model 3D, dar există trei reguli bune de urmat pentru a reduce greutatea într-un browser:
1. Topologie bună
Topologia se referă la fluxul de rețea al unui model 3D - cu cât rețeaua este mai curată, cu atât este mai eficient modelul, adică mai puține poligoane utilizate și o reducere a greutății generale a activului.
2. Cartografiere normală
Aceasta este o abordare excelentă în crearea texturilor ridicate detaliate pe un material 3D, menținând în același timp un număr mic de poli. Detaliile create de aceste hărți sunt false, dar pot fi incredibil de eficiente. De obicei, un model cu rezoluție mai mare este creat cu o rețea detaliată, din aceasta o hartă normală poate fi exportată și înfășurată în jurul unui model poli inferior pentru a crea iluzia unui obiect detaliat.
3. Formate de fișiere
Când WebGL a fost lansat inițial, dezvoltatorii au creat exportatori personalizați pentru a livra active 3D într-un motor WebGL. Nu au existat standarde sau conducte la locul lor, ceea ce a provocat rezultate și erori inconsistente. Mai recent, formatul de fișier glTF a fost creat de Khronos Group pentru a dezvolta un format interoperabil deschis, fără redevențe, pentru partajarea graficelor 3D și a fost supranumit „JPEG pentru 3D”.
GlTF a fost creat pentru a răspunde nevoii unui format de fișier grafic comun pentru 3D, în același mod în care JPEG este standardizarea pentru fotografii. GlTF poate păstra informații complexe asociate fișierelor 3D, cum ar fi date de scenă, materiale, geometrie, animație, skin-uri, umbrere GLSL și fișiere de textură.
GLTF este încă un format de fișier foarte nou și timpul va spune dacă marile pachete 3D îl adoptă. Cu toate acestea, Khronos Group a lansat câțiva exportatori glTF pentru instrumente populare precum Unity și Blender.
Cazuri practice de utilizare pentru WebGL
Ca și în cazul oricărui mediu nou, a apărut o explozie de creativitate când a fost lansat pentru prima dată WebGL, care a dus la o varietate de experiențe ciudate și minunate, pe măsură ce dezvoltatorii și artiștii au experimentat tehnologia. Abia mai recent au început să apară aplicații practice pe măsură ce rata de adopție a crescut.
Marile mari au adoptat WebGL pentru a reda grafica mai eficient - de exemplu, interfața de utilizare PS4 este alimentată de WebGL
În trecut, instituțiile de învățământ au creat aplicații Flash pentru a le folosi ca instrumente interactive de învățare. În timp ce acestea erau excelente pentru angajarea studenților și predarea subiectelor complexe într-un format digerabil, acestea sunt acum datate, nescalabile și neacceptate în browserele moderne. WebGL înlocuiește Flash și, în acest caz, este folosit pentru a crea instrumente de învățare intuitive care pot face față graficii și interacțiunilor complexe.
Marile mari au adoptat, de asemenea, WebGL pentru a reda grafica mai eficient. De exemplu, interfața PS4 este alimentată de WebGL, permițând meniurilor și elementelor sale să ruleze fără probleme cu un decalaj minim. Când un utilizator se conectează la PS4, rulează cod WebGL.
Sectorul arhitecturii investește, de asemenea, mult în a face vizualizările 3D mai accesibile, mergând chiar mai departe pentru a încorpora WebVR pentru a scufunda clienții atunci când prezintă proprietăți. Și în cadrul comerțului electronic, în special în cazul articolelor de mare valoare, WebGL este utilizat pentru a reda modele 3D în detalii complexe. Oferă utilizatorilor un strat de instrumente interactive de personalizare care le permit să își actualizeze vizualizarea produsului în timp real. Această abordare face ca produsele să devină și mai realiste și mai tangibile pentru potențialii clienți.
Explorarea realității virtuale
WebGL este trambulina care a început explorarea tehnologiilor 3D suplimentare, cum ar fi WebVR și WebAR. Google, Mozilla și Microsoft contribuie la definirea modului în care VR și AR vor face parte din viitoarea experiență de navigare.
Frumusețea aducerii VR pe web este nivelul de accesibilitate care vine împreună cu acesta. Permiterea accesului facil al conținutului VR printr-o adresă URL - și posibilitatea de a crea și distribui conținut fără a fi nevoie să treacă printr-un magazin de aplicații - oferă mărcilor, educatorilor și comercianților cu amănuntul un nivel de acoperire care nu a fost niciodată simțit până acum. Aceasta este încă o lume nouă, dar câștigă rapid în popularitate și cerere.
Fiind pionieri puternici ai VR în browser, la sfârșitul anului 2015 Mozilla a făcut tehnologia și mai accesibilă odată cu introducerea A-Frame: un cadru VR pentru three.js care acceptă Vive, Rift, Daydream, Gear VR, Google Cardboard și desktop experiențe.
Mozilla a făcut tehnologia și mai accesibilă odată cu introducerea A-Frame
A-Frame oferă o interfață pentru VR pe web, permițând dezvoltatorilor să creeze experiențe VR reale cu relativă ușurință. Se ocupă de configurarea camerei stânga și dreapta necesare pentru realitatea virtuală și furnizează comportamentul implicit, inclusiv utilizarea giroscopului unui dispozitiv mobil pentru a permite mișcarea de rotație liberă în jurul unei scene folosind un set cu cască. A-Frame a introdus, de asemenea, o pictogramă a căștilor pentru a permite experiența VR pentru dispozitivele mobile compatibile.
A-Frame a deschis calea pentru specificațiile browserului a ceea ce este astăzi cunoscut sub numele de WebVR. Cu toate acestea, experimentarea VR în browser poate fi oarecum imprevizibilă datorită gamei de dispozitive pe care poate fi experimentat. Există încă probleme la vizualizarea conținutului pe smartphone-uri, datorită telefoanelor de generație mai veche care se luptă să redea scene și care provoacă o scădere a cadrelor. De asemenea, necesită o conexiune bună la internet datorită greutății experiențelor. Toți acești factori pot rupe cu ușurință imersiunea unei experiențe VR.
Încă sunt primele zile pentru mediu, însă VR devine din ce în ce mai popular, este inspirat să vedem cum se adaptează deja webul pentru a oferi o versiune mai accesibilă a acestui tip de conținut și pentru a vedea cum dezvoltatorii își exercită creativitatea în acest spațiu.
Realitate augmentată
WebAR este următorul pas logic pentru browsere, îmbinând conținutul digital cu lumea reală pentru a crea o realitate augmentată. Deși este încă foarte în fază incipientă și experimentală, Google a făcut progrese semnificative în acest domeniu și a lansat mai multe instrumente și demonstrații.
WebARonARKit și WebARonARCore sunt ambele aplicații experimentale pentru iOS și Android, permițând dezvoltatorilor să creeze experiențe AR folosind tehnologii web. Three.js a lansat three.ar.js, facilitând crearea experiențelor AR adăugând clase de ajutor peste trei.js. Deoarece această tehnologie se află într-un stadiu atât de timpuriu, înseamnă că aceste experiențe sunt vizibile numai în browsere experimentale.
Odată cu adoptarea VR, AR și, în cele din urmă, a realității mixte, este inevitabil ca browserele să urmeze exemplul oferind o experiență online captivantă. Utilizarea tehnologiilor web 3D este mai rapidă decât a fost vreodată. Cu o mare unitate în spatele WebAR, este interesant să vezi cum se dezvoltă peisajul și adaugă o altă dimensiune navigării.
Eveniment de proiectare web Generați Londra revine în perioada 19-21 septembrie 2018, oferind un program plin de vorbitori de top din industrie, o zi întreagă de ateliere și oportunități valoroase de rețea - nu ratați. Obțineți biletul Generați acum.
Acest articol a apărut inițial în revista net. Cumpără numărul 305 sau Abonati-va.
Ilustrare: Kym Winters
