Create a basic Virtual Reality experience in 5 minutes

Kumar Ahir
Jul 2 · 5 min read

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

Basic 360 photo VR 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

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”.

Designerrs

This community is for Design Enthusiasts who believe that design can change the world and want to solve problems by innovating through Design. Learn about UI/ UX Design, Design Thinking, Digital Product Design and Immersive Design from industry experts.

Kumar Ahir

Written by

successful exit in first startup oobi.in, AR VR enthusiast, ex CISCO, SYMANTEC, interaction designer, entrepreneur. More at www.kumarahir.com

Designerrs

This community is for Design Enthusiasts who believe that design can change the world and want to solve problems by innovating through Design. Learn about UI/ UX Design, Design Thinking, Digital Product Design and Immersive Design from industry experts.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade