Share
De laatste tijd zien we een toename in de populariteit en technische mogelijkheden van virtual reality. Wanneer we VR denken, denken we meestal aan gaming en speciale desktopsoftware. Dit is echter niet de enige ruimte waarin de virtuele realiteit groeit.
Door de steeds sterker wordende kracht van WebGL, virtual reality is nu ook zijn weg naar browsers in de vorm van WebVR, en samen met het komen nieuwe manieren om fotografie te delen op steeds meer meeslepende manieren.
Met een foto in het juiste formaat en een VR-apparaat zoals Google Cardboard, HTC Vive of iets dergelijks, kan een persoon het gevoel geven dat hij op de exacte plek staat waar de camera was op het moment dat de foto werd gemaakt, met de mogelijkheid om overal in de omgeving rond te kijken, peering in de diepte van gesimuleerde 3D-ruimte.
En zelfs zonder een VR-apparaat kunnen mensen die op internet surfen nog steeds rondom een bolvormig panoramisch beeld pannen met een muis.
In deze zelfstudie stellen we op drie verschillende manieren WebVR-aangedreven 360-graden panorama's in, met behulp van hulpmiddelen die ervoor zorgen dat WebVR toegankelijk en eenvoudig te gebruiken is:
Om te zien waar we naartoe werken, bekijk demo's van elk van de bovenstaande tools en laat zien welk type 360-afbeelding we gaan maken:
Er zijn twee manieren waarop een panorama van 360 graden kan worden gebruikt en bekeken.
Wanneer een persoon bijvoorbeeld een WebVR 360-graden foto bekijkt via een geschikt apparaat dat geschikt is voor VR, zoals een Google Cardboard of een HTC Vive, wordt de afbeelding opgesplitst in twee afbeeldingen en zo verwerkt dat de headset deze kan gebruiken ze om de illusie van diepte te genereren.
In dit geval kijkt de persoon rond het toneel door eenvoudigweg op de plek te draaien en op en neer te kijken. De versnellingsmeter van het apparaat werkt de beeldweergave bij om bij te houden in de richting waarin de gebruiker kijkt.
Wanneer een persoon door een apparaat kijkt dat niet geschikt is voor VR, zal het beeld van 360 graden terugvallen op het weergeven als een enkele afbeelding die kan worden rondgepland door te klikken en te slepen.
WebVR is nog steeds enigszins aftands, dus sommige aspecten ervan worden niet breed ondersteund. Panoramafoto's van 360 graden vereisen echter slechts een kleine subset van WebVR-mogelijkheden, dus ondersteuning voor ten minste fallback-niveau weergave is eigenlijk vrij wijdverbreid.
Zolang een browser WebGL ondersteunt, krijgt een kijker een "klik en sleep" terugval voor een 360 ° -foto. WebGL is nu volledig functioneel in alle belangrijke browsers.
Ga naar get.webgl.org om te controleren of een browser die u gebruikt WebGL ondersteunt. Als u een roterende kubus ziet, is WebGL actief.
Verschillende telefoons ondersteunen WebVR in combinatie met een headset zoals een Google Cardboard of Daydream. Gezien Google's recente push op WebVR, is het geen verrassing dat zijn iOS- en Android-versies van Chrome WebVR out of the box ondersteunen.
Als u echter een Samsung Gear VR-headset hebt, moet u de Samsung-browser gebruiken.
De manier om te beginnen met instellen om WebVR te bekijken via een volledig op het bureau aangesloten beeldscherm, is afhankelijk van het apparaat in kwestie.
Voor de Oculus Rift of HTC Vive / SteamVR kunt u een experimentele versie van Chromium of Firefox Nightly gebruiken. De Chromium WebVR-build is alleen beschikbaar voor Windows, terwijl Firefox Nightly ook beschikbaar is voor macOS en Linux.
Op dit moment ondersteunt Oculus Rift alleen Windows, zonder gerapporteerde plannen voor platformonafhankelijke ondersteuning, dus beide browsers zijn geschikt. Echter, platformonafhankelijke ondersteuning voor HTC Vice / SteamVR komt naar verluidt zeer binnenkort, dus als je dit apparaat hebt en denkt dat je op dat moment misschien je panorama's wilt maken op macOS of Linux, zou je Firefox Nightly als jouw belangrijkste willen kiezen nu de browser testen.
Ga naar Mozilla VR voor volledige instructies over het instellen van een van deze browsers voor WebVR.
Bert fire, 2016. Brandweerlieden ruimen het gebied af op de laatste dagen van het vuur. Williams Ranger District, ten noorden van Parks, AZ. 6-21-16. Foto door Dyan Bone. Met dank aan de Amerikaanse Forest Service, Southweste rn Region, Kaibab National Forest. CC BY SA.Het eerste dat u nodig heeft, is een foto in een indeling die geschikt is voor WebVR-panorama's, die u onderling door elkaar kunt verwijzen als een bolvormige, evenrechthoekige of 360 graden foto. Je kunt je eigen maken door:
We hebben enkele geweldige artikelen over enkele van de technieken die u kunt gebruiken:
Als alternatief kunt u equirectangular-afbeeldingen via Flickr genereren. Voor deze tutorial gebruiken we een afbeelding uit het Kaibab National Forest.
Maak een directory om de panorama's die je gaat maken onder te brengen, download het bovenstaande bestand erin en hernoem de afbeelding naar "fire.jpg".
Als u van plan bent om uw panorama volledig in WebVR te bekijken in plaats van alleen als een afbeelding met slepen en slepen in een desktopbrowser, wilt u waarschijnlijk de versie "Origineelformaat" downloaden op 10240 x 5120 voor maximale visuele getrouwheid. Houd er echter rekening mee dat gebruikers een leeg wit scherm kunnen zien terwijl deze grote afbeelding wordt geladen, afhankelijk van hun internetverbinding. Als dit mogelijk een probleem is, kiest u in plaats daarvan een van de kleinere formaten.
NB: later, als u een zwart gat ziet onderaan de panorama's die u met deze afbeelding maakt, betekent dit dat het bestand onvolledig is en u het opnieuw moet downloaden.
Als u uw panorama's op een extern / secundair apparaat wilt testen, bijvoorbeeld op een Cardboard-compatibele telefoon, wilt u ook een manier om uw bestanden via uw lokale netwerk te bekijken. U kunt dit echter doen, maar u kunt twee mogelijke opties gebruiken:
Elk voorbeeld zal op zijn eigen webpagina staan, dus je hebt gewoon een heel eenvoudig HTML-document nodig om aan de slag te gaan met elk voorbeeld:
360 panoramafoto's
Maak in de map voor uw project drie HTML-bestanden:
Plak vervolgens de startercode in elk bestand en verander de inhoud van de
Als u vanuit het niets een WebVR-panorama aan het maken was, zou dit vrij complex zijn en vrij uitgebreide codering vereisen. Met uitstekende frameworks zoals de WebVR Starter Kit is het proces echter in twee stappen omgezet.
Alle VR-ervaringen die u kunt maken met de WebVR Starter Kit worden mogelijk gemaakt door een enkel JavaScript-bestand. Dus om te beginnen, hoeft u alleen dat JS-bestand in de. Te laden ... gedeelte van uw "webvrstarterkit.html" -bestand door in het volgende fragment te plakken:
Als u dit JS-bestand liever niet vanuit een externe bron laadt, kunt u het WebVR-project downloaden vanuit de GitHub-repository. U vindt het bestand "vr.js" in de map "build".
Met de WebVR JavaScript geladen, is de pagina nu klaar om VR-elementen te laten toevoegen. Als u een 360-graden panorama wilt maken, plaatst u de volgende code in de ... sectie:
En dat is het! Uw 360-graden panorama is nu klaar voor gebruik.
Merk op dat de waarde tussen de haakjes het pad is naar onze equirectangular afbeelding. Dit kan ook worden ingesteld om een externe afbeelding te laden door in plaats hiervan een URL in te voegen.
Wanneer u nu een voorbeeld van uw "webvrstarterkit.html" -bestand bekijkt, ziet het er als volgt uit: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html.
A-Frame is een ander WebVR-framework, maar de middelen om een 360 ° -panorama te maken, lijken veel op wat u hierboven hebt voltooid. Net als bij de WebVR Starter Kit wordt A-Frame aangedreven door een enkel JavaScript-bestand. Laad dat bestand in de ... deel van uw "aframe.html" bestand met deze code:
Als u het JS-bestand liever niet vanuit een externe bron laadt, kunt u de A-Frame-repository downloaden van GitHub. In de map "dist" moet u de verkleinde versie van het script gebruiken voor de huidige versie van het project, bijvoorbeeld "Aframe-v0.4.0.min.js".
In plaats van een scripttag in de pagina te gebruiken, gebruikt A-Frame zijn eigen aangepaste HTML-elementen. Het eerste element dat moet worden toegevoegd, is altijd
De
Voeg vervolgens de volgende code toe om uw 360-graden-afbeelding toe te voegen ... sectie:
Uw resultaten moeten er als volgt uitzien: https://tutsplus.github.io/VR_Panoramas/aframe.html.
Onder de motorkap is GuriVR eigenlijk de A-Frame-bibliotheek. Wat het probeert te doen is een intuïtieve, eenvoudige manier geven om VR-ervaringen in te stellen via een editorinterface.
Ga naar de GuriVR-editor om GuriVR te gebruiken. In de bewerkingsinterface kunt u gewoon het woord invoeren panorama gevolgd door de URL naar een sferische afbeelding en GuriVR zorgt voor de rest voor u.
Als je dat eenmaal hebt gedaan, klik je op Opslaan onder aan het scherm en klik vervolgens op Deel link knop, en u krijgt een link die u aan anderen kunt geven om uw panorama te laten zien.
Als alternatief kunt u het panorama in een webpagina insluiten met behulp van een iframe element. Werk uw "gurivr.html" -bestand bij met de volgende code, zorg ervoor dat u uw eigen GuriVR-URL toevoegt aan de iframe's src attribuut:
GuriVR 360 Image Demo
Wanneer je het bovenstaande hebt gedaan, zou je een 360 panorama moeten krijgen zoals dit: https://tutsplus.github.io/VR_Panoramas/gurivr.html.
U hebt nu drie verschillende manieren om op WebVR gebaseerde panorama's te maken en mensen in staat te stellen verbinding te maken met uw fotografie op een geheel nieuwe manier. Laten we snel samenvatten wat we hebben behandeld:
Accentsconagua
script tag en vervolgens erin VR.panorama () om je 360 ° -afbeelding te maken.panorama en vervolgens de URL van uw foto om uw 360 ° -afbeelding te maken. Optioneel, embed de verstrekte URL in een webpagina via een iframe.Nu je hebt gezien hoe snel je een WebVR-ervaring uit een 360 ° foto kunt maken, hoop ik dat je geïnspireerd bent om daar weg te gaan en de wereld in drie dimensies te vangen!
