Schneller Einstieg in die WebVR Entwicklung

Open Source Schlagwörter: , , 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 -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.
Charakterdesign / Maskottchen

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.

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 -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 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 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 Headsets von Windows, die mit A-Frame auf irgendeiner Ebene funktionieren.

Was ist 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 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 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.

Schneller Einstieg in die WebVR Entwicklung 1

R23 Newsletter

ABONNIEREN SIE UNSEREN NEWSLETTER

Liebe Leserin, lieber Leser,

wenn Sie sich für aktuelle Themen und Tipps rund um unser Atelier für Virtual & interessieren, dann melden Sie sich jetzt für unseren kostenlosen Newsletter an. Sie erhalten wöchentlich eine E-Mail mit spannenden Artikeln, exklusiven Angeboten und praktischen Ratschlägen.

Um sich anzumelden, füllen Sie einfach das folgende Formular aus und klicken Sie auf “SETZ DICH AUF DIE LISTE”. Sie können sich jederzeit wieder abmelden, wenn Sie möchten.

Wir freuen uns auf Ihre Anmeldung!

Wir senden keinen Spam! Erfahren Sie mehr in unserer Datenschutzerklärung.

Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen uns damit eine große Freude!
R23
R23 : Metaverse, Augmented Reality, Virtual Reality

Kommentar verfassen

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

Ralf Dreiundzwanzig: Atelier für Virtual & Augmented Reality

Aktuell

Virtuelle Influencerin

Charakterdesign
In unserem r23 Atelier in Hagen entwerfen wir für Ihr Unternehmen, Ihre Organisation oder Ihr Projekt die passende virtuelle Influencerin. Wir entwerfen gerade eine virtuelle Influencerin für uns selbst. Verfolgen Sie die Entstehung auf https://blog.r23.de/tag/claudia/
Virtuelle Influencer von R23