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.