Create a basic Virtual Reality experience in 5 minutes
Virtual Reality allows you to be anywhere anytime with anybody irrespective of geography, race, color and explore the world.
Immersion and Presence are the two fundamental aspects that makes Virtual Reality medium the way it is.
Immersion makes us believe the new body given in VR as our own or atleast an extension which can be controlled by our own body movements. By default one level of Immersion is established in any VR hardware by translating the users head movement to image displayed on the screen.
Presence on the other hand makes us perceive to be present in a different space and ability to interact with it.
With these premises the very basic VR experience is made of a 360 image or video. Technical term for such 360 image which warps around is equirectangular image.
The Output
Let’s Build it
We will build a webVR experience webVR is a JavaScript API for creating immersive 3D, Virtual Reality experiences in your browser. It works on desktop, laptop, and mobile smartphones. The VR can be experienced only on mobile smartphones wherein the accelerometer of the phone converts the phone orientation to change in camera angle. You can know more about supporting browsers and devices at webVR.rocks
For building the experience we will use Glitch.com and Aframe.
Aframe has slowly become a defacto framework for building webVR.
Glitch is an online code editor and compiler and has a ready made template for aframe projects.
Set up the playground
For this we first open www.glitch.com/~aframe
By default it will show output of the aframe base template with option to edit the code. Oh don’t be afraid, you don’t need to know programming for this basic experience.
Click “Remix your own” button to enter edit mode
You’ll get to code editor page now.
All the lines from 11–14 are not useful for us. So delete them.
However, if you are curious you can click on the “Show” button and open in new window and you’ll get to see a ready made VR scene. If you type the same url in your mobile, a VR experience will be loaded.
Are you having difficulties in viewing the experience? Or is the experience erratic. Follow this post to resolve it.
Equirectangular image
As I mentioned earlier we shall use an equirectangular image which will warp as sphere around us. Check the animation below to understand.
An equirectangular image is a single flat image that is unwarped form of a sphere. Just like our map made from globe.
As a viewer we will be placed in the center of the sphere giving feeling of presence.
Now that you understood what it is let’s download one.
The equirectangular image used in this demo is downloaded from here. Flickr is an amazing source of such images.
Upload the image to Glitch
Click on “assets” on the left side of Glitch editor as shown below
This will open “assets” folder. Drag and drop the downloaded image here.
Now click on the image and copy the url.
Time to write a line of code. Go back to “index.html” and write following line of code
<a-sky src=""></a-sky>
We now have to paste the url of the image we copied in “src” as shown below
For first time programmers, make sure the url is copied between double quotes. Aframe uses <a-sky> tag to render the image mentioned in src (source) as a skybox sphere.
That’s all!!!!
Check the output by clicking on Show button in the top left.
And check the output. Try uploading different equirectangular images, change the source of <a-sky> and view.
Make sure you open the url in mobile browser and view the experience in cardboard VR headset.
Congratulations
You have successfully created your first 360° VR supported Web experience application using A-Frame within a few minutes and with ease.
If you want to adventure in to creating bit more immersive VR experience like a VR website read this article.
Any VR application can be Designed for an excellent experience using VR Experience Design Plan.
Kindly share your views in the responses section :) Thank you!
To learn UI/UX Design for Virtual Reality using Oculus, Get mentorship from industry experts from Samsung, Microsoft, Cisco, IDF and start your career as a VR UX Designer, check out this course offered by Designerrs Lab on “Designing for Virtual Reality”.
