Siwicki

A Quick Guide to Making a VR App

June 09, 2016

Google is going to release a proper VR operating system later this year with their release of Android N. It is going to have VR at the core of its OS. You can see below an early build of Android VR as it has already hit the Play Store and YouTube.

Google Cardboard has been around for a while now, and while it is not the most amazing VR experience, it is still the perfect device to start experimenting and playing with some interactions and small prototypes of VR.  Plus, you can get a Cardboard Kit for under $20. Just a word of warning, don’t spend a lot of time inside of the apps. I found myself getting sick.

There is a proposal for a WebVR standard. You can read about all the little details over here at https://mozvr.com/webvr-spec/.

I wanted to find something that I could get into quickly and just start messing around with. I wanted to get something in front of my eyes, so I went searching for frameworks, naturally.

A-Frame was the most straightforward framework I could find and it would allow us to jump inside a few code pens and start playing around with some demos. They also had an extensive examples section with a few different types of use cases for VR. Below is one of the most basic examples. The framework is maintained by the Mozilla VR team.

See the Pen Attempt at VR by John Siwicki (@siwicki) on CodePen.

If you take a look at the markup below, A-Frame has their own tag system.

<a-scene fog="type: linear; color: #F0F0F0">
	<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
	<a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>
	<a-cylinder position="1 0.75 1" radius="0.5" height="21.5" color="#FFC65D"></a-cylinder>
	<a-plane rotation="-90 0 0" width="44" height="4" color="#7BC8A4"></a-plane>
	<a-sky color="#ECECEC"></a-sky>
</a-scene>

A-Frame is a really simple framework to get started making some simple VR apps. There are many different modes to make different types of apps like panoramic photos or 360 video. I was able to use Googles Cardboard Camera on android to get some interesting shots to make some interesting scenes to stitch together for a VR experience.


John SiwickiWritten by John Siwicki who lives and works building interesting things. You should follow him on Twitter