A-Frame is Awesome

Last March I got an Oculus DK2 so I could play around with creating VR content but my excitement ran into a brick wall called javascript that I don’t understand and expensive tools. Fast-forward 9 months and the Mozilla VR team has just released A-Frame and my excitement is back. Now, I can include a link to aframe.js and write one line of code like this to create a video sphere:
<a-videosphere src="360video.mp4" autoplay="true" loop="true" rotation="0 270 0"></a-videosphere>
That’s pretty easy—it looks almost exactly like html for a 2D video:
<video src="2dvideo.mp4 controls autoplay="false">
But wait, there’s more. This is Web VR so A-Frame supports desktop, iPhone, Cardboard and Oculus (Android coming soon according to the docs) right out of the box. So with a little time to play around between Christmas shopping, I gave A-Frame a spin.

I love the idea of making a “VR gif” – a scene that you could just sit in and experience for as long as you wanted. Since I don’t have an awesome 360 3D camera rig (about $5K) or even a nifty 360 2D consumer camera, I grabbed a few seconds from this video that my old videoblogging friend Chuck made and I looped it. Then I tried adding some primitives (cubes in this case) to the scene. 10 lines of code later, violá – a VR gif:

vrgif

    Some notes:

  • Give the video a moment to load (it’s 15MB).
  • In a browser, you can click and drag with your mouse to look around.
  • On the iPhone the video doesn’t play. You just get the first frame and spinning cubes. But you can still look around by moving your phone or put it in a cardboard holder and look around (the cubes are in stereo).
  • It’s super cool with the Oculus DK2 and even works on a Mac (even though Oculus dropped Mac support).