A-Frame – Virtual Reality im Web erstellen

Open Source Schlagwörter: , , , 0 Kommentare

Nightly unterstützt seit 16..08.2016 Version 1.0 der -API. VR steht für Virtuelle Realität. Bereits seit Anfang 2015 bietet Firefox eine erste WebVR-Unterstützung in Nightly Builds. Ich selbst bin seit weinigen Monaten Mitglied der WebVR W3C Community Group. In diesem r23Artikel möchte ich euch einen einfachen Einstieg in die WebVR Entwicklung mit A-Frame vorstellen.

Sie haben es eilig? Dann speichern Sie diesen Blogartikel von R23 als PDF

Brauchen Sie den Inhalt dieses Artikels "A-Frame – Virtual Reality im Web erstellen" schnell und bequem? Dann speichern Sie ihn doch einfach als PDF!

Seit wenigen Tagen unterstützt Nightly nun die offizielle Version 1.0 der Spezifikation der W3C Community Group, wie Mozillas MozVR-Team bekannt gegeben hat. Damit unterstützt Nightly nun die gleiche API wie Chromium in speziellen WebVR-Builds sowie der Samsung Gear VR Browser.

unterstützt damit Oculus CV1- und DK2-Geräte auf Windows mit der neusten Oculus-Runtime. Das Oculus 0.5 SDK auf macOS wird hingegen nicht mehr unterstützt. Unterstützung für OpenVR (HTC Vice) und OSVR soll bald folgen.

V/AR Modelle bereit für Metaverse

Sparen Sie Entwicklungszeit und -kosten, machen Sie Prototypenerfahrungen oder verwenden Sie unsere 3D-Modelle in Ihrem V/AR Projekt.
Charakterdesign / Maskottchen

Der neue Trend nennt sich VR-Commcere. Mit dem Browser in die erweiterte Realität, ohne App. Wir haben es umgesetzt.

Quelle: https://www.soeren-hentzschel.at/firefox/unterstuetzung-fuer-webvr-1-0-in-firefox-nightly-gelandet/

Was ist WebVR?

ist eine API um in Browsern mittels JavaScript auf Geräte für virtuelle Realität zugreifen zu können. Der Standard wurde 2014 durch Mozilla ins Leben gerufen und in Kooperation mit dem Google-Chrome-Team entwickelt. Die Version 1.0 wurde 2016 veröffentlicht.

Zur Darstellung wird ein Canvas-Element verwendet, häufig in Verbindung mit WebGL. Dabei werden die beiden Bilder für das linke und rechte Auge nebeneinander gezeichnet und über die requestPresent-Methode des VR-Anzeigegeräts dort zur Anzeige gebracht. Dort vermitteln sie dem Benutzer einen dreidimensionalen Bildeindruck. Die Anzeige sollte anschließend in regelmäßigen Abständen, am besten mit der Bildwiederholrate des Geräts, neu gezeichnet und mit der submitFrame-Methode aktualisiert werden.

Zur einfachen Verwendung gibt es Bibliotheken wie A-Frame oder three.js, die sich um einen Großteil der Darstellung kümmern können. Es gibt auch Frameworks, die einen Export aus Unity ermöglichen.

Was ist A-Frame?

Während es sich bei um das API handelt, das VR-Content im Browser darstellen kann, ist A-Frame dagegen ein Open-Source-Framework, das WebGL in HTML-Custom-Elements wrapped. Damit ermöglicht A-Frame das Erstellen von 3D-VR-Szenen, die sich WebGL zu Nutze machen, ohne tatsächlich das WebGL-API verwenden zu müssen. Da WebGL in modernen Browsern auf Desktop und Mobile bereits allgegenwärtig ist, funktioniert mit A-Frame erstellter Content plattformübergreifend. Derzeit werden etwa Desktop-Browser, iPhone und Oculus-Rift-Headsets von dem Framework unterstützt.
Quelle: https://entwickler.de/online/web/a-frame-virtual-reality-web-212602.html

Beispiel

Online Shop für in https://shopifyvr.myshopify.com/.
360° Foto https://aframe.io/examples/showcase/sky/

Wer im im virtuellen Raum malen möchte empfehle ich: A-Painter: Paint in VR in Your Browser

Mit A-Frame hat Mozilla ein Open-Source-Framework in Leben gerufen, das die Entwicklung von geräteübergreifenden VR Erlebnissen ermöglicht.

Einführung in A-Frame

Das A-Frame ist mit allen gängigen VR-Brillen kompatibel und kann auch in sämtlichen Standardbrowsern und mobilen Endgeräten verwendet werden. Das Framework ermöglicht in seiner Grundform bereits interaktive Erlebnisse und ist leicht erlern- und erweiterbar. Man benötigt für den Anfang lediglich Grundkenntnisse in HTML.

 
See the Pen Hello World — A-Frame by mozvr (@mozvr) on CodePen.

Handbuch

Links

A-Frame
WebVR
MozVR-Team
https://mozvr.com/#showcase

Jetzt bist du gefragt!

Eine verrückte Idee, ein kreativer Gedanke oder ein Wunsch? Oder doch lieber ein klassisches Fotoshooting oder ein wenig virtuelle Realität? Melde dich, damit wir die Idee gemeinsam auf den Weg bringen können.

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

Foto: Nejron Photo / Modelfreigabe bei Shutterstock, Inc

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.

A-Frame – Virtual Reality im Web erstellen 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 & Augmented Reality 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