A-Frame First Impressions.

VR for the mobile web is here and A-Frame is the right tool to be a part of it.

I’ve owned a Google Cardboard for a while, but I’d be lying if I said I used it often. The premise is clear; experience VR on your phone at little expense. But, VR experiences for mobile devices have arrived infrequently and tend to be nothing more than 360 videos. Unity and other game engines are hoping to change this with their native app solutions, but what about the browser?

Thanks to the efforts of Mozilla we now have A-Frame, built on top of the THREE.js rendering library. A-Frame allows developers to quickly build 3D scenes for the browser from their models and code (and animate it all too).

Emphasis really should be placed on speed here — if you want to, you can build scenes using just HTML markup by assigning all positionings and components as attributes:

<a-entity position=”0 5 0" rotation=”0 90 0” my-component=”speed: 5; color: #ff99aa”></a-entity>

If you’re familiar with Unity it’ll all hopefully feel quite familiar to you. Instead of empty ‘GameObjects’, it’s ‘<a-entities>’. And instead of ‘Scripts’, it’s ‘Components’. Components can really be about as advanced as you like, including custom shaders. The THREE library that helps power it all is exposed too, so any existing WebGL code, projects or shaders you have or find shouldn’t be too hard to re-implement.

You’ll realise quickly that animations are quite limited (there’s no built in chaining that I could find, for example), but it’s not particularly difficult to fire them yourself using the built-in .emit function. I hope to see more improvements here in the future, but at least like everything else with A-Frame, they’re designed so you can get started quickly and enhance things yourself when necessary.

  <a-entity position="5 0 0"></a-entity>
  <a-animation attribute="rotation"
   to="0 360 0"

My new company website http://studiouniver.se has a banner built with A-Frame. The only delays I really encountered were those of creative decisions, rather than any A-Frame issues. Models were my own from the new AssetForge http://assetforge.io/ (although there’s an exporting issue at the moment), and this great component for constructing environments https://github.com/feiss/aframe-environment-component.

I’d really recommend getting stuck into A-Frame to see how you like it. VR is going to be with us for a good while longer (especially with accessible standalone headsets on the way), and I think the necessity to be able to do something with it is only going to grow. For a quick start, I think just check out the A-Frame official site https://aframe.io/, download the project off GitHub, and get to playing with the examples https://github.com/aframevr/aframe.

Hopefully with A-Frame here and browsers steadily improving, we’ll all be reaching for our Cardboards and mobile VR viewers much more often!