Image for post
Image for post

Getting Started with AR Prototyping in Wiarframe

A quick guide to creating your first AR Prototype

Jeremiah Alexander
Nov 8, 2017 · 8 min read

Wiarframe is the world’s 1st dedicated AR Prototyping tool. Allowing you to become an AR designer without games engines, 3D design tools or coding, just familiar design paradigms. Learn more about our vision for Effortless AR Prototyping and AR Experimentation or continue reading to get started with your first AR Prototype.

TL;DR

  • Register for an account
  • Create a wiarframe in the Editor
  • Add an Object to it
  • Add Interactions to bring it to life
  • Install the iOS or Android app
  • Load your wiarframe
  • Tap to select a Surface from those that are detected
  • Experience your Interactive AR Prototype

Setup

Wiarframe has two components a Web-Based Editor where you design your AR prototypes, and a mobile app where you can view them.

Access the Editor at app.wiarframe.com, where you can register for an account.

Use the app on any ARKit compatible iOS device or ARCore compatible Android device. You can download it from the App Store or Google Play.

Once you have both the Editor and App, you are ready to begin creating and viewing AR Prototypes.

Home Overview

Image for post
Image for post
Wiarframe Home Screen

When you log in to Wiarframe, you’ll be directed to your personalised home page. This page is public, and so can double as your online AR designer profile. You can upload an avatar, add personal information and create collections to manage your creations and those of others.

click the Create Wiarframe button from the main action panel, located just below our profile.

#ProTip. One of the coolest features of Wiarframe (well we think it’s cool) is that you can remix the works of other users. If they permit it, you can view their prototypes, learn about their construction and then hit the rewiar button to copy it and use it as the starting point for your next project.

Your First Prototype

To create a Prototype you’ll need to give it a Name and a Scene Type.

The Scene Type defines the layout template we’ll use for your Prototype. Should it be a horizontal surface like a Table Top that you want the Objects to rest on, or is it the user standing in a Room and you want the Objects to surround them.

Image for post
Image for post
Wiarframe Scene Types

Once you click the create button, you’ll be transported to the editor to begin the creation process.

Editor Overview

Image for post
Image for post
Wiarframe Editor

Wiarframe follows a minimalist two column layout. We dedicate the left side of the screen to interactive visual components such as the Scene Layout or Interactions Layout, and the right column is the Property Inspector, containing forms where you can change the properties of your Prototype, Objects, Interactions and Effects.

The Property Inspector can be docked by clicking the > icon on its side — do the same to undock it.

#ProTip. On mobile devices, the left column is hidden, focusing in on the Inspector, and allowing you to manage all properties on the go.

Adding Objects

A Prototype is a collection of interactive Objects. An Object represents anything that will appear in your scene.

Depending on your chosen Scene Type, you’ll be presented with a canvas where the user icon is either in the center or stood at the back overlooking.

This canvas is a Birdseye View of your scene, from here you can drag and drop to move existing Objects. Click on a blank space in the Scene Layout to create your first object.

Give your new Object a Name and an Object Type. Then once added, you’ll be able to manipulate the defaults of other properties such as Rotation and Size. You can change its name by clicking on the title and duplicate or delete it by clicking the … icon.

We currently have two types of Object in Wiarframe, a 3D Model, and a 2D Panel. A 3D Model is a full 3D Object, whereas 2D Panels are flat rectangles that you display 2D images on. For 3D objects, we’ll auto-suggest some 3D models based on the name you give, you can use these with a single click, or you can upload your own.

Image for post
Image for post
Adding an Object in Wiarframe

All Objects in Wiarframe are positioned proportionally inside of a scene box, with coordinates of x -0.5, y 0, z -0.5 to x 0.5, y 1, z 0.5. 0,0,0 represents the center of the scene, with the object resting on the surface/floor.

The size of the box is by default a 10-meter cube for a Room Scene, and for a Table Top, it is scaled to the size of the detected surface, be that a coffee table or boardroom table.

You can drag and drop the Objects to reposition them or on mobile, use the sliders in the Inspector, labelled:

  • left to right (X-Axis)
  • floor to sky (Y-Axis)
  • front to back (Z-Axis)

Rotation is between -180 and 180 in all three axes. Use the three sliders in the Inspector can change it.

  • lean (Rotation about the X-Axis)
  • turn (Rotation about the Y-Axis)
  • tilt (Rotation about the Z-Axis)

Like positions, Object size in Wiarframe is proportional to the size of your scene. The three sliders allow you to change an Object from 5% to 100% of the total size of the scene — you can choose if you want to maintain aspect ratio or not.

#ProTip. when you create a 2D Object, it is by default a square, but when you upload a texture, the Wiarframe Editor will automatically adjust the aspect ratio to match the image.

As well as position, rotation and scale, each object has optional properties that we can add such as physics, visibility, velocity or position binding. You can explore these and their effects at your leisure.

Object Actions

In Wiarframe you can change all the properties of any Object in the scene based on a user Interaction, for example, moving an Object when the user taps it. We group these property changes into Actions, we include some suggested actions but you can create custom ones too.

Adding Interactions & Effects

Interactions control how a user can interact with the Objects in your Scene and what happens when they do.

3D Objects only support interacting with the whole Object, but 2D panels are much more versatile and allow you to specify Hotspots — like 2D prototyping tools.

To add Interactions, either expand the Interaction drawer in the inspector and click the New Interaction button. Or for 2D images, open the Interaction layout Tab above the Scene Canvas and drag a box on the image to define a hotspot - you can later drag and drop to reposition it, and use the anchors at the corners to resize. Both methods will launch the interaction form, where you’ll add interactions in the form of user stories, for example… “When the user taps on the Monkey the Monkey should move”.

Image for post
Image for post
Adding an Interaction in Wiarframe

An new Action Tab will be added to the Object and you’ll be able to configure the properties that the action will change, for example dragging the Monkey to its target position.

Each Interaction can also have multiple Effects, so you can add more later from the inspector, e.g. tapping on the monkey might also make the lion move.

The way an Interaction is triggered is called a Gesture. The best part about interactions in Wiarframe is the wealth of gestures that you can use to trigger them. Not just the user’s touch, but you can trigger them based upon the user’s proximity, and gaze, e.g. does the user look towards an object, do they stare at it for a few seconds, are they approaching it, is it within arm’s reach. These and others allow you to explore what interactions work best for your AR experience.

For every Action on an Object, you can decide whether it should change the Interactions that are enabled, for example, once the Monkey has moved you may want it to not respond in the same way to a tap, you may want to disable the old interaction and add a new one where the monkey jumps.

Image for post
Image for post

Previewing your Prototype

As soon as you added your first Object and selected a Model for it, you were able to view it in the app. Simply launch the app, Login and Load it from the list of all your Prototypes.

You then need to detect a suitable surface, slowly move the camera around and we’ll highlight any we find. Tap on the one you want and your Prototype will begin.

Tap the Wiarframe logo to bring back up the pause menu, where we can reload, reposition, share or even edit our wiarframe (this syncs in real-time with the web editor). We can also hit stop to return to the main menu and explore other creations.

You can continue to make changes in the Editor, and have these passed to the editor in real-time.

Next Steps

Now you know the basics, challenge yourself to create something more complex. Here are a few ideas to get you started:

  • A Nutrition Helper — with popup 2D panels that show nutritional information of various food items, when the corresponding 3D model is tapped.
  • A Color Switcher — that changes the colour of a 3D model to match the tapped area on a Panel of colour options.
  • An Interactive Visualization — combine multiple Objects, Actions and Interactions to explore a complex topic in three-dimensional space.
Image for post
Image for post

wiarframe

Wiarframe was the world’s 1st dedicated AR prototyping tool… Unfortunately, it was ahead of its time

Thanks to Stuart Varrall

Jeremiah Alexander

Written by

Founder @wiARframe — the design and prototyping platform for Augmented Reality.

wiarframe

wiarframe

Wiarframe is no more… It was the world’s 1st dedicated AR prototyping tool and unfortunately, it was ahead of its time.

Jeremiah Alexander

Written by

Founder @wiARframe — the design and prototyping platform for Augmented Reality.

wiarframe

wiarframe

Wiarframe is no more… It was the world’s 1st dedicated AR prototyping tool and unfortunately, it was ahead of its time.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store