Share
I nyere tid har vi sett en bølge i populariteten og den tekniske evnen til virtuell virkelighet. Når vi tenker VR, tenker vi vanligvis på spill og dedikert stasjonær programvare. Dette er imidlertid ikke det eneste rommet hvor den virtuelle virkeligheten vokser.
Gjennom WebGLs evig styrkingskraft, gjør den virtuelle virkeligheten nå også sin vei til nettlesere i form av WebVR, og sammen med det kommer nye måter å dele fotografering på i stadig mer nedsenkende måter.
Med et bilde i riktig format og en VR-enhet som Google Kart, HTC Vive eller lignende, kan en person bli laget for å føle at de står på det nøyaktige stedet kameraet var da bildet ble tatt, med evne til å se rundt miljøet, peering inn i dybden av simulert 3D-plass.
Og selv uten en VR-enhet kan folk som surfer på nettet fortsatt panorere rundt et sfærisk panoramabilde ved hjelp av en mus.
I denne opplæringen vil vi sette opp WebVR-drevne 360 grader panoramaer på tre forskjellige måter, ved hjelp av verktøy som har som mål å gjøre WebVR tilgjengelig og grei å bruke:
For å se hva vi jobber med, sjekk demo fra hvert av verktøyene ovenfor, og vis hvilken type 360-bilde vi skal lage:
Det er to måter et 360-graders panorama kan samhandles med og sees på.
Når en person ser et WebVR 360-graders bilde gjennom en passende VR-klar enhet, for eksempel et Google Kart eller HTC Vive, blir bildet splittet i to bilder og behandlet på en slik måte at hodesettet kan bruke dem å generere illusjonen av dybden.
I dette tilfellet ser personen ut rundt scenen ved å slå på stedet og se opp og ned. Enhetsens akselerometer vil oppdatere bildedisplayet for å spore med den retningen brukeren ser.
Når en person ser på en enhet som ikke er VR-stand, vil 360-graders bildet falle tilbake for å vise som et enkelt bilde som kan pannet rundt ved å klikke og dra.
WebVR er fortsatt litt blødende kant, så noen aspekter av det er ikke mye støttet. Imidlertid krever 360-graders panorama bare en liten delmengde av WebVR-evner, slik at støtte for minst fallback-nivåvisning faktisk er ganske utbredt.
Så lenge en nettleser støtter WebGL, vil en seer se "klikk og dra" tilbakebetaling for et 360-bilde. WebGL er nå fullt funksjonell i alle de store nettleserne.
For å sjekke om en nettleser du bruker støtter WebGL, kan du gå til get.webgl.org. Hvis du ser en roterende terning, er WebGL oppe og kjører.
Flere telefoner støtter WebVR når de kombineres med et headset som et Google Kart eller Daydream. Gitt Googles siste press på WebVR, er det ikke overraskende at dets iOS- og Android-versjoner av Chrome støtter WebVR ut av esken.
Hvis du har et Samsung Gear VR-hodesett, må du på den annen side bruke Samsungs egen nettleser.
Veien å gå om å få satt opp for å se WebVR via en full desktop-drevet hodemontert skjerm vil avhenge av den aktuelle enheten.
For Oculus Rift eller HTC Vive / SteamVR, kan du bruke enten en eksperimentell bygg av Chromium eller Firefox Nightly. Chromium WebVR-bygningen er bare tilgjengelig for Windows, mens Firefox Nightly også er tilgjengelig for MacOS og Linux.
I øyeblikket støtter Oculus Rift bare Windows, uten rapporterte planer for støtte på tvers av plattformene, slik at enten nettleseren er egnet. Men støtte på tvers av plattformen for HTC Vice / SteamVR kommer etter hvert veldig snart, så hvis du har denne enheten, og tror du kanskje foretrekker å lage panoramabilder på macOS eller Linux på det tidspunktet, kan du kanskje velge Firefox Nightly som din viktigste testing av nettleseren nå.
For full instruksjoner om hvordan du konfigurerer en av disse nettleserne for WebVR, besøk Mozilla VR.
Bert brann, 2016. Brannmenn fjerner området på de siste dagene av brannen. Williams Ranger District, nord for Parks, AZ. 6-21-16. Bilde av Dyan Bone. Kreditt US Forest Service, Southweste Region, Kaibab National Forest. CC BY SA.Det første du trenger er et fotografi i et format som passer for WebVR-panoramabilder, som du kanskje seendig omtales som et sfærisk, equirectangulært eller 360 graders bilde. Du kan ta din egen av:
Vi har noen gode artikler som dekker noen av de teknikkene du kan bruke:
Alternativt kan du kilde equirectangular bilder via Flickr. Vi bruker et bilde fra Kaibab National Forest for denne opplæringen.
Opprett en katalog for å huse panoramaene du skal lage, last ned den ovennevnte filen i den, og deretter gi nytt navn til bildet til "fire.jpg".
Hvis du planlegger å se panoramaen din i full WebVR i stedet for bare som et klikk og dra-bilde i en nettleser, vil du sannsynligvis laste ned versjonen "Originalstørrelse" ved 10240 x 5120 for maksimal visuell troverdighet. Vær imidlertid oppmerksom på at brukere kan se en blank hvit skjerm mens dette store bildet laster, avhengig av deres internettforbindelse. Hvis dette potensielt kan være et problem, velger du en av de mindre størrelsene i stedet.
NB: Hvis du ser et svart hull nederst på panoramaene du lager med dette bildet, betyr det at filen er ufullstendig, og du må laste den ned igjen.
Hvis du ønsker å teste panoramaene dine på en ekstern / sekundær enhet, for eksempel på en Papp-kompatibel telefon, vil du også ha en måte å vise filene dine via ditt lokale nettverk. Du kan gjøre dette, men du foretrekker det, men to mulige alternativer du kanskje vil bruke er:
Hvert eksempel vil sitte på sin egen nettside, så du trenger bare et veldig grunnleggende HTML-dokument for å komme i gang med hvert eksempel:
360 panorama bilder
I katalogen for prosjektet ditt, opprett tre HTML-filer:
Lim deretter startkoden til hver fil, og endre innholdet til
Hvis du opprettet et WebVR-panorama fra begynnelsen, ville det være ganske komplekst, og det krever ganske omfattende koding. Men med gode rammer som WebVR Starter Kit, blir prosessen kokt ned i to trinn.
Alle VR-opplevelsene du kan opprette med WebVR Starter Kit, drives av en enkelt JavaScript-fil. Så for å komme i gang, trenger du bare å laste den JS-filen inn i ... delen av filen "webvrstarterkit.html" ved å legge inn følgende kodestykke:
Hvis du foretrekker å ikke laste denne JS-filen fra en ekstern kilde, kan du laste ned WebVR-prosjektet fra sitt GitHub-depot. Du finner "vr.js" -filen inne i "build" -katalogen.
Med WebVR JavaScript lastet, er siden nå klar til å ha VR-elementer lagt til den. For å opprette et panorama på 360 grader, legg inn følgende kode i ... seksjon:
Og det er det! Din 360 grader panorama er nå klar til å gå.
Vær oppmerksom på at verdien mellom parentes er banen til vårt equirectangular image. Dette kan også settes til å laste inn et eksternt bilde ved å sette inn en nettadresse i stedet.
Når du forhåndsviser filen "webvrstarterkit.html" nå, bør den se slik ut: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html.
A-Frame er et annet WebVR-rammeverk, men måten å skape et 360-panorama, ligner på det du fullførte ovenfor. Som med WebVR Starter Kit, er A-Frame drevet av en enkelt JavaScript-fil. Last den filen inn i ... delen av filen "aframe.html" med denne koden:
Hvis du foretrekker å ikke laste JS-filen fra en ekstern kilde, kan du laste ned A-Frame-depotet fra GitHub. Fra "dist" -mappen, bør du bruke den minifiserte versjonen av skriptet for den gjeldende versjonen av prosjektet, f.eks. "A-ramme-v0.4.0.min.js".
I stedet for å bruke en skriptetikett i sidekroppen bruker A-Frame sine egne egendefinerte HTML-elementer. Det første elementet som skal legges til er alltid
De
Deretter, for å legge til ditt 360-graders bilde, legg inn følgende kode i ... seksjon:
Resultatene dine bør se slik ut: https://tutsplus.github.io/VR_Panoramas/aframe.html.
Under hetten er GuriVR faktisk A-Frame-biblioteket. Det som skal til for å gjøre, er å gi en intuitiv, enkel måte å sette opp VR-opplevelser gjennom et redigeringsgrensesnitt.
For å bruke GuriVR, gå til GuriVR-editoren. I redigeringsgrensesnittet kan du bare skrive inn ordet panorama etterfulgt av nettadressen til et sfærisk bilde, og GuriVR vil ta vare på resten for deg.
Når du har gjort det, klikker du Lagre nederst på skjermen, og klikk deretter på Dele lenke knappen, og du får en link du kan gi til andre, for å vise panoramaet ditt.
Alternativt kan du legge inn panoramaet til en nettside ved hjelp av en iframe element. Oppdater din "gurivr.html" -fil med følgende kode, vær sikker på å legge til din egen GuriVR-URL i iframes src Egenskap:
GuriVR 360 Image Demo
Når du har gjort det ovenfor, bør du få et 360-panorama slik: https://tutsplus.github.io/VR_Panoramas/gurivr.html.
Du har nå tre forskjellige måter å lage WebVR-baserte panoramabilder og tillate folk å koble til fotografiet på en helt ny måte. La oss raskt gjenskape hva vi dekket:
Accentsconagua
manus tag, og deretter inne i den bruker VR.panorama () for å lage ditt 360-bilde.panorama og deretter nettadressen til bildet ditt for å lage ditt 360-bilde. Du kan eventuelt legge inn den angitte nettadressen til en nettside via en iframe.Nå som du har sett hvor raskt du kan opprette en WebVR-opplevelse fra en fotosfære, håper jeg du er inspirert til å komme deg ut og fange verden i tre dimensjoner!
