Minecraft in WebVR mit HTML unter Verwendung von A-Frame

Ich bin Kevin Ngo, ein Virtual Reality Webentwickler im Mozilla VR-Team und ein Kernentwickler von A-Frame. Heute werden wir uns ansehen, wie man eine Room-Scale-WebVR-Minecraft-Demo erstellt, die auf HTC Vive, Oculus Rift, Samsung GearVR, Google Cardboard, Desktop und Mobilgeräten funktioniert. Die Demo wird mit A-Frame in nur 11 HTML-Elementen erstellt!

A-Frame

Vor einigen Jahren erfand und initiierte Mozilla WebVR, eine JavaScript-API zum Erstellen immersiver VR-Erlebnisse in Ihrem Browser, in einer experimentellen Version von Firefox. Seitdem hat WebVR breite Unterstützung von anderen Unternehmen wie Google, Microsoft, Samsung und Oculus erhalten. Und es steht nun kurz vor der Veröffentlichung, aktiviert in Firefox in wenigen Monaten!

Warum WebVR? Das Web bringt Offenheit in die VR; im Web werden Inhalte nicht von Gatekeepern kontrolliert, und Benutzer werden nicht in geschlossenen Systemen gehalten. Das Web bringt auch Vernetzung in die VR; im Web werden wir in der Lage sein, von Welt zu Welt zu reisen, so wie wir heute mit Links von Seite zu Seite springen. Da WebGL ausgereift ist und neue Spezifikationen wie Web Assembly und Service Workers vorhanden sind, ist das Web bereit für VR.

Das Mozilla VR-Team erstellte A-Frame, um das WebVR-Ökosystem anzukurbeln und Webentwicklern die Möglichkeit zu geben, 3D- und VR-Welten zu erstellen.

A-Frame ist ein Web-Framework zum Erstellen von Virtual-Reality-Erlebnissen. A-Frame basiert auf HTML und dem Entity-Component-Muster. HTML ist die zugänglichste Sprache in der gesamten Informatik, die es jedem ermöglicht, loszulegen. Unten sehen Sie eine vollständige 3D- und VR-Szene nur in HTML, die auf mehreren VR-Plattformen sowie auf Desktop und Mobilgeräten läuft.

Siehe den Pen Hello World – A-Frame von mozvr ( @mozvr) auf CodePen.

Das ist alles! Die Angabe von nur einer Zeile HTML (<a-scene>) kümmert sich um den gesamten 3D- und VR-Boilerplate-Code: Canvas, Szene, Renderer, Render-Loop, Kamera und Lichter. Dann fügen wir Objekte über untergeordnete Elemente zur Szene hinzu. Keine Build-Schritte, nur eine kopier- und einfügefreundliche HTML-Datei.

Und wir können A-Frames HTML dynamisch abfragen und bearbeiten, genau wie wir es mit standardmäßigen JavaScript- und DOM-APIs tun würden (z. B. querySelector, getAttribute, addEventListener, setAttribute).

// Query scene graph using `querySelector`.
var sceneEl = document.querySelector('a-scene');
var boxEl = sceneEl.querySelector('a-box');

// Get data about entity with `getAttribute`.
console.log(box.getAttribute('position'));
// >> {x: -1, y: 0.5, z: -3}

// Add event listener with `addEventListener`.
box.addEventListener('click', function () {
  // Modify entity with `setAttribute`.
  box.setAttribute('color', 'red');
});

Und da es sich nur um HTML und JavaScript handelt, funktioniert A-Frame mit vielen bestehenden Frameworks und Bibliotheken.

Obwohl A-Frames HTML einfach aussieht, ist A-Frames API viel leistungsfähiger als nur die Deklaration von 3D. A-Frame ist ein Entity-Component-System (ECS) Framework. ECS wird unter anderem von Unity verwendet und ist ein in der Spieleentwicklung beliebtes Muster. Das Konzept folgt

• Alle Objekte in der Szene sind Entitäten, ein leeres Objekt, das für sich allein nichts tut, analog zu einem leeren <div>. In A-Frame werden Entitäten als Element im DOM dargestellt.
• Dann stecken wir Komponenten in diese Entitäten, um Aussehen, Verhalten und Funktionalität bereitzustellen. In A-Frame werden Komponenten in JavaScript registriert und können alles tun. Sie haben vollen Zugriff auf three.js und DOM-APIs. Komponenten können nach ihrer Registrierung im HTML an Entitäten angehängt werden.

Der Vorteil von ECS ist, dass es komponierbar ist; wir können diese wiederverwendbaren Komponenten mischen und kombinieren, um komplexere 3D-Objekte zu erstellen. A-Frame hebt dies auf eine höhere Stufe und macht es deklarativ und Teil des DOMs, wie wir im Minecraft-Beispiel sehen werden.

Beispiel-Skelett

Kommen wir nun zu unserer Demo. Wir werden einen einfachen VR-Voxel-Builder erstellen. Der Voxel-Builder wird hauptsächlich für Room-Scale-VR mit Positionsverfolgung und getrackten Controllern (z. B. HTC Vive, Oculus Rift + Touch) sein. Wir werden ihn auch auf Desktop und Mobilgeräten zum Laufen bringen, aber das Erlebnis wird nicht so überzeugend sein.

Wir beginnen mit einem Skelett-HTML. Wenn Sie durchblättern möchten (alle 11 Zeilen HTML), schauen Sie sich den Quellcode auf GitHub an.

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<body>
  <a-scene>
  </a-scene>
</body>

Hinzufügen eines Bodens

<a-plane> und <a-circle> sind einfache Primitive, die häufig zum Hinzufügen eines Bodens verwendet werden. Wir werden <a-cylinder> verwenden, um besser mit den Raycastern zu arbeiten, die unsere Controller verwenden werden. Der Zylinder wird einen Radius von 30 Metern haben, um dem Radius des später hinzugefügten Himmels zu entsprechen. Beachten Sie, dass A-Frame-Einheiten in Metern angegeben werden, um den realen Einheiten zu entsprechen, die von der WebVR-API zurückgegeben werden.

Die Textur des Bodens, die wir verwenden werden, wird unter `https://cdn.aframe.io/a-painter/images/floor.jpg` gehostet. Wir fügen die Textur zu unseren Assets hinzu und erstellen eine dünne Zylinderentität, die auf diese Textur verweist.

Siehe den Pen Minecraft VR Demo (Teil 1) von mozvr ( @mozvr) auf CodePen.

Assets vorladen

Die Angabe einer URL über das `src`-Attribut lädt die Textur zur Laufzeit.

Da Netzwerkanfragen die Renderleistung negativ beeinflussen können, können wir die Textur vorladen, sodass die Szene erst mit dem Rendern beginnt, wenn ihre Assets abgerufen wurden. Dies können wir über das Asset-Management-System erreichen.

Wir platzieren `<a-assets>` in unserer `<a-scene>`, platzieren Assets (z. B. Bilder, Videos, Modelle, Sounds) in `<a-assets>` und verweisen von unseren Entitäten über einen Selektor (z. B. `#myTexture`) darauf.

Verschieben wir unsere Bodentextur in `<a-assets>`, um sie mithilfe eines `<img>`-Elements vorzuladen.

Siehe den Pen Minecraft VR Demo (Teil 2: Textur vorladen) von mozvr ( @mozvr) auf CodePen.

Hinzufügen eines Hintergrunds

Fügen wir unserer `<a-scene>` mit dem `<a-sky>`-Element einen 360°-Hintergrund hinzu. `<a-sky>` ist eine große 3D-Kugel, auf deren Innenseite ein Material abgebildet ist. Genau wie ein normales Bild kann `<a-sky>` einen Bildpfad mit `src` aufnehmen. Dies ermöglicht uns letztendlich immersive 360°-Bilder mit einer Zeile HTML. Als Übung können Sie später einige 360°-Bilder aus Flickrs 
equirectangular pool verwenden.

Wir könnten einen einfarbigen Hintergrund hinzufügen (z. B. `<a-sky color="#333"></a-sky>`) oder einen Gradienten, aber fügen wir einen texturierten Hintergrund mit einem Bild hinzu. Das von uns verwendete Bild wird unter `https://cdn.aframe.io/a-painter/images/sky.jpg` gehostet. Die von uns verwendete Bildtextur deckt eine Halbkugel ab, also werden wir unsere Kugel mit `theta-length="90"` halbieren und unserer Kugel einen Radius von 30 Metern geben, um dem Boden zu entsprechen.

Siehe den Pen Minecraft VR Demo (Teil 3: Hintergrund hinzufügen) von mozvr ( @mozvr) auf CodePen.

Voxel hinzufügen

Voxel in unserer VR-Anwendung werden wie `<a-box>` sein, aber mit einigen benutzerdefinierten A-Frame-Komponenten verbunden. Aber zuerst gehen wir das Entity-Component-Muster durch. Sehen wir uns an, wie die einfach zu verwendenden Primitive wie `<a-box>` intern zusammengesetzt sind.

Dieser Abschnitt wird sich später eingehender mit der Implementierung einiger A-Frame-Komponenten befassen. In der Praxis würden wir jedoch oft Komponenten verwenden, die bereits von A-Frame-Community-Entwicklern geschrieben wurden, anstatt sie von Grund auf neu zu erstellen.

Entity-Component-Muster

Jedes einzelne Objekt in einer A-Frame-Szene ist `<a-entity>`, das für sich genommen nichts tut, wie ein leeres `<div>`. Wir stecken Komponenten (nicht zu verwechseln mit Web- oder React-Komponenten) in diese Entität, um ihr Aussehen, Verhalten und ihre Logik zu verleihen.

Für eine Box hängen wir die grundlegenden Geometrie- und Material-Komponenten von A-Frame an und konfigurieren sie. Komponenten werden als HTML-Attribute dargestellt, und Komponenten-Eigenschaften werden standardmäßig wie CSS-Stile definiert. Hier sehen Sie, wie `<a-box>` in seine grundlegenden Komponenten zerlegt aussieht. `<a-box>` umschließt die Komponenten.

<a-box color="red" depth="0.5" height="0.5" shader="flat" width="0.5"></a-box>
<a-entity geometry="primitive: box; depth: 0.5; height: 0.5; width 0.5"
          material="color: red; shader: standard"></a-entity>

Der Vorteil von Komponenten ist, dass sie komponierbar sind. Wir können aus einer Vielzahl von vorhandenen Komponenten mischen und kombinieren, um verschiedene Arten von Objekten zu konstruieren.

In der 3D-Entwicklung ist die Anzahl möglicher Objekttypen unendlich in Anzahl und Komplexität, und wir brauchen eine einfache Möglichkeit, neue Objekttypen zu definieren, anstatt über traditionelle Vererbung. Vergleichen Sie das mit dem 2D-Web, wo wir mit einer kleinen Auswahl fester HTML-Elemente entwickeln und diese in eine Hierarchie einfügen.

Random Color Component

Komponenten in A-Frame werden in JavaScript definiert und haben vollen Zugriff auf three.js und DOM-APIs; sie können alles tun. Wir definieren alle unsere Objekte als Bündel von Komponenten.

Wir werden das Muster in Aktion setzen, indem wir eine A-Frame-Komponente schreiben, um unserer Box eine zufällige Farbe zu geben. Komponenten werden mit `AFRAME.registerComponent` registriert. Wir können ein Schema (die Daten der Komponente) und Lebenszyklus-Handler-Methoden (die Logik der Komponente) definieren. Für die Zufallsfarbkomponente werden wir kein Schema festlegen, da sie nicht konfigurierbar ist. Aber wir werden den `init`-Handler definieren, der genau einmal aufgerufen wird, wenn die Komponente angehängt wird.

AFRAME.registerComponent('random-color', {
  init: function () {
    // ...
  }
});

Für die Zufallsfarbkomponente möchten wir der Entität, an die diese Komponente angehängt ist, eine zufällige Farbe zuweisen. Komponenten haben eine Referenz zur Entität mit `this.el` aus den Handler-Methoden.

Und um die Farbe mit JavaScript zu ändern, ändern wir die Farb-Eigenschaft der Materialkomponente mithilfe von `.setAttribute()`. A-Frame ahmt viele DOM-APIs nach, aber die APIs spiegeln meistens
Vanille-Webentwicklung wider. Lesen Sie mehr über die Verwendung von JavaScript und DOM-APIs mit 
A-Frame.

Wir fügen auch die material-Komponente zur Liste der Komponenten hinzu, die vor dieser initialisiert werden sollen, damit unser Material nicht überschrieben wird.

AFRAME.registerComponent('random-color', {
  dependencies: ['material'],

  init: function () {
    // Set material component's color property to a random color.
    this.el.setAttribute('material', 'color', getRandomColor());
  }
});

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++ ) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

Nachdem die Komponente registriert ist, können wir diese Komponente direkt aus HTML anhängen. Der gesamte Code, der innerhalb von A-Frames Framework geschrieben wurde, erweitert HTML, und diese Erweiterungen können für andere Objekte und in anderen Szenen verwendet werden. Das Schöne ist, dass ein Entwickler eine Komponente schreiben könnte, die einem Objekt Physik hinzufügt, und dann könnte jemand, der nicht einmal JavaScript kann, seiner Szene 
Physik hinzufügen!

Nehmen Sie unsere frühere Box-Entität, wir hängen das `random-color`-HTML-Attribut an, um die `random-color`-Komponente einzubinden. Wir speichern die Komponente als JS-Datei und binden sie vor der Szene ein.

Siehe den Pen Minecraft VR Demo (Teil 4: Random Color Component) von mozvr ( @mozvr) auf CodePen.

Komponenten können an jede Entität angehängt werden, ohne eine Klasse erstellen oder erweitern zu müssen, wie es bei traditioneller Vererbung der Fall wäre. Wenn wir sie z. B. an `<a-sphere>` oder `<a-obj-model>` anhängen wollten, könnten wir das tun!

<!-- Reusing and attaching the random color component to other entities. -->
<a-sphere random-color></a-sphere>
<a-obj-model src="model.obj" random-color></a-obj-model>

Wenn wir diese Komponente für andere Personen freigeben möchten, könnten wir das auch tun. Wir kuratieren viele nützliche Komponenten aus dem Ökosystem auf der A-Frame Registry, ähnlich dem Unity Asset Store. Wenn wir unsere Anwendung mithilfe von Komponenten entwickeln, ist unser gesamter Code inhärent modular und wiederverwendbar!

Snap-Komponente

Wir werden eine `snap`-Komponente haben, um unsere Boxen an ein Gitter anzupassen, damit sie sich nicht überlappen. Wir werden nicht ins Detail gehen, wie diese Komponente implementiert ist, aber Sie können den Quellcode der Snap-Komponente (20 Zeilen JavaScript) einsehen.

Wir hängen die Snap-Komponente an unsere Box, sodass sie bei jedem halben Meter einrastet, auch mit einem Offset, um die Box zu zentrieren.

<a-entity
   geometry="primitive: box; height: 0.5; width: 0.5; depth: 0.5"
   material="shader: standard"
   random-color
   snap="offset: 0.25 0.25 0.25; snap: 0.5 0.5 0.5"></a-entity>

Jetzt haben wir eine Box-Entität, die als Bündel von Komponenten dargestellt wird und verwendet werden kann, um alle Voxel in unserer Szene zu beschreiben.

Mixins

Wir können einen Mixin erstellen, um ein wiederverwendbares Bündel von Komponenten zu definieren.

Anstelle von `<a-entity>`, das ein Objekt zur Szene hinzufügt, werden wir es mithilfe von `<a-mixin>` beschreiben, das wiederverwendet werden kann, um Voxel wie ein Prefab zu erstellen.

Siehe den Pen Minecraft VR Demo (Teil 5: Mixins) von mozvr ( @mozvr) auf CodePen.

Und wir haben Voxel mithilfe dieses Mixins hinzugefügt.

<a-entity mixin="voxel" position="-1 0 -2"></a-entity>
<a-entity mixin="voxel" position="0 0 -2"></a-entity>
<a-entity mixin="voxel" position="0 1 -2">
  <a-animation attribute="rotation" to="0 360 0" repeat="indefinite"></a-animation>
</a-entity>
<a-entity mixin="voxel" position="1 0 -2"></a-entity>

Als Nächstes werden wir Voxel dynamisch durch Interaktion mit getrackten Controllern erstellen. Beginnen wir damit, unsere Hände zur Anwendung hinzuzufügen.

Hand-Controller hinzufügen

Das Hinzufügen von HTC Vive- oder Oculus Touch-getrackten Controllern ist einfach.

<!-- Vive. -->
<a-entity vive-controls="hand: left"></a-entity>
<a-entity vive-controls="hand: right"></a-entity>

<!-- Or Rift. -->
<a-entity oculus-touch-controls="hand: left"></a-entity>
<a-entity oculus-touch-controls="hand: right"></a-entity>

Wir verwenden `hand-controls`, das sowohl Vive- als auch Rift-Steuerungen abstrahiert und mit ihnen funktioniert, indem es Modelle grundlegender Hände bereitstellt. Wir werden die linke Hand für die Teleportation und die rechte Hand für das Erzeugen und Platzieren von Blöcken verwenden.

<a-entity id="teleHand" hand-controls="left"></a-entity>
<a-entity id="blockHand" hand-controls="right"></a-entity>

Teleportation zur linken Hand hinzufügen

Wir werden Teleportationsfähigkeiten in die linke Hand einbinden, sodass wir eine Taste gedrückt halten, um einen Bogen anzuzeigen, der aus dem Controller kommt, und die Taste loslassen, um zum Ende des Bogens zu teleportieren. Zuvor haben wir unsere eigenen A-Frame-Komponenten geschrieben.

Aber wir können auch Open-Source-Komponenten verwenden, die bereits von der Community erstellt wurden, und sie einfach direkt aus HTML verwenden!

Für die Teleportation gibt es eine teleport-controls Komponente von @fernandojsg. Gemäß der README fügen wir die Komponente über ein `<script>`-Tag hinzu und setzen einfach die `teleport-controls`-Komponente auf dem Controller der Entität.

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-teleport-controls.min.js"></script>

<!-- ... -->

<a-entity id="teleHand" hand-controls="left" teleport-controls></a-entity>
<a-entity id="blockHand" hand-controls="right"></a-entity>

Dann werden wir die `teleport-controls`-Komponente konfigurieren, um einen Bogen vom Typ Teleportation zu verwenden. Standardmäßig teleportiert `teleport-controls` nur auf dem Boden, aber wir können mit `collisionEntities` angeben, um auf die Blöcke *und* den Boden mithilfe von Selektoren zu teleportieren. Diese Eigenschaften sind Teil der API, mit der die `teleport-controls`-Komponente erstellt wurde.

<a-entity id="teleHand" hand-controls="left" teleport-controls="type: parabolic; collisionEntities: [mixin='voxel'], #ground"></a-entity>

Das ist alles! Ein Skript-Tag und ein HTML-Attribut und wir können uns teleportieren. Weitere coole Komponenten finden Sie in der A-Frame Registry.

Voxel-Spawner zur rechten Hand hinzufügen

In WebVR ist die Möglichkeit, Objekte anzuklicken, nicht integriert, wie es in 2D-Anwendungen der Fall ist. Das müssen wir selbst bereitstellen. Glücklicherweise bietet A-Frame viele Komponenten zur Interaktionsverwaltung. Eine gängige Methode für cursorähnliche Klicks in VR ist die Verwendung eines Raycasters, eines Lasers, der abschiesst und Objekte zurückgibt, mit denen er kollidiert. Dann implementieren wir die Cursorzustände, indem wir auf Interaktionsereignisse hören und den Raycaster auf Kollisionen überprüfen.

A-Frame bietet einen blickbasierten Cursor zum Klicken, aber es gibt auch eine controller-cursor Komponente, die den Klicklaser an getrackte VR-Controller anhängt. Wie bei der `teleport-controls`-Komponente binden wir das Skript-Tag ein und hängen die `controller-cursor`-Komponente an. Diesmal an die rechte Hand.

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-teleport-controls.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-controller-cursor-component.min.js"></script>

<!-- ... -->

<a-entity id="teleHand" hand-controls="left" teleport-controls="type: parabolic; collisionEntities: [mixin='voxel'], #ground"></a-entity>
<a-entity id="blockHand" hand-controls="right" controller-cursor></a-entity>

Wenn wir nun den Trigger-Button auf den getrackten Controllern drücken, gibt `controller-cursor` ein `click`-Ereignis sowohl auf dem Controller als auch auf der Entität aus, mit der er zu diesem Zeitpunkt kollidiert. Auch Ereignisse wie `mouseenter` und `mouseleave` werden bereitgestellt. Das Ereignis enthält Details zur Kollision.

Das ermöglicht uns das Klicken, aber wir müssen etwas Code schreiben, um diese Klicks zu verarbeiten, um Blöcke zu erzeugen. Wir können einen Event-Listener und `document.createElement` verwenden.

document.querySelector('#blockHand').addEventListener(`click`, function (evt) {
  // Create a blank entity.
  var newVoxelEl = document.createElement('a-entity');

  // Use the mixin to make it a voxel.
  newVoxelEl.setAttribute('mixin', 'voxel');

  // Set the position using intersection point. The `snap` component above which
  // is part of the mixin will snap it to the closest half meter.
  newVoxelEl.setAttribute('position', evt.detail.intersection.point);

  // Add to the scene with `appendChild`.
  this.appendChild(newVoxelEl);
});

Um das Erstellen von Entitäten aus einem Kollisionsereignis zu verallgemeinern, haben wir eine `intersection-spawn`-Komponente erstellt, die mit jedem Ereignis und einer Liste von Eigenschaften konfiguriert werden kann. Wir werden nicht ins Detail der Implementierung gehen, aber Sie können den einfachen Quellcode der `intersection-spawn`-Komponente auf GitHub ansehen. Wir hängen die Fähigkeiten von `intersection-spawn` an die rechte Hand.

<a-entity id="blockHand" hand-controls="right" controller-cursor intersection-spawn="event: click; mixin: voxel"></a-entity>

Jetzt, wenn wir klicken, erzeugen wir Voxel!

Unterstützung für Mobilgeräte und Desktops hinzufügen

Wir sehen, wie wir einen benutzerdefinierten Objekttyp (d. h. einen getrackten Hand-Controller mit einem Handmodell, das Klickfähigkeiten besitzt und Blöcke bei Klick erzeugt) erstellt haben, indem wir Komponenten kombiniert haben. Das Wunderbare an Komponenten ist, dass sie in anderen Kontexten wiederverwendbar sind. Wir könnten sogar die `intersection-spawn`-Komponente mit dem blickbasierten `cursor`-Komponente anhängen, damit wir auch auf Mobilgeräten und Desktops Blöcke erzeugen können, ohne etwas an der Komponente zu ändern!

<a-entity id="blockHand" hand-controls="right" controller-cursor intersection-spawn="event: click; mixin: voxel"></a-entity>

<a-camera>
  <a-cursor intersection-spawn="event: click; mixin: voxel"></a-cursor>
</a-camera>

Probieren Sie es aus!

Lesen Sie den Quellcode auf GitHub.

Unser VR-Voxel-Builder besteht letztendlich aus 11 HTML-Elementen. Wir können ihn auf Desktop und Mobilgeräten in der Vorschau anzeigen. Auf dem Desktop können wir Blöcke per Drag & Drop und Klick erzeugen. Auf Mobilgeräten können wir das Gerät schwenken und tippen, um Blöcke zu erzeugen.

Siehe den Pen Minecraft VR Demo (Final) von mozvr ( @mozvr) auf CodePen.

Wenn Sie ein VR-Headset haben (z. B. HTC Vive, Oculus Rift + Touch), besorgen Sie sich einen WebVR-fähigen Browser und gehen Sie zur Demo. VR, indem Sie eine HTC Vive oder Oculus Rift anschließen und einen WebVR-fähigen Browser verwenden.

Wenn Sie sehen möchten, wie es in VR von Ihrem Desktop- oder Mobilgerät aus aussieht, schauen Sie sich die Demo mit vorab aufgezeichneten VR-Bewegungsaufnahmen und Gesten an.

Ausblick

A-Frame hat eine aktive Open-Source-Community und ein Ökosystem. Bis heute

• 125+ GitHub-Mitwirkende
• 240 offene / 1250 geschlossene GitHub-Issues
• 3000 Mitglieder in Slack
• Hunderte von VR-Projekten, die im wöchentlichen A-Frame Blog vorgestellt werden.

A-Frame ist das WebVR-Framework für Innovationen, wie VR im Web aussehen wird, und macht es gleichzeitig jedem leicht, sich an der Entwicklung mit 3D und VR zu beteiligen. HTML hält es kinderleicht, während darunter das Entity-Component-Muster gespeist wird. Diese Experimente werden die Grundlage für das offene Metaverse sein, vernetzte virtuelle Räume, die von allen bewohnt werden.

Es sind die frühen Phasen von VR und besonders für WebVR, aber da Browser bald standardmäßig WebVR für Hunderte von Millionen aktivieren werden, sollten Webentwickler sich beteiligen, um VR für alle zugänglich zu machen.