A-Frame (Framework)

A-Frame

A-Frame logo.png
Basisdaten

MaintainerDiego Marcos, Don McCurdy, Kevin Ngo
Erscheinungsjahr2015-12
Aktuelle Version1.3.0
(2022-02-04)
BetriebssystemPlattformunabhängigkeit
ProgrammierspracheJavaScript
KategorieJavaScript-Framework
LizenzMIT-Lizenz[1]
aframe.io

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

Funktionsprinzip

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.[3] Neben den standardmäßig zur Verfügung stehenden Objekten besteht auch die Möglichkeit, eigene Komponenten zu erstellen oder aus anderen Quellen einzubinden.[4]

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. Intern setzt A-Frame bei der Darstellung die Bibliothek Three.js ein.[5]

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

Beispiel

Beispielszene mit beschrifteten Objekten

Das folgende einfache Beispiel erzeugt eine statische Szene, in der der Benutzer navigieren kann:[8]

<html>
  <head>
    <title>Hello, World!</title>
    <script src="https://aframe.io/releases/0.5.0/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>

Im Kopf wird zunächst A-Frame eingebunden. Die Szene selbst besteht aus einem Quader, einer Kugel und einem Zylinder auf einer Ebene vor einem Hintergrund.

Anwendungen

A-Frame ist ein beliebtes Framework zum Arbeiten mit virtueller Realität, da es komplexe Schnittstellen wie WebGL und WebVR leicht zugänglich macht und die Einstiegshürde in die virtuelle Realität senkt.[9] Durch den einfachen Aufbau kann es im Prototyping eingesetzt werden, bietet aber auch die Grundlage für komplexe Anwendungen. Bei Programmierern ist A-Frame besonders wegen ihrer hilfsbereiten Community beliebt.[10]

A-Frame wird in vielen Demo-Anwendungen von virtueller Realität im Browser eingesetzt, beispielsweise A-Painter,[11] das ebenfalls von Mozilla entwickelt wurde und das Erstellen und Teilen dreidimensionaler Kunstwerke im Internet erlaubt.

Außerhalb der Entwicklerszene erlangte A-Frame Bekanntheit unter anderem durch den Einsatz in Fear of the Sky (360 Syria), einer Dokumentation des Bürgerkriegs in Syrien durch Amnesty International,[12] Mars: An Interactive Journey der Washington Post.[13] und Reisen in 360 von Travelhackers.[14]

Einzelnachweise

  1. ↑ github.com. (englisch, abgerufen am 2. Juni 2020).
  2. ↑ Josh Carpenter: Introducing A-Frame v0.1.0. 16. Dezember 2015, abgerufen am 17. Mai 2017 (englisch).
  3. ↑ Entity-Component-System. Abgerufen am 17. Mai 2017 (englisch).
  4. ↑ Entity-Component-System. Extensibility. Abgerufen am 17. Mai 2017 (englisch).
  5. ↑ Introduction – A-Frame. Abgerufen am 17. Mai 2017 (englisch).
  6. ↑ JavaScript, Events, DOM APIs. Abgerufen am 17. Mai 2017 (englisch).
  7. ↑ FAQ. How is A-Frame’s performance? Abgerufen am 17. Mai 2017 (englisch).
  8. ↑ Code, interaktive Darstellung
  9. ↑ Herbert Braun: Mozilla gibt Starthilfe für virtuelle Realität im Browser. In: heise online. 18. Dezember 2015, abgerufen am 17. Mai 2017.
  10. ↑ Salva: A practitioner’s perspective on A-Frame: —Interview with Roland Dubois. In: Mozilla Hacks. 28. März 2017, abgerufen am 17. Mai 2017 (englisch).
  11. ↑ A-Painter. Abgerufen am 17. Mai 2017.
  12. ↑ #360Syria 'virtual tour' website reveals devastation of Aleppo barrel bombing. Amnesty International UK, 11. März 2016, abgerufen am 17. Mai 2017 (englisch).
  13. ↑ Julia Beizer: VR for All. In: Developer Blog – The Washington Post. 11. März 2016, abgerufen am 17. Mai 2017 (englisch).
  14. ↑ Travelhackers 360 | The most immersive adventures. Abgerufen am 2. Februar 2018 (deutsch).

Weblinks

Auf dieser Seite verwendete Medien

A-Frame Hello World example.png
Autor/Urheber:
  • A-Frame developers
  • derivative work: Perhelion
, Lizenz: CC BY-SA 3.0
A-Frame "Hello World" example, with labels
A-Frame logo.png
Autor/Urheber: Mozilla, Lizenz: CC BY-SA 4.0
Logo of the A-Frame framework