Open-Source-Framework ermöglicht Entwicklung von VR-Content für das Web

A-Frame – Virtual Reality im Web erstellen
4 Kommentare

Virtual Reality ist dieses Jahr ganz groß im Kommen – und macht damit vielleicht endlich die schon vor Jahren angestellte Vermutung, dass virtuelle Realitäten und die entsprechenden Devices dafür „the next big thing“ sind, wahr. Und es kommt noch besser: mit Frameworks wie A-Frame soll VR-Content nun auch ins Web gebracht werden.

Damit umgeht man, so erklärt Kevin Ngo in einem Blogpost im Mozilla-Entwicklerblog, vor allem das Problem, dass es nur wenige WebGL-Entwickler gibt, die sich auf das Erstellen von hoch-interaktiven 3D-Experiences verstehen. Im Gegensatz dazu gebe es nämlich zahlreiche Webentwickler, Webdesigner und 3D-Künstler, die nur auf das richtige Tool warten, um das Erstellen von VR-Content zu vereinfachen. Das von Mozillas WebVR-Team entwickelte Open-Source-Framework A-Frame könnte genau dieses Tool sein, um 3D- und VR-Experiences für das Web zu entwickeln.

A-Frame oder WebVR?

A-Frame ist nicht das einzige Tool aus dem Hause Mozilla, mit dem VR-Content ins Web gebracht werden soll. Erst Anfang der Woche hat das WebVR-Team Version 1.0 des WebVR-APIs vorgestellt, mit dem Content für Virtual-Reality-Devices online erstellt und im Browser dargestellt werden kann. Vor allem die User Experience bei der Nutzung von VR-Devices dürfte dank zahlreicher Verbesserungen am WebVR-API profitieren und Entwicklern neue Möglichkeiten zur Arbeit mit VR-Content bieten.

Lesen Sie mehr zum Thema VR-Content im Browser dank WebVR

Während es sich bei WebVR 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.

Nutzung von A-Frame

Um Szenen mit A-Frame zu erstellen, wird mit deklarativem HTML gearbeitet. Mit ein wenig Vanilla-JavaScript können diese dann entsprechend manipuliert werden; ebenso lassen sich JavaScript-Libraries und Frameworks wie etwa d3 oder React wie gewohnt weiter nutzen. Mit A-Frame erstellte Szenen können sowohl auf dem Desktop mit der Oculus Rift oder auf dem Smartphone mit einem Google-Cardboard-Holder angesehen werden. Statt als VR-Szene können sie aber auch als normale 3D-Szene betrachtet werden.

Der nachfolgende Code zeigt wie eine einfache Szene aufgebaut ist:

See the Pen Hello A-Frame – 2 by MozVR (@mozvr) on CodePen.

Interessant ist allerdings vor allem, was unter dem Markup liegt – nämlich ein besonders flexibles und erweiterbares 3D-Framework, das das Entity-Component-System (ECS)-Pattern zum DOM bringt: three.js. Dazu erklärt Ngo:

A-Frame is built as an abstraction layer on top of three.js and is extensible enough to do just about anything that three.js can do.

Das ECS-Pattern wird zum Beispiel in der Spieleentwicklung genutzt; A-Frame übernimmt darum auch bestehende Pattern aus der Gaming-Industrie. Wie das genau funktioniert, beschreibt Ngo detaillierter in seinem Blogpost; dort findet sich darüber hinaus auch ein ausführliches Tutorial zum Erstellen von interaktiven Szenen mit A-Frame.

Mehr Informationen zu dem Framework bietet auch die Projekt-Website sowie das entsprechende GitHub-Repository, in dem A-Frame auch zum Download zur Verfügung steht.

Name A-Frame
Hersteller Mozilla
Projektwebsite https://aframe.io/
GitHub https://github.com/aframevr/aframe/
ML Conference 2019

Workshop: Machine Learning 101++ using Python

mit Dr. Pieter Buteneers (Chatlayer.ai)

Honey Bee Conservation using Deep Learning

mit Thiago da Silva Alves, Jean Metz (JArchitects)

Python Summit 2019

Daten analysieren und transformieren mit Python

mit Doniyor Jurabayev (Freelancer)

Advanced Flow Control

mit Oz Tiram (derico – web development & consulting)

Aufmacherbild: Vector Frame . Vintage Frame . Grunge Frame . Black Frame . Border Frame . Frame Design . von Shutterstock / Urheberrecht: Miloje

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

4 Kommentare auf "A-Frame – Virtual Reality im Web erstellen"

avatar
400
  Subscribe  
Benachrichtige mich zu:
trackback

[…] wie das von Mozilla entwickelte Open-Source-Framework A-Frame soll Primrose dazu dienen, VR-Content in den Browser zu bringen – und zwar über verschiedene […]

trackback

[…] A-Frame arbeitet zudem mit deklarativem HTML; mithilfe von JavaScript können so erstellte Szenen weiter manipuliert und mit VR-Headsets wie der Oculus Rift oder Cardboad-Viewern wie Google Cardboard betrachtet werden. Als Basis dient zudem three.js, mit dem das Entity-Component-System-Pattern (ECS) zum DOM gebracht wird. […]

X
- Gib Deinen Standort ein -
- or -