Share
Under senare tid har vi sett en ökning av populariteten och den tekniska förmågan hos virtuell verklighet. Typiskt, när vi tänker VR, tänker vi spel och dedikerad stationär programvara. Detta är dock inte det enda utrymme där virtuell verklighet växer.
Genom den ständigt stärkande kraften i WebGL gör nu den virtuella verkligheten nu också vägen till webbläsare i form av WebVR, och tillsammans med det kommer nya sätt att dela fotografering på alltmer fördjupande sätt.
Med ett foto i rätt format och en VR-enhet som Google Card, HTC Vive eller liknande kan en person göras för att känna att de står på exakt plats kameran var vid det att fotot togs, med förmåga att titta runt miljön, peering i djupet av simulerade 3D-rymden.
Och även utan en VR-enhet kan folk som surfar på nätet fortfarande panorera runt en sfärisk panoramabild med hjälp av en mus.
I denna handledning kommer vi att konfigurera WebVR-drivna 360-graders panorama på tre olika sätt, med hjälp av verktyg som syftar till att göra WebVR tillgängligt och enkelt att använda:
För att se vad vi arbetar mot, kolla in demos från vardera verktyget ovan och visa vilken typ av 360-bild vi ska göra:
Det finns två sätt att en 360-graders panorama kan interagera med och ses.
När en person tittar på ett WebVR 360-gradersfoto via en lämplig VR-klar enhet, till exempel en Google Kartong eller HTC Vive, delas bilden till två bilder och bearbetas på ett sådant sätt att headsetet kan använda dem för att skapa illusionen av djupet.
I det här fallet ser personen ut runt scenen genom att vända på plats och titta upp och ner. Enhetsens accelerometer uppdaterar bildskärmen för att spåra med den riktning användaren ser.
När en person tittar på en enhet som inte är VR-kapacitativ, kommer 360-gradersbilden att falla tillbaka för att visa som en enda bild som kan pannas runt genom att klicka och dra.
WebVR är fortfarande något blödande kant, så vissa aspekter av det är inte brett stöds. Men 360-graders panorama kräver bara en liten delmängd av WebVR-kapacitet, så stöd för åtminstone visning av fallback-nivå är faktiskt ganska utbredd.
Så länge en webbläsare stöder WebGL, kommer en tittare att se "klicka och dra" fallback för ett 360-bild. WebGL är nu fullt fungerande i alla större webbläsare.
För att kontrollera om en webbläsare du använder stöder WebGL, besök get.webgl.org. Om du ser en roterande kub är WebGL igång.
Flera telefoner stöder WebVR i kombination med ett headset som en Google Card eller Daydream. Med tanke på Googles senaste push på WebVR, är det ingen överraskning att dess iOS och Android versioner av Chrome stöder WebVR ur lådan.
Om du har ett Samsung Gear VR-headset, måste du använda Samsungs egen webbläsare.
Sättet att gå om att få installerat för att visa WebVR via en full desktop-driven huvudmonterad skärm beror på den aktuella enheten.
För Oculus Rift eller HTC Vive / SteamVR kan du använda antingen en experimentell byggnad av Chromium eller Firefox Nightly. Chromium WebVR-byggnaden är endast tillgänglig för Windows, medan Firefox Nightly också är tillgängligt för MacOS och Linux.
För närvarande stöder Oculus Rift endast Windows, utan rapporterade planer för plattformsstöd, så antingen är webbläsaren lämplig. Men plattformstöd för HTC Vice / SteamVR kommer snart snart, så om du har den här enheten och tycker att du kanske föredrar att skapa dina panoramabilder på macOS eller Linux då kanske du vill välja Firefox Nightly som huvud testar webbläsaren nu.
För fullständiga instruktioner om hur du installerar någon av dessa webbläsare för WebVR, besök Mozilla VR.
Bert eld, 2016. Brandmän rensar området på eldens sista dagar. Williams Ranger District, norr om Parks, AZ. 6-21-16. Foto av Dyan Bone. Betala US Forest Service, Southweste Region, Kaibab National Forest. CC BY SA.Det första du behöver är ett fotografi i ett format som lämpar sig för WebVR-panorama, vilket du kan se omväxlande kallas en sfärisk, equirectangular eller 360-graders bild. Du kan ta din egen av:
Vi har några bra artiklar som täcker några av de tekniker du kan använda:
Alternativt kan du källa equirectangular bilder via Flickr. Vi använder en bild från Kaibab National Forest för denna handledning.
Skapa en katalog för att hysa panoramaerna du ska skapa, hämta filen ovan och hämta bilden till "fire.jpg".
Om du planerar att se din panorama i fullständig WebVR snarare än bara som en klick och dra bild i en skrivbords webbläsare, vill du noga ladda ner versionen "Original Size" på 10240 x 5120 för maximal visuell trovärdighet. Var dock medveten om att användare kan se en blank vit skärm medan den här stora bilden laddas, beroende på deras internetanslutning. Om det här kan vara ett problem, välj en av de mindre storlekarna istället.
Obs! Om du ser ett svart hål längst ner i panoramaerna du skapar med den här bilden betyder det att filen är ofullständig och du måste ladda ner den igen.
Om du vill testa dina panoramabilder på en fjärr- / sekundär enhet, till exempel på en kartongbar telefon, vill du också ha en möjlighet att visa dina filer via ditt lokala nätverk. Du kan göra det men du föredrar, men två möjliga alternativ du kanske vill använda är:
Varje exempel kommer att sitta på sin egen webbsida, så du behöver bara ett mycket grundläggande HTML-dokument för att komma igång med varje exempel:
360 panorama foton
I katalogen för ditt projekt skapar du tre HTML-filer:
Sedan klistra in startkoden i varje fil, ändra innehållet i
Om du skapade ett WebVR-panorama från början, skulle det vara ganska komplext, vilket kräver ganska omfattande kodning. Men med utmärkta ramar som WebVR Starter Kit, kokas processen ner i två steg.
Alla VR-upplevelser du kan skapa med WebVR Starter Kit drivs av en enda JavaScript-fil. Så för att komma igång behöver du bara ladda den JS-filen till ... avsnittet av filen "webvrstarterkit.html" genom att klistra in i följande kod:
Om du föredrar att inte ladda denna JS-fil från en extern källa kan du ladda ner WebVR-projektet från sitt GitHub-arkiv. Du hittar "vr.js" -filen i "bygg" -katalogen.
Med WebVR JavaScript laddad, är sidan nu klar för att ha VR-element tillagt det. För att skapa en 360 graders panorama, sätt i följande kod i ... sektion:
Och det är allt! Din 360 graders panorama är nu klar att gå.
Observera att värdet mellan parentes är sökvägen till vår equirectangular image. Det här kan också ställas in för att ladda en extern bild genom att istället lägga in en webbadress.
När du förhandsgranskar din "webvrstarterkit.html" -fil nu ska det se ut så här: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html.
A-Frame är en annan WebVR-ram, men sättet att skapa en 360-panorama är väldigt lik vad du har gjort ovan. Precis som med WebVR Starter Kit, drivs A-Frame av en enda JavaScript-fil. Ladda den filen till ... avsnittet av filen "aframe.html" med den här koden:
Om du föredrar att inte ladda JS-filen från en extern källa kan du ladda ner A-Frame-arkivet från GitHub. Från mappen "dist" ska du använda den minifierade versionen av manuset för den aktuella versionen av projektet, t.ex. "A-ram-v0.4.0.min.js".
Istället för att använda en skriptikett i sidokroppen använder A-Frame egna egna HTML-element. Det första elementet som ska läggas till är alltid
De
Sedan lägger du till följande kod i filen för att lägga till din 360 graders bild ... sektion:
Dina resultat ska se ut så här: https://tutsplus.github.io/VR_Panoramas/aframe.html.
Under huven är GuriVR faktiskt A-Frame-biblioteket. Vad den försöker göra är att ge ett intuitivt och enkelt sätt att skapa VR-upplevelser genom ett redigeringsgränssnitt.
För att använda GuriVR, gå till GuriVR-redigeraren. I redigeringsgränssnittet kan du bara skriva in ordet panorama följt av webbadressen till en sfärisk bild, och GuriVR tar hand om resten för dig.
När du har gjort det klickar du på Spara längst ned på skärmen och klicka sedan på Dela länk knappen, och du får en länk som du kan ge till andra för att visa upp din panorama.
Alternativt kan du bädda in panorama till en webbsida med en iframe element. Uppdatera din "gurivr.html" -fil med följande kod, var noga med att lägga till din egen GuriVR-URL i iframes src attribut:
GuriVR 360 Bild Demo
När du har gjort ovanstående borde du få en 360 panorama så här: https://tutsplus.github.io/VR_Panoramas/gurivr.html.
Du har nu tre olika sätt att skapa WebVR-baserade panoramabilder och låta människor ansluta till din fotografi på ett helt nytt sätt. Låt oss snabbt återskapa vad vi täckte:
Accentsconagua
manus tagg, och sedan inuti den använder VR.panorama () för att skapa din 360-bild.panorama och sedan webbadressen till ditt foto för att skapa din 360-bild. Bädda in den angivna webbadressen till en webbsida via en iframe.Nu när du har sett hur snabbt du kan skapa en WebVR-upplevelse från en fotosfär, hoppas jag att du är inspirerad att komma ut och fånga världen i tre dimensioner!
