Firefox UX designer Michael Verdi had been playing around with his Oculus Rift DK2 creating VR content, but his excitement ran into a brick wall called JavaScript (three.js). Between Christmas shopping, Michael took a little time to play around with A-Frame, and he created a few scenes. Below is a writeup of Michael’s process of creating his latest scene.

I spent a little more time experimenting with A-Frame. I sketched out this idea yesterday and put it together last night and this morning.

I’m convinced A-Frame is the start of the future for VR on the web. It simplifies creating VR websites to the point that no JavaScript knowledge is required, and abstracts best practises into a common framework. Spinning up a page takes seconds, a true fulfillment of the long-forgotten VRML dream.

Best of all, I was very quickly able to write scenes that leveraged Popmotion to give the 3D objects physics and animation.

Jason Emory Parker is an interactive editor at The Post & Courier. Jason used A-Frame to create a VR tour of some of the major Charleston, SC public projects completed under Mayor Joseph Riley’s 40-year term. Below is his experience.

I created this project mainly as an experiment to get some idea of what A-Frame was capable of. I had recently completed another project for The Post and Courier which used a 3D model of the city of Charleston to show a few major public projects that had been completed during the 40-year tenure of the city’s outgoing mayor, Joe Riley.

Cross-posted from Boris Mann’s Tumblr.

I’m messing around with A-Frame and learning about textures.

I went over to Flickr and did a search on texture with CC-licensed images and came up with images that Stewart had uploaded a decade ago.

Within a week of its release, someone had used A-Frame to create a Minecraft scene. We tracked down the creator, Donovan Kraeker, and he shared his process and tips he learned along the way:

Thank you MozVR Team for creating A-Frame! I’ve been waiting for an entry point into VR for over a year and found the thought of committing the time needed to make good, finished content with WebGL, Unity, and Unreal too intimidating. I figured, eventually an organization or company would come out with a way for the masses to create VR websites and decided to wait. That wait was over on December 16, 2015 when the MozVR team released the first version of A-Frame — the Metaverse has begun!

After playing around with A-Frame for a few days I had a simple Minecraft-esque virtual reality website that I could actually enter into and look around in drawvr.com/minecraft/. I tested it on an iPhone using a plastic Google Cardboard like HMD and an Oculus Rift DK2 and they both worked! To say the least, I was ecstatic. I created this VR experience that I could host online and share with my friends, family, and the interwebs.

I like the Spheres and Fog example because it explores the sense of scale within virtual reality more than our other early examples. A series of spheres in the scene vary from 0.15 to 30 meters in radius, and a fog on <a-scene> amplifies the sense of size and distance:

<a-scene fog="type: linear; color: #AAB; far: 30; near: 0">

The shopping example was a lot of fun to create. Late one night I found a 3D model in Cinema 4D‘s bundled asset library and decided to wrap it in a clothing-shopping layout inspired by a few of my favorite blog designs. Patching this together with curved images and tongue in cheek copy while listening to podcasts was a very fun bit of visual riffing that helped me to tinker with ideas of what VR web design might look like. I’d love to take this one much further, time allowing!

Today, the MozVR team has released the first version of A-Frame: an open source framework for creating WebVR experiences with markup.

A-Frame makes it easy for web developers to create virtual reality experiences that work across desktop, iPhone, Android, and the Oculus Rift.

We created A-Frame to make it easier to create VR web experiences. WebVR has shipped in builds of Firefox and Chromium since the summer of 2014, but creating content for it has required knowing WebGL. The WebGL scene is unbelievably talented and has created many mind-blowing VR experiences in the last year, but they are a small subset of the full web dev community. There are millions of talented developers who do not know WebGL. What if each of them could create and share VR experiences on the open web?