WebVR Tutorial: Einführung in A-Frame

Allgemein Schlagwörter: 0 Kommentare

WebVR ist eine API, die Zugriff auf Ein- und Ausgabefunktionen bietet, die mit Virtual Reality-Hardware wie Google Daydream, Oculus Rift, Samsung Gear VR, HTC Vive und Windows Mixed Reality Headsets verbunden sind. Einfach ausgedrückt, können wir damit Virtual Reality-Websites erstellen, die wir in einem VR-Headset anzeigen können.

WebVR zielt darauf ab, Dir VR-Erlebnisse zu ermöglichen, die in das Web eingebettet sind, das wir heute kennen und lieben. Es geht explizit nicht darum, einen Browser zu erstellen, den du komplett in VR verwendest (obwohl er in einer solchen Umgebung gut funktionieren könnte).

Angesichts der Vermarktung früher VR-Hardware an Gamer ist natürlich davon auszugehen, dass Virtual Reality in erster Linie für die Spieleentwicklung eingesetzt wird. Das ist sicherlich etwas, was wir aufgrund der Geschichte der WebGL-API, die eng verwandt ist, erwarten, aber wir werden wahrscheinlich viel mehr Virtual Reality -Inhalte sehen als groß angelegte Spiele.

VR-Inhalte im Internet werden sich im Großen und Ganzen auf Bereiche erstrecken, die nicht in ein App-Store passen. Einige Beispiele dafür sind:

Video

360°- und 3D-Video sind Bereiche von großem Interesse. Ein VR-fähiger Videoplayer würde, sobald er VR-Hardware erkennt, einen „View in VR“ -Button anzeigen, ähnlich wie die „Fullscreen“ -Buttons, die in heutigen Videoplayern vorhanden sind. Wenn der Benutzer auf diese Schaltfläche klickt, wird ein Video im Headset gerendert und reagiert auf natürliche Kopfbewegungen.

Objektvisualisierung

Websites können einfache 3D-Visualisierungen durch WebVR liefern, oft als eine Verbesserung ihrer traditionellen Darstellung. 3D-Modelle, Architekturvisualisierungen und Mapping können wirkungsvoller, leichter verständlich und maßstabsgetreu in VR dargestellt werden.

Homeshopping-Anwendungen (z. B. Matterport) zeigen dies besonders anschaulich. Je nach Geräteausstattung können Standorte vom einfachen Fotokarussell über ein interaktives 3D-Modell auf dem Bildschirm bis hin zur Komplettlösung in VR skaliert werden, so dass der Eindruck entsteht, als wäre man tatsächlich im Haus präsent. Die Möglichkeit, dass dies ein reibungsarmes Erlebnis für den Benutzer wird, ist ein großer Vorteil für Benutzer und Entwickler, da sie nicht zu überzeugen, die Benutzer zu einer schweren (und möglicherweise böswilligen) ausführbaren Datei vor der Hand zu installieren.

Künstlerische Erfahrungen

VR bietet eine interessante Leinwand für Künstler, die die Möglichkeiten eines neuen Mediums erforschen wollen. Künstler können mit einer einzigen Codebasis auch leichter Menschen für den Inhalt gewinnen und die unterschiedlichsten Geräte und Plattformen ansprechen.

Besuch im Virtual-Reality-Museum

Wir gestalten und arbeiten an unserem Open Source Virtual Reality Museum. Cecropia Solutions entwickelte auf Basis von THREE.js das ursprüngliche Projekt. Das Virtual-Reality-Museum ist für uns eine Demo um die WebVR-Fähigkeiten zu testen.

Navigation

In dieser Version ist die Hauptnavigation Handbedienung (Vive Stäbe und Oculus Touch), um einen teleportierenden Strahl zu schießen, um anzuprobieren, wo du sein willst.

Für den Desktop sind die herkömmlichen Spielkontrollen verfügbar (WASD, Pfeiltasten und Maus).

Für mobile Plattformen (GearVR und Cardboard) sind Teleport Spots mit einem Gaze Cursor der Weg, um zu den verschiedenen Zielen in der Halle zu springen.

Teste und probiere unseren Virtual Reality – Raum aus https://blog.r23.de/museum/

Was ist A-Frame?

A-Frame ist ein Web-Framework für die Erstellung von Virtual Reality (VR)-Erlebnissen. Ursprünglich von Mozilla entwickelt, ist A-Frame eine einfache, aber leistungsfähige Methode zur Entwicklung von VR-Inhalten. Als unabhängiges Open Source Projekt hat sich A-Frame zu einer der größten und einladendsten VR Communities entwickelt.

A-Frame basiert auf HTML und macht den Einstieg einfach. Aber A-Frame ist nicht nur ein 3D-Szenendiagramm oder eine Markup-Sprache, sondern der Kern ist ein leistungsfähiges Entity-Komponente-Framework, das eine deklarative, erweiterbare und kompilierbare Struktur zu three.js bereitstellt.

A-Frame erlaubt die Schaffung dreidimensionaler Welten mittels einer deklarativen Sprache. Objekte werden durch Tags angegeben, ihre Eigenschaften wie Position und Farbe in Attributen. Neben den standardmäßig zur Verfügung stehenden Objekten besteht auch die Möglichkeit, eigene Komponenten zu erstellen oder aus anderen Quellen einzubinden.

A-Frame stellt die so definierten Objekte dann grafisch dar und ermöglicht es dem Benutzer, in der Szene zu navigieren. Im einfachsten Fall wird die Szene einfach am Bildschirm gerendert, über die WebVR-API kann aber in modernen Browsern auch eine Virtual Reality-Brille benutzt werden. Intern setzt A-Frame bei der Darstellung die Bibliothek three.js ein.

Über Manipulationen des DOM kann die Szene auch nachträglich verändert werden. Mit Bildwiederholraten von 90 fps können dabei flüssige Bewegungen dargestellt werden.

Das könnte Dich auch interessieren

Wir bieten 3D – Charakterdesign nach deinem Ebenbild in unserem Atelier an. Wir benötigen nur wenige Fotos und einige Maße von dir und wenige Tage später erhältst du von uns dein 3D – Charakter, den Du anschließend in Deinem 3D Projekt wirkungsvoll in Szene setzen kannst.

Shopbetreiber, die das volle Potenzial von VR-Commerce ausschöpfen wollen, brauchen die Produktdaten in 3D. In unserem Fotostudio in Hagen scannen wir deine Produkte für VR-Commerce. Den Service kannst du online buchen.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Ich bin dir für jede Unterstützung dankbar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Business Shooting

Mit dem visuellen Erscheinungsbild beginnt alles. Egal ob Du Freelancer, langjähriger Unternehmer oder Verantwortlicher eines Start-ups bist – Du musst nach außen kommunizieren, für welche Kompetenzen und Botschaften Du stehst.
Imagefördernde Fotos unterstützen ein Unternehmen dabei, sich erfolgreich und attraktiv zu präsentieren und damit neue Kunden anzusprechen.
Bei meiner Arbeit geht es mir sowohl um die ausdrucksstarke und kompetente Darstellung der Führungskräfte und Mitarbeiter als auch um die repräsentative Abbildung der Produkte.

Aktuell

Blog via E-Mail abonnieren

Gib Deine E-Mail-Adresse an, um diesen Blog zu abonnieren und Benachrichtigungen über neue Beiträge via E-Mail zu erhalten.