Schneller Einstieg in die WebVR Entwicklung

31. August 2017 Ralf Dreiundzwanzig Open Source Schlagwörter: Mozilla A-Frame, Virtual Reality, Web VR 0 Kommentare

A-Frame ist ein Framework zur Darstellung von 3-D-Objekten und für virtuelle Realität im Webbrowser, das seit 2015 von Mozilla als Open Source Software entwickelt wird.

A-Frame erlaubt die Schaffung dreidimensionaler Welten mittels einer deklarativen Sprache, die dem aus HTML und XML bekannten Entitäts-System folgt. 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 ein Head-Mounted Display benutzt werden.

Ü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.

Verwandeln Sie Ihren Commerce mit AR und 3D-Produktvisualisierung!

Bei uns geht es um Techniken, die es schaffen, das Produkt zum Erlebnis zu machen. Virtual & Augmented Reality, 360 Grad-Videos, Darstellungen in 3D, virtuelle Showrooms. Die Besucher:innen sollen eintauchen in die Welt des Unternehmens mit immersiven Technologien.

Sie können uns mit der Erstellung von individuellen 3D-Visualisierungen beauftragen. Jeder kann 3D-Visualisierungen bei unserem Kreativservice bestellen - unabhängig davon, ob Sie nur ein einzelnes 3D-Modell benötigen oder viele.

Produktion von 3D-Inhalten

A-Frame kann aus einer einfachen HTML-Datei entwickelt werden, ohne dass irgendetwas installiert werden muss! Eine großartige Möglichkeit, A-Frame auszuprobieren, ist der Remix des Starter-Beispiels auf Glitch, einem Online-Code-Editor, der sofort kostenlos gehostet und bereitgestellt wird. Oder erstelle eine. html Datei und füge-Frame in den ein:

<html>
  <head>
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Virtual-Reality-Museum

Das Virtual-Reality-Museum auf Basis von A-Frame ist eine Demo, die von r23 geforkt wird, 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.

Weitere Informationen über unser WebVR Projekt findest du in unserem Blog.
Die Quellen findest du hier auf Github.

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 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 unterstützt die meisten VR-Headsets wie Vive, Rift, Daydream, GearVR, Cardboard und kann sogar für Augmented Reality verwendet werden. Obwohl A-Frame das gesamte Spektrum unterstützt, zielt A-Frame darauf ab, interaktive VR-Erlebnisse zu definieren, die über den grundlegenden 360°-Inhalt hinausgehen und dabei die Positionsverfolgung und Controller voll nutzen.

Was ist Virtuelle Realität?

Virtual Reality (VR) ist eine Technologie, die Headsets mit Displays verwendet, um realistische Bilder, Geräusche und andere Empfindungen zu erzeugen und den Benutzer in eine virtuelle Umgebung zu versetzen. VR ermöglicht es uns, unbegrenzte Welten zu erschaffen, in denen Menschen mit ihren Händen interagieren können, als ob sie an einen anderen Ort transportiert würden. Zum Beispiel die Mission zum Mars in unserem Blog.

Was sind die Unterschiede zwischen Headsets?

Es gibt mehrere Consumer VR-Headsets mit unterschiedlichen Features auf dem Markt. Wichtige Unterscheidungsmerkmale sind:

Positionale Nachführung (6 Freiheitsgrade (6DoF)) oder nur Rotationsverfolgung (3DoF).
Controller oder nicht, und ob diese Controller 6DoF oder 3DoF unterstützen.
Werden von einem PC oder einem mobilen Gerät oder Smartphone mit Strom versorgt.

Die Rotationsverfolgung ermöglicht es Personen, sich umzuschauen oder Objekte zu drehen. Alle Headsets sind mit Rotationsverfolgung ausgestattet.

Die Positionsverfolgung ermöglicht es Personen, sich zu bewegen, näher an die Objekte heranzukommen und nach vorne zu gelangen.

Zukünftige Headsets der Zukunft sind Mixed Reality und Augmented Reality Headsets von Windows, die mit A-Frame auf irgendeiner Ebene funktionieren.

Was ist WebVR?

WebVR ist ein JavaScript API für die Erstellung von 3D, Virtual Reality Erlebnissen in deinem Browser. WebVR wurde ursprünglich bei Mozilla von[Vladimir Vukicvic] konzipiert. Siehe WebVR API-Spezifikation auf W3C.

A-Frame nutzt die WebVR API, um Zugriff auf die Sensordaten des VR-Headsets zu erhalten (Position, Ausrichtung), um die Kamera zu transformieren und Inhalte direkt in VR-Headsets zu rendern.

Aktuelle und detaillierte Informationen zu WebVR findet ihr unter https://webvr.rocks:

Links

https://aframe.io/
https://blog.r23.de/museum/
Virtual-Reality-Museum Quellen auf Github

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!

Wie können wir Ihnen helfen?

Wir unterstützen Sie bei der Umsetzung Ihres Augmented Reality (AR) oder Virtual Reality (VR) Projektes! Ob Produktfotografie, 3D-Scan-Service, 3D-Visualisierung oder fertige 3D-Modelle für AR/VR - wir beraten Sie persönlich und unverbindlich.

Wenn Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen (Fotos, Zeichnungen, Skizzen) wünschen, nutzen Sie einfach unser Anfrageformular.