VR/AR prototyping for everyone

Table of contents

How many realities do we have now?

At the moment I could separate them into four different ones:

What is virtual reality and what is behind it?

It’s a very interesting question if we take origins of the word — the etymology. Late 14c., “influencing by physical virtues or capabilities, effective with respect to inherent natural qualities,” from Medieval Latin virtualis, from Latin virtus “excellence, potency, efficacy,” literally “manliness, manhood” (see virtue).


1956 Sensorama

Later in 1956, Morton Heilig made the Sensorama — reality simulator — which imitated wind, stereo picture, smell etc. optional.

1968 sword of Damocles

It’s widely considered to be the first virtual reality (VR) head-mounted display (HMD) system. It was created in 1968 by computer scientist Ivan Sutherland with the help of his student Bob Sproull. Sword of Damocles could reach very simple vertex 3d models but it was a real 3d graphics, not a 2d which pretended to be a 3d. But it was so heavy and due to it has a lot of similarities to the sword of Damocles, it got that name — the Sword of Damocles.

1978 Aspen Interactive Movie Map

Or the old fashioned Google maps. Another experiment which I could say also was related to VR. The Aspen Movie Map was a revolutionary hypermedia system developed at MIT by a team working with Andrew Lippman in 1978 with funding from ARPA. Basically, it was a stop-motion tour through shooted step-by-step pictures, a user was capable to choose a drive direction. But the map also included a 3d map of Aspen.

1987 Data glove and eye phone

Then from “Atari Research” department came the new team “VPL research” (Visual Programming Languages) who was one of the first companies that developed and sold virtual reality products. They developed the Data Glove, the EyePhone and the Data Suit.

And then the 90’s came

A long time virtual reality was considered only in terms of academic knowledge, profit for science and medicine, not for a broad mass. But the picture is started to change when 90’s came due to they came with a completely different and strong game market.

Market’s Rat Racing

Like I mentioned above VR came into the market but greedy corporations and their marketing divisions spoil it. Obviously, that hardware and software weren’t prepared for the immersive VR experience at your home.

Keep calm and do VR

There were good exceptions, still not so good in terms of tactical and technical characteristics but we are getting closer to the actual VR.

2006 WebGL

WebGL evolved out of the Canvas 3D experiments started by Vladimir Vukićević at Mozilla. Vukićević first demonstrated a Canvas 3D prototype in 2006. By the end of 2007, both Mozilla and Opera had made their own separate implementations.

Mobile VR era begins

In 2014 Google designed Google Cardboard. It basically a folded piece of carton but if you putt your phone inside you could achieve no jokes VR (depends on your phone hardware of course). Only for 5 buсks — VR for everyone indeed. Of course, Google Cardboard has limitations comparing to fancy and expensive VR headsets, but it’s in your pocket, mobile and everyone can afford it.

2015 A-Frame

Why A-Frame is so cool?

It’s only 6 lines of code! Crazy!
You also have VR-mode button in the right-bottom corner

Prototyping VR/AR

With web-VR we have also mobile VR, VR experience everywhere. With such tools as A-Frame we have the opportunity to create VR experience very easily. Even by designers who barely familiar with code.

AR.js and A-Frame

How AR.js works
Also, not any server is good for storing assets. I used https://glitch.com definitely recommended
Vars to reach models
Hide tooltip on click
Rotate models. Indicate by class
We will have three scale states indicated by the flag var
Switch button. We just hide one model and show another. Indicated by the flag

Framer and AR.js

There are several ways to include A-Frame into Framer. We could include <script> tag into index.html with AR.js scr from the Framer root folder and write HTML inside Framer app, but it’s a bad way because you will need to take all your A-Framer code under quotes. You will have to struggle with dependencies and asynchrony; and you will lose all syntax highlight for A-Frame markup — No thank you, also you disrupt the integrity of a Framer project.

  • You will have syntax highlight.
  • No worries about JS libraries dependencies.
  • Solid AR group with markup, canvas and videolayer

A-Frame to Framer through i-frame

The structure of the project inside will be looks like that:


I wanted to bring immersive experience, that’s why I decided to remove all visible buttons from the view. Instead, we will use swipes on the left side — rotate, on the right side — scale. Simple and clear, but of course we will need, also to show a user how to use it, teach him. Hopefully, any types of events like swipe or drag very simple to achieve with Framer.

Adding an A-Frame i-frame in Framer

First thing what we will do it’s clear the console every time you reboot your prototype. Also, let’s rotate our device and write listener for orientation

How to test it

Important issue here is how to upload a prototype and how to test it.

  • If you test it on iPhone, make sure that you have iOS11 because of webRTC.
  • Browser on iPhone — only Safari. Because only Safari has access to media sources or webRTC. Other browsers don’t support it as well and Framer preview app.
  • Localhost from Framer doesn’t work, unfortunately. Instead install Prepros it has all you need — appropriate localhost, livereload and livepreview in browser. Just drag-n-drop your project in the app. But but make sure that automatic compilation for .coffee and .js files are muted.

Thank you for reading! I wish you you all the best and good luck!

Inborn Experience (UX in AR/VR)

Learn about user experience in augmented and virtual reality

Pavel Laptev

Written by

Nerd and visual maniac

Inborn Experience (UX in AR/VR)

Learn about user experience in augmented and virtual reality