BT

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 to 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

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.