BT

Mozilla Has Created A-Frame, a VR Framework

| by Abel Avram Follow 10 Followers on Dec 18, 2015. Estimated reading time: 2 minutes |

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 Stage
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.

Tell us what you think

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

Email me replies to any of my messages in this thread
Community comments

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

Email me replies to any of my messages in this thread

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

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT