oculus rift

A-Frame

Mozilla today released A-Frame, an open source library for creating virtual reality web experiences without having to know the powerful (but complex) WebGL. Designed for web developers, A-Frame aims to make it easy to create high-performance and responsive virtual reality experiences that run right out of your browser

How to achieve A-Frame?

Mozilla’s ‘MozVR‘ team has been experimenting with WebVR for some time now, but today’s release of A-Frame codifies the company’s R&D in this area into a package that’s ready for web developers to explore. A single line of code forms the basis of a VR-capable website. Web developers can begin to create simple VR websites using familiar HTML markup. Mozilla has put together detailed documentation for those interested in developing with A-Frame.

Enabling WebVR

At time of writing, to view the scenes in VR:
On desktop, get Firefox Developer Edition or Firefox Nightly, and install the WebVR Enabler Add-on. To use with an Oculus Rift DK2, have the Oculus runtime installed (0.5.x for OS X).
On mobile, just open any A-Frame site using your phone browser (e.g., Firefox for iOS, Firefox for Android, Chrome for Android, Safari for iOS).

"Piece of Cake" Difficulty - Codepen

With the introductory Codepen examples, we are exposing a very high-level abstraction on top of A-Frame, using templated primitives, to ease developers into the entity-component system. So this should be fairly readable to most. Now what do we do with this? Click on the Goggles icon to view in VR. And try modifying some values and see the scene change live.
Try changing the color of the cube (e.g., color="#748B9C" for a rainy day blue).
Try changing the size of the sphere (e.g., radius="0.25" to make it a little baby sphere).
Try changing the position of the cylinder (e.g., position="1 1 1" to raise the roof).
virtualreality

"Let's Rock" Difficulty - Boilerplate

For beginners that want to start playing with some toy scenes locally and hacking away, check out the basic A-Frame boilerplate. Boilerplate refers to pre-written reusable code that can be made your own with minimal modification. Note that I say this intended for beginners because it focuses on using the templated primitives abstraction and hides away the underlying engine. For developers that want to get their hands dirty, I would skip this and move directly to the entity-component system. The boilerplate provides the same code found in the Codepen above, but also can be downloaded as a ZIP package or forked on Github. Once you have the code on your machine, just modify it in your favorite text editor and fire it up in the browser.
virtualreality

"Come Get Some" Difficulty - Primitives

Are pre-fabricated custom elements like or that combine recipes of components to achieve the intended result.
Are a convenience and usability wrapper on top of the underlying entity-component system.
Are much cleaner in syntax but are less flexible and composable than using the entity-component system directly.
wraps a single entity (with the geometry.primitive=box) and exposes a few component attributes as HTML attributes. Don't worry about the attributes that seem unfamiliar, we will go over some of them later and point to the comprehensive documentation. A-Frame also has an animation system. Let's try makng the cube rotate indefinitely. The animation system also works with the core system, not just templates.
virtualreality

Developing A-Frame

The hardest thing about developing on A-Frame was feeling out the target audience. Should this be for beginners, for everyone and their grandma, for novices, for seasoned developers? I still don't feel it's been quite resolved. It's a question that has driven a lot of debates with the API design and messaging. One instance of contention was the naming of vs. the former . Or whether or not to hide the entity-component system behind templates and primitives such that A-Frame does not seem too exotic..
Augmented reality

A-Frame

“A-Frame is aimed squarely at the web developer community, the vast majority of whom have been frozen out of WebVR development because they don’t know WebGL, the powerful-but-complex 3D API that WebVR runs on,” Carpenter told me. “A web developer who wants to create a VR site with A-Frame simply drops it into their markup via a single line of HTML, and is ready to go.”.
Get A Free Quote / Need a Help ? Contact Us