Mozilla's A-Frame


#1

Seems in a way, interesting.


#2

Hmm… some interesting possibilities there – especially from the standpoint of interoperability/exchange formats between VR systems (like maybe using an AFRAME similarly to a 3D IFRAME to sandbox holographic banner ads).

A few notable aspects of A-Frame are mixins:

<a-assets>
  <a-mixin id="red" material="color: red"></a-mixin>
  <a-mixin id="blue" material="color: blue"></a-mixin>
  <a-mixin id="cube" geometry="primitive: box"></a-mixin>
</a-assets>

<a-scene>
  <a-entity mixin="red blue cube" material="color: green"></a-entity>
</a-scene>

And also support for defining custom tags:

<template is="a-template" element="a-lot-of-cubes" size="1">
  <a-cube color="red" depth="${size}" height="${size}" width="${size}" position="-${size} 0 0"></a-cube>
  <a-cube color="green" depth="${size}" height="${size}" width="${size}" position="-${size} 0 0"></a-cube>
  <a-cube color="blue" depth="${size}" height="${size}" width="${size}" position="-${size} 0 0"></a-cube>
</template>

<a-lot-of-cubes size="5"></a-lot-of-cubes>
<a-lot-of-cubes position="10 0 0"></a-lot-of-cubes>

Mozilla mentioned drawing inspiration for A-Frame from other declarative tools like JanusVR, GLAM and SceneVR. I was curious to compare them so below is a quick sampling of each.


A-Frame:

<a-scene>
  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-cube>
  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>

  <!-- Cube -->
  <a-entity position="0 0 -6" rotation="45 30 0"
    geometry="primitive: box; height: 4; width: 2; depth: 4;"
    material="color: #167341; roughness: 1.0; metalness: 0.2;"></a-entity>
</a-scene>

JanusVR

<FireBoxRoom>
  <Assets>
    <AssetObject id="moon_obj" src="http://vrsites.com/assets/moon.obj http://vrsites.com/assets/earth1.jpg" tex_clamp="false"/>
    <AssetImage id="bert_img" src="http://vrsites.com/assets/bert.jpg" />
  </Assets>
  <Room use_local_asset="room_1pedestal" col="0.5 0.5 0.5" pos="0 0 0" fwd="0 0 -1">
    <Object id="moon_obj" pos="0 3 -10" fwd="0 0 1" rotate_axis="0 1 0" rotate_deg_per_sec="3" />
    <Image id="bert_img" pos="-9.5 2 -10" fwd="1 0 0" />
  </Room>
</FireBoxRoom>

GLAM:

<glam>
  <scene>
    <group y='-1'>
      <box id="texturedbox" x="1.5" y='2' z='-5' depth='.5' height='1.5' ></box>
      <group id="aGroup" x="1" y=".5" z="-2" >
        <sphere id="sphere1" radius='1.5'></sphere>
        <group id="nestedGroup" x='-3' y='1' z='-5'>
          <cone id="cone1" x='-1' y='-.5' z='2' rz='90deg'></cone>
          <cylinder id="cylinder1"></cylinder>
        </group>
      </group>
      <text id="text1" value="glam"></text>
    </group>
  </scene>
</glam>

(fun factoid: GLAM’s author Tony Parisi is listed on High Fidelity’s advisory team)


SceneVR:

<scene>
  <spawn position="10 10 10" />
  <box id="home" color="#ff00aa" position='0 10 0' />
  <model src="/blah.obj" position="1 2 3" />
  <script>
    document.addEventListener("ready", function(event) {
      "Hello world";
    });
  </script>
  <!-- Link to next scene -->
  <link href="/test.xml" position="3 4 5" />
  <skybox src="/blah/blah" />
  <audio src="/sounds/drone-sweet.mp3" ambient="true" />
  <fog style="color: #fff" near="100" far="1000" />
  <plane style="texture-map: url(/images/grid.png); texture-repeat: 100 100;" scale="100 100 0", position="0 0 0" rotation="0 1.57 0" />
</scene>