BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Mozilla Has Created A-Frame, a VR Framework

Mozilla Has Created A-Frame, a VR Framework

Bookmarks

Mozilla has created and open sourced A-Frame, a framework for creating VR scenes for the desktop browser, smartphone and Oculus Rift.

A-Frame is an open source framework for creating VR experiences in the browser. The framework was created and is being developed by the MozVR team at Mozilla. A-Frame uses an Entity-component system usually employed in game development where entities are objects placed in a scene and components are the properties associated with those entities. Entities are defined using HTML tags, while components rely on HTML attributes with a CSS-like syntax. An entity needs to be placed in a scene which contains everything that is to be rendered in VR.

The following code sample depicts a red box entity (cube) with an edge length of 1 meter:

<a-scene>
   <a-entity geometry="primitive: box; width: 1" material="color: red"></a-entity>
</a-scene>

Currently, the geometry component supports the following primitives: box, circle, cylinder, plane, ring, sphere, torus, torusKnot.Other components are: camera, light, sound, fog, material, scale, etc. An entity can be associated with multiple components to create more complex scenes, as in the following example:

<a-entity geometry="primitive: cube; depth: 1; height: 1; width: 1"
          material="color: pink"
          light="intensity: 2"
          position="-1 5 0"
          sound="src: dangerzone.mp3; volume: 2">
</a-entity>

To make things simpler for the developer, Mozilla has created a number of primitives that wrap the entity-component elements in a syntax easier to use. The same cube as above can be specified as in this code sample:

<a-cube width="1" color="red"></a-cube>

The list of predefined primitives includes a-camera,  a-cylinder, a-plane, a-sphere, a-light, a-sky, a-image, a-video, and a few others. a-model lets one load an OBJ or DAE 3D model asset into a scene.

Animations are an important part of rendering virtual reality. A-Frame uses tween.js internally which is based on the Web Animations specification. A rotating model of a man can be done with this piece of code:

<a-entity id="model" position="0 0 -2">
   <a-animation attribute="rotation" from="0 -30 0" to="0 330 0" dur="15000" easing="linear" repeat="inifite"></a-animation>
   <a-model position="-.35 0 .55" rotation="0 -20 0" scale="1.5 1.5 1.5" src="../_models/man/man.dae"></a-model>
</a-entity>

A-Frame works on the major browsers on the desktop, the scenes being controlled with the mouse or keyboard, but also on smartphones and the Oculus Rift headset. There is a problem with certain scenes not rendered properly on some Android devices, but that is to be fixed soon. Mozilla has created a number of demos showcasing the technology. The source code is on GitHub.

Rate this Article

Adoption
Style

BT