Share
In letzter Zeit haben wir einen Anstieg der Popularität und technischen Möglichkeiten der virtuellen Realität erlebt. Wenn wir an VR denken, denken wir normalerweise an Spiele und dedizierte Desktopsoftware. Dies ist jedoch nicht der einzige Raum, in dem die virtuelle Realität wächst.
Durch die immer stärker werdende Kraft von WebGL dringt Virtual Reality mit WebVR nun auch in Browsern ein, und es ergeben sich immer neue Möglichkeiten, die Fotografie auf immer immersivere Art und Weise zu teilen.
Mit einem Foto im richtigen Format und einem VR-Gerät wie Google Cardboard, HTC Vive oder ähnlichem kann eine Person dazu gebracht werden, das Gefühl zu haben, dass sie genau an der Stelle steht, an der sich die Kamera zum Zeitpunkt der Aufnahme befand, mit der Die Möglichkeit, die gesamte Umgebung zu betrachten und in die Tiefe des simulierten 3D-Raums zu blicken.
Und auch ohne VR-Gerät können Benutzer, die im Internet surfen, mit einer Maus rund um ein sphärisches Panoramabild schwenken.
In diesem Lernprogramm werden auf drei verschiedene Arten WebVR-basierte 360-Grad-Panoramen eingerichtet, wobei Tools verwendet werden, die darauf abzielen, WebVR zugänglich und unkompliziert zu verwenden:
Um zu sehen, worauf wir hinarbeiten, schauen Sie sich die Demos von jedem der oben genannten Tools an und zeigen, welche Art von 360-Image wir machen werden:
Es gibt zwei Möglichkeiten, um ein 360-Grad-Panorama zu interagieren und anzuzeigen.
Wenn eine Person ein WebVR-360-Grad-Foto mit einem geeigneten VR-fähigen Gerät wie z. B. Google Cardboard oder HTC Vive ansieht, wird das Bild in zwei Bilder aufgeteilt und so verarbeitet, dass das Headset verwendet werden kann sie, um die Illusion der Tiefe zu erzeugen.
In diesem Fall schaut sich die Person einfach durch die Szene um und schaut auf und ab. Der Beschleunigungsmesser des Geräts aktualisiert die Bildanzeige so, dass die Richtung angezeigt wird, in die der Benutzer blickt.
Wenn eine Person durch ein Gerät betrachtet, das nicht VR-fähig ist, wird das 360-Grad-Bild als ein einzelnes Bild angezeigt, das durch Klicken und Ziehen verschoben werden kann.
WebVR ist immer noch ein Schwachpunkt, daher werden einige Aspekte nicht umfassend unterstützt. Für 360-Grad-Panoramen ist jedoch nur ein kleiner Teil der WebVR-Funktionen erforderlich. Daher ist die Unterstützung für die Anzeige von Fallback-Ebenen zumindest ziemlich weit verbreitet.
Solange ein Browser WebGL unterstützt, wird für einen 360-Foto-Fall ein Betrachter "klicken und ziehen" angezeigt. WebGL ist jetzt in allen gängigen Browsern voll funktionsfähig.
Um zu überprüfen, ob ein Browser, den Sie verwenden, WebGL unterstützt, besuchen Sie get.webgl.org. Wenn Sie einen rotierenden Würfel sehen, ist WebGL in Betrieb.
Mehrere Telefone unterstützen WebVR in Kombination mit einem Headset wie Google Cardboard oder Daydream. Angesichts des jüngsten Drucks von Google auf WebVR ist es kein Wunder, dass die iOS- und Android-Versionen von Chrome WebVR sofort unterstützen.
Wenn Sie jedoch ein Samsung Gear VR-Headset besitzen, müssen Sie den eigenen Browser von Samsung verwenden.
Wie Sie die Anzeige von WebVR über ein Desktop-basiertes Head-Mounted-Display einrichten, hängt von der jeweiligen Einheit ab.
Für den Oculus Rift oder HTC Vive / SteamVR können Sie entweder einen experimentellen Build von Chromium oder Firefox Nightly verwenden. Der Chromium WebVR-Build ist nur für Windows verfügbar, während Firefox Nightly auch für Mac OS und Linux verfügbar ist.
Derzeit unterstützt Oculus Rift nur Windows. Es gibt keine Pläne für plattformübergreifende Unterstützung, sodass jeder Browser geeignet ist. Die plattformübergreifende Unterstützung für HTC Vice / SteamVR soll jedoch in Kürze verfügbar sein. Wenn Sie also dieses Gerät haben und der Meinung sind, dass Sie Ihre Panoramen zu diesem Zeitpunkt unter Mac OS oder Linux erstellen möchten, sollten Sie Firefox Nightly als Hauptbildschirm auswählen Browser jetzt testen.
Um vollständige Anweisungen zum Einrichten eines dieser Browser für WebVR zu erhalten, besuchen Sie Mozilla VR.
Bert fire, 2016. Feuerwehrleute räumen das Gebiet an den letzten Tagen des Feuers auf. Williams Ranger District, nördlich von Parks, AZ. 6-21-16. Foto von Dyan Bone. Gutschrift beim US Forest Service, Region Southwest, Kaibab National Forest. CC BY SA.Das erste, was Sie brauchen, ist ein Foto in einem Format, das für WebVR-Panoramen geeignet ist. Sie werden austauschbar als kugelförmiges, gleichrechteckiges oder 360-Grad-Foto bezeichnet. Sie können selbst mitmachen:
Wir haben einige großartige Artikel über einige der Techniken, die Sie verwenden können:
Alternativ können Sie gleichseitige Bilder über Flickr beziehen. Wir werden für dieses Tutorial ein Bild aus dem Kaibab National Forest verwenden.
Erstellen Sie ein Verzeichnis, in dem sich die Panoramen befinden, die Sie erstellen, laden Sie die obige Datei herunter und benennen Sie das Bild in "fire.jpg" um..
Wenn Sie vorhaben, Ihr Panorama in einer vollständigen WebVR-Ansicht zu betrachten, anstatt nur ein Klick- und Ziehen-Bild in einem Desktop-Browser anzuzeigen, sollten Sie die "Original Size" -Version bei 10240 x 5120 herunterladen, um eine maximale Wiedergabetreue zu erreichen. Beachten Sie jedoch, dass Benutzer einen leeren weißen Bildschirm sehen, während dieses große Bild geladen wird, abhängig von der Internetverbindung. Wenn dies möglicherweise ein Problem ist, wählen Sie stattdessen eine der kleineren Größen.
Hinweis: Wenn Sie später ein schwarzes Loch am unteren Rand der mit diesem Bild erstellten Panoramen sehen, bedeutet dies, dass die Datei unvollständig ist und Sie sie erneut herunterladen müssen.
Wenn Sie Ihre Panoramen auf einem Remote- / Sekundärgerät testen möchten, z. B. auf einem Telefon mit Pappkarton, möchten Sie auch, wie Sie Ihre Dateien über Ihr lokales Netzwerk anzeigen können. Sie können dies wie gewünscht tun, aber zwei mögliche Optionen, die Sie verwenden möchten, sind:
Jedes Beispiel wird auf einer eigenen Webseite angezeigt. Sie benötigen also ein einfaches HTML-Dokument, um mit jedem Beispiel zu beginnen:
360 Panoramafotos
Erstellen Sie im Verzeichnis für Ihr Projekt drei HTML-Dateien:
Fügen Sie dann den Startercode in jede Datei ein und ändern Sie den Inhalt der Datei
Wenn Sie ein WebVR-Panorama von Grund auf erstellen, ist es ziemlich komplex und erfordert eine umfangreiche Codierung. Bei hervorragenden Frameworks wie dem WebVR Starter Kit besteht der Prozess jedoch aus zwei Schritten.
Alle VR-Erlebnisse, die Sie mit dem WebVR Starter Kit erstellen können, basieren auf einer einzigen JavaScript-Datei. Um zu beginnen, müssen Sie nur diese JS-Datei in die … Abschnitt Ihrer Datei "webvrstarterkit.html" durch Einfügen in den folgenden Code-Ausschnitt:
Wenn Sie diese JS-Datei nicht von einer externen Quelle laden möchten, können Sie das WebVR-Projekt aus seinem GitHub-Repository herunterladen. Die Datei "vr.js" befindet sich im Verzeichnis "build".
Wenn das WebVR-JavaScript geladen ist, kann die Seite jetzt VR-Elemente hinzugefügt werden. Um ein 360-Grad-Panorama zu erstellen, fügen Sie den folgenden Code in das ein … Sektion:
Und das ist es! Ihr 360-Grad-Panorama ist jetzt einsatzbereit.
Beachten Sie, dass der Wert zwischen den Klammern der Pfad zu unserem gleichwinkligen Bild ist. Dies kann auch so eingestellt werden, dass stattdessen ein externes Bild geladen wird, indem eine URL eingefügt wird.
Wenn Sie jetzt eine Vorschau der Datei "webvrstarterkit.html" anzeigen, sollte diese wie folgt aussehen: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html.
A-Frame ist ein anderes WebVR-Framework, aber die Möglichkeiten zum Erstellen eines 360-Panoramas sind sehr ähnlich wie oben beschrieben. Wie beim WebVR Starter Kit wird A-Frame von einer einzigen JavaScript-Datei unterstützt. Laden Sie diese Datei in die … Abschnitt Ihrer "aframe.html" -Datei mit diesem Code:
Wenn Sie die JS-Datei nicht von einer externen Quelle laden möchten, können Sie das A-Frame-Repository von GitHub herunterladen. Im Ordner "dist" sollten Sie die minimierte Version des Skripts für die aktuelle Version des Projekts verwenden, z. "aframe-v0.4.0.min.js".
Anstelle eines Skript-Tags im Seitenkörper verwendet A-Frame seine eigenen benutzerdefinierten HTML-Elemente. Das erste hinzuzufügende Element ist immer
Das
Fügen Sie dann zum Hinzufügen Ihres 360-Grad-Bildes den folgenden Code in das ein … Sektion:
Ihre Ergebnisse sollten so aussehen: https://tutsplus.github.io/VR_Panoramas/aframe.html.
Unter der Haube ist GuriVR eigentlich die A-Frame-Bibliothek. Was es zu tun versucht, ist eine intuitive und unkomplizierte Möglichkeit, VR-Erlebnisse über eine Editorschnittstelle einzurichten.
Um GuriVR zu verwenden, gehen Sie zum GuriVR-Editor. In der Bearbeitungsoberfläche können Sie einfach das Wort eingeben Panorama gefolgt von der URL zu einem kugelförmigen Bild, und GuriVR kümmert sich um den Rest für Sie.
Sobald Sie das getan haben, klicken Sie auf sparen Klicken Sie am unteren Bildschirmrand auf und Einen Link teilen und Sie erhalten einen Link, den Sie anderen geben können, um Ihr Panorama darzustellen.
Alternativ können Sie das Panorama mit einem in eine Webseite einbetten iframe Element. Aktualisieren Sie Ihre "gurivr.html" -Datei mit dem folgenden Code, und stellen Sie sicher, dass Sie Ihre eigene GuriVR-URL zum iframe hinzufügen src Attribut:
GuriVR 360 Image Demo
Wenn Sie die obigen Schritte ausgeführt haben, sollten Sie ein 360-Panorama-Panorama wie folgt erhalten: https://tutsplus.github.io/VR_Panoramas/gurivr.html.
Sie haben jetzt drei verschiedene Möglichkeiten, WebVR-basierte Panoramen zu erstellen und es den Personen zu ermöglichen, eine völlig neue Verbindung zu Ihrer Fotografie herzustellen. Lassen Sie uns kurz zusammenfassen, was wir beschrieben haben
Accentsconagua
Skript tag und dann innen verwenden VR.panorama () So erstellen Sie Ihr 360-Bild.Panorama und dann die URL Ihres Fotos, um Ihr 360-Bild zu erstellen. Optional können Sie die angegebene URL über eine. In eine Webseite einbetten iframe.Nun, da Sie gesehen haben, wie schnell Sie aus einem Fotobereich ein WebVR-Erlebnis erstellen können, hoffen Sie, dass Sie dazu inspiriert werden, die Welt dreidimensional zu erfassen!
