I work on A-Frame, a web framework for building virtual reality (WebVR) experiences. A-Frame allows developers to easily build scenes with HTML that work across platforms (e.g., Vive, Rift, Cardboard, GearVR, desktop). The high accessibility enables developers with just a bit of HTML knowledge, a smartphone, and a Cardboard to get started playing with VR.

Developers in the VR community are bullish on mobile VR platforms such as Cardboard, GearVR, or Daydream. Mobile VR today is enticing for many reasons: low cost, headsets sold, number of users, ubiquity of smartphones. We often hear about millions of Cardboards and that mobile VR is the future.

However on the A-Frame team, we focus all of our efforts on room scale VR platforms (i.e., Vive). If you're developing a tool or platform, or you're wanting to do meaningful experiments and innovations, then you'd best be developing for the high-end.

What is Mobile VR?

Common disputes around mobile vs. room scale VR come about as a lack of alignment in understanding what mobile VR actually ... »

A Glimpse into Competitive VR Gaming

Just one more quarter. So close to beating that high score. Being at the local arcade, spaced out in front of a blipping machine with a display of flashing lights. That's the feeling I get when I play Space Pirate Trainer. But in this age, the leaderboard is global, the game is in virtual reality, and it's going to take a bit more skill.


How to Write an A-Frame VR Component

A-Frame is a WebVR framework that introduces the entity-component system (docs) to the DOM. The entity-component system treats every entity in the scene as a placeholder object which we apply and mix components to in order to add appearance, behavior, and functionality. A-Frame comes with some standard components out of the box like camera, geometry, material, light, or sound. However, people can write, publish, and register their own components to do whatever they want like have entities collide/explode/spawn, be controlled by physics, or follow a path. Today, we'll be going through how we can write our own A-Frame components.


I took the Ricoh Theta S all around Hong Kong and Guangzhou for the holidays. The Ricoh Theta S is a freshly released camera featuring two 180-degree wide-angle lens that can take 360-degree (equirectangular) photos with a single exposure or button press, opening up immersive 360-degree photography to the masses. With most familiar only with flat 2D photography, there is a completely different workflow to adapt to. Taking the Theta to the streets of Mong Kok, the most population-dense area and literally the busiest district in the world, here is what I learned about 360-degree shooting workflow and composition.


Upon first seeing A-Frame, branded as "building blocks for the web" displaying markup like <a-cube>, developers may conceive A-Frame as yet another 3DML (3D markup language) such as X3Dom or GLAM. What A-Frame brings to the game is that it is based off an entity-component system, a pattern used by universal game engines like Unity which favors composability over inheritance. As we'll see, this makes A-Frame extremely extendable.

And A-Frame VR is extremely mindful of how to start a developer ecosystem. There are tools, tutorials, guides, boilerplates, libraries being built and knowledge being readily shared on Slack.