Share
În ultima vreme am văzut o creștere a popularității și a capacității tehnice a realității virtuale. De obicei, atunci când ne gândim la VR, credem că jocurile de noroc și software-ul desktop dedicat. Totuși, acesta nu este singurul spațiu în care realitatea virtuală crește.
Prin puterea tot mai puternică a WebGL, realitatea virtuală se transformă și în browsere sub formă de WebVR și, împreună cu aceasta, vin modalități noi de a împărtăși fotografia în moduri tot mai imersive.
Cu o fotografie în format corect și un dispozitiv VR, cum ar fi Google Cardboard, HTC Vive sau altele asemănătoare, o persoană poate fi făcută să simtă că stă în locul exact în care a fost aparatul foto în momentul fotografierii, capacitatea de a privi în jurul valorii de mediu, pătrunzând în profunzimea spațiului 3D simulat.
Și chiar și fără un dispozitiv VR, oamenii care navighează pe web pot totuși să se rotească în jurul unei imagini panoramice sferice folosind un mouse.
În acest tutorial vom seta panorame panoramice de 360 de grade pe WebVR în trei moduri diferite, folosind instrumente care urmăresc să facă WebVR accesibil și ușor de utilizat:
Pentru a vedea la ce lucrăm, verificați demo-urile din fiecare dintre instrumentele de mai sus, arătând tipul de imagine 360 pe care o vom face:
Există două moduri în care se poate interacționa și vizualiza o panoramă de 360 de grade.
Atunci când o persoană afișează o fotografie WebVR de 360 de grade printr-un dispozitiv corespunzător VR-ready, cum ar fi un card Google Cardboard sau HTC Vive, de exemplu, imaginea va fi împărțită în două imagini și procesată astfel încât setul cu cască să poată fi utilizat pentru a genera iluzia profunzimii.
În acest caz, persoana se uită în jurul scenei pur și simplu, întorcându-se la fața locului și privind în sus și în jos. Accelerometrul dispozitivului va actualiza afișarea imaginii pentru a urmări direcția pe care o caută utilizatorul.
Atunci când o persoană vizionează printr-un dispozitiv care nu este capabil să funcționeze cu VR, imaginea de 360 de grade se va întoarce la afișarea ca o singură imagine care poate fi rotită prin clic și tragere.
WebVR este încă oarecum sângerare, așa că unele aspecte ale acesteia nu sunt susținute pe scară largă. Cu toate acestea, panoramele de 360 de grade necesită doar un mic subset de capabilități WebVR, prin urmare, suportul pentru cel puțin afișajul de tip fallback este de fapt destul de răspândit.
Atâta timp cât un browser acceptă WebGL, un vizualizator va vedea "faceți clic și trageți" pentru o fotografie 360. WebGL este acum complet funcțional în toate browserele importante.
Pentru a verifica dacă un browser pe care îl utilizați acceptă WebGL, vizitați get.webgl.org. Dacă vedeți un cub rotativ, WebGL funcționează.
Mai multe telefoane suportă WebVR atunci când sunt combinate cu un set cu cască ca Google Cardboard sau Daydream. Având în vedere faptul că Google a lansat recent WebVR, nu este deloc surprinzător faptul că versiunile lui iOS și Android de pe Chrome suportă WebVR din cutie.
Dacă aveți un set cu cască Samsung Gear VR, pe de altă parte, va trebui să utilizați propriul browser Samsung.
Modul de a începe configurarea pentru a vizualiza WebVR printr-un afișaj complet montat pe cap va fi dependent de unitatea în cauză.
Pentru Oculus Rift sau HTC Vive / SteamVR, puteți utiliza fie o construcție experimentală Chromium sau Firefox Nightly. Construcția WebVR a Chromium este disponibilă numai pentru Windows, în timp ce Firefox Nightly este disponibilă și pentru MacOS și Linux.
În prezent, Oculus Rift suportă numai Windows, fără planuri raportate pentru suport pe mai multe platforme, deci fie browserul este potrivit. Cu toate acestea, suportul cross-platform pentru HTC Vice / SteamVR se apropie foarte curând, așa că dacă aveți acest dispozitiv și credeți că preferați să vă creați panoramele pe macOS sau Linux la acel moment, ați putea dori să alegeți Firefox Nightly ca principal testarea browserului acum.
Pentru instrucțiuni complete despre configurarea fiecăruia dintre aceste browsere pentru WebVR, vizitați Mozilla VR.
Bert de incendiu, 2016. Pompierii curăță zona în ultimele zile ale focului. Districtul Williams Ranger, la nord de Parks, AZ. 6-21-16. Fotografie de Dyan Bone. Creditul serviciului forestier din S.U.A., regiunea Southweste rn, Kaibab National Forest. CC BY SA.Primul lucru de care aveți nevoie este o fotografie într-un format potrivit pentru panoramele WebVR, pe care le puteți vedea în mod interschimbabil, sub formă de fotografie sferică, echidangulară sau 360 de grade. Puteți lua propriul dvs. prin:
Avem câteva articole minunate care acoperă unele dintre tehnicile pe care le puteți utiliza:
În mod alternativ, puteți să obțineți imagini echidirectangulare prin Flickr. Vom folosi o imagine din Kaibab National Forest pentru acest tutorial.
Creați un director care să găzduiască panoramele pe care le veți crea, descărcați fișierul de mai sus în el și apoi redenumiți imaginea la "fire.jpg".
Dacă intenționați să vizualizați panorama în full WebVR și nu doar ca o imagine de tip drag-and-drag într-un browser desktop, probabil că doriți să descărcați versiunea "Original Size" la 10240 x 5120 pentru o fidelitate vizuală maximă. Fiți conștienți, totuși, că utilizatorii pot vedea un ecran alb gol în timp ce această imagine mare se încarcă, în funcție de conexiunea la internet. Dacă aceasta ar putea fi o problemă, alegeți una dintre dimensiunile mai mici.
NB: Mai târziu, dacă vedeți o gaură neagră în partea de jos a panoramelor pe care le creați cu această imagine, înseamnă că fișierul este incomplet și va trebui să îl descărcați din nou.
Dacă doriți să vă testați panoramele pe un dispozitiv de la distanță / secundar, de exemplu pe un telefon capabil de carton, veți dori și o modalitate de a vizualiza fișierele prin rețeaua locală. Puteți face acest lucru oricum doriți, dar două opțiuni posibile pe care le puteți folosi sunt:
Fiecare exemplu va sta pe propria pagină de web, așa că veți avea nevoie de un document HTML foarte simplu pentru a începe cu fiecare exemplu:
360 Fotografii panoramice
În directorul pentru proiectul dvs., creați trei fișiere HTML:
Apoi introduceți codul de pornire în fiecare fișier, schimbând conținutul
Dacă creați o panoramă WebVR de la zero, ar fi destul de complexă, necesitând codare destul de extinsă. Totuși, cu cadre excelente, cum ar fi Kitul de pornire WebVR, procesul este fiert în două etape.
Toate experiențele VR pe care le puteți crea cu kitul WebVR Starter sunt alimentate de un singur fișier JavaScript. Deci, pentru a începe, trebuie doar să încărcați fișierul JS în ... din fișierul "webvrstarterkit.html" prin adăugarea în fragmentul următor:
Dacă preferați să nu încărcați acest fișier JS dintr-o sursă externă, puteți descărca proiectul WebVR din depozitul său GitHub. Veți găsi fișierul "vr.js" în directorul "build".
Cu JavaScript WebVR încărcat, pagina este acum gata să adauge elemente VR. Pentru a crea o panoramă de 360 de grade, introduceți următorul cod în ... secțiune:
Si asta e! Panorama dvs. de 360 de grade este acum gata de plecare.
Rețineți că valoarea dintre paranteze este calea spre imaginea noastră echidirectangulară. De asemenea, aceasta poate fi setată pentru a încărca o imagine externă prin introducerea în schimb a unei adrese URL.
Când previzualizați acum fișierul "webvrstarterkit.html", acesta ar trebui să arate astfel: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html.
A-Frame este un cadru WebVR diferit, dar mijloacele de creare a unei panorame 360 sunt foarte asemănătoare cu cele finalizate mai sus. Ca și în kitul WebVR Starter, A-Frame este alimentat de un singur fișier JavaScript. Încărcați fișierul în ... din fișierul "aframe.html" cu acest cod:
Dacă preferați să nu încărcați fișierul JS dintr-o sursă externă, puteți descărca depozitul A-Frame de la GitHub. Din dosarul "dist", ar trebui să utilizați versiunea minimizată a scriptului pentru versiunea curentă a proiectului, de ex. "aframe-v0.4.0.min.js".
În locul folosirii unei etichete de script în corpul paginii, A-Frame utilizează propriile elemente HTML personalizate. Primul element care trebuie adăugat este întotdeauna
Apoi, pentru a adăuga imaginea de 360 de grade, introduceți următorul cod în ... secțiune:
Rezultatele dvs. ar trebui să arate astfel: https://tutsplus.github.io/VR_Panoramas/aframe.html.
Sub capota, GuriVR este de fapt biblioteca A-Frame. Ceea ce încearcă să facă este să ofere o modalitate intuitivă și directă de a stabili experiențele VR printr-o interfață de editor.
Pentru a utiliza GuriVR, mergeți la editorul GuriVR. În interfața de editare, puteți introduce doar cuvântul panoramă urmată de URL-ul unei imagini sferice, iar GuriVR va avea grijă de restul pentru tine.
Odată ce ați făcut acest lucru, faceți clic pe Salvați în partea de jos a ecranului, apoi faceți clic pe Imparte link-ul și veți primi un link pe care îl puteți da altora pentru a vă arăta panoramica.
Alternativ, aveți posibilitatea să încorporați panorama într-o pagină web folosind un iframe element. Actualizați fișierul "gurivr.html" cu următorul cod, adăugându-vă adresa URL GuriVR proprie în interfața iframe src atribut:
GuriVR 360 Image Demo
Când ați făcut cele de mai sus, ar trebui să obțineți o panoramă de 360 de grade: https://tutsplus.github.io/VR_Panoramas/gurivr.html.
Acum aveți trei moduri diferite de a crea panorame bazate pe WebVR și permiteți oamenilor să se conecteze cu fotografia dvs. într-un mod cu totul nou. Să recapitulăm rapid ceea ce am acoperit:
Accentsconagua
scenariu eticheta și apoi în interiorul acesteia VR.panorama () pentru a crea imaginea 360.panoramă și apoi adresa URL a fotografiei dvs. pentru a crea imaginea dvs. 360. Opțional, încorporați URL-ul furnizat într-o pagină Web printr-un iframe.Acum că ați văzut cât de repede puteți crea o experiență WebVR dintr-o sferă foto, sper că sunteți inspirat să ieșiți acolo și să capturați lumea în trei dimensiuni!
