Getting Started with AR Prototyping in wiARframe [outdated]

A quick guide to creating your first AR Prototype

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 here or continue reading to get started with your first AR Prototype.

This guide is based on the Beta version of wiARframe and doesn’t exactly match the process in the current version — an updated guide is coming soon.

TL;DR

  • Signup for the Beta at wiarframe.com
  • Once invited, Register for an account at app.wiarframe.com
  • Create a Prototype in the Editor
  • Add an Object to the Prototype
  • Add some States to that Object
  • Add Interactions and Effects to States to switch between them
  • Install the App and Login
  • Load your Prototype
  • [Surface Prototypes Only] Tap to select a Surface from those detected
  • Experience your Interactive AR Prototype

Setup

wiARframe has two components a Web-Based Editor where you design your Prototypes, and a mobile App where you can view them.

The Editor can be accessed at app.wiarframe.com, where you can register for an account with your Beta Invite Code.

The App is installable via the TestFlight invite sent to your email address. The current App supports iOS ARKit compatible device (iPhone 6s and up, iPad Pro & iPad 2017).

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

Editor Overview

wiARframe Editor Layout

wiARframe follows a minimalist two column layout. The left side of the screen is dedicated 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.

Above the left column, you can also find a Breadcrumb bar that shows: the selected Prototype, the selected Object and the selected Object State.

The Property Inspector can be docked by clicking on the ✖️ icon in its header bar. When docked you can bring it back by clicking the ☰ icon on the Breadcrumb bar.

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

Creating Your First Prototype

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

Scene Types (Surface or User)

The Scene Type defines the layout template we’ll use for your Prototype. You can think of it as: what should be at the centre of your scene? Should it be a Surface like a table that you want the Objects to sit on, or is it a standing User and you want the Objects to surround them.

wiArframe Scene Types

Adding Objects

A Prototype is really just a collection of interactive Objects. Anything that will appear in your scene is represented by an Object.

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 or click the ‘Add New Object’ button to create your first object.

How to add an Object

A new Object needs to be give a Name and an Object Type. Once added, you’ll be able to manipulate the defaults of other properties such as Rotation and Size. If you no longer want an Object you can just delete it from the Inspector.

Object Types (Model, Panel & Overlay)

We currently have three types of Object in wiARframe, a Model, a Panel, and an Overlay. A Model is a full 3D Object, whereas Panels and an Overlay are flat rectangles that you display 2D images. The difference between a Panel and an Overlay, is that a Panel is positioned in your scene (3D space), whereas an Overlay is attached to the Viewer’s screen/camera (2D space). You can only have one Overlay in your scene, and you’ll typically use it for traditional UI or adding a HUD.

#ProTip. You can bring up the properties for your Overlay by clicking on the User Icon in the Scene Layout.

3D Model & Texture

If your Object is a Model then you’ll need to pick a 3D Model by clicking on the Object Preview Window in the Inspector. In addition, you need to pick a Texture by clicking on the Texture Slot. For an Panel/Overlay, you only need to pick a Texture.

Adding a model/texture to an Object

#SideNote. A Texture is an image that is wrapped around a 3D Model in a process called Texture Mapping.

Clicking on either the 3D Model or Texture slot will launch an Asset Picker popup that shows both the suitable files previously added to your Prototype and some Sample assets from our collection.

Selecting textures from the Asset Picker

With the Sample Collection assets, clicking ‘Select’ will assign it to your object and also save it to your current Prototype Collection.

#ProTip. As well as clicking the upload button you can drag a file over the dashed box to upload it. We support JPG and PNG files for Textures, and simple OBJ and FBX files for 3D Models.

Position

All Objects in wiARframe are positioned proportionally inside of a scene box. With (0,0,0) being the front left corner on the floor, and (1,1,1) being the back right corner in the sky.

The size of the box is a 5 meter cube for a User Scene Type, for a Surface it is scaled to the size of the Surface you decide to use 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, which are conveniently labelled from:

  • left to right
  • front to back
  • floor to sky

Rotation

Rotation is between -180 and 180 in all 3 axes. It can be controlled by three sliders in the Inspector.

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

Size & Proportions

Like positions, Object size in wiARframe is proportional to the size of your scene. The slider allows you to change an Object from 5% to 100 % of the total width of the scene.

In addition to size, using the Aspect Ratio sliders, you can distort your Object to be slimmer, shorter or narrower than normal.

#ProTip. when you create a Panel 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.

Miscellaneous Properties

In addition, there are tick box options to:

  • make the Object Invisible e.g. you may want it to hide it after a specific Interaction.
  • apply Physics to the Object i.e. turn on gravity and watch it tumble to the surface below it.

Managing States

In wiARframe you can change all the properties of any Object in the scene based on a user Interaction, for example, moving or changing the texture of an Object when the user taps it. To allow multiple property changes at once, we group properties together into States.

Each new Object comes with a default State that defines the initial values for all properties. You can then add as many new States as you want by clicking the ‘Add New State’ button in the State list.

Each State is automatically given a name, which you can change at any point to make your project more manageable. When defining a State, toggle on the properties that you want it to change such as position or rotation, when this State is applied the object will then animate smoothly to the new transformation.

How to add a State

#ProTip. When you toggle between States their changes are applied to the preview and layout, so you can see the combined effects.

Managing Interactions & Effects

Interactions control how a user can interact with the Objects in your Scene and what happens when they do. To add/manage Interactions, click the ‘Add/Manage Interactions’ button from the base of the Object Inspector.

Model Objects only support interacting with the whole Object, but Panel’s are much more versatile and allow you to specify Hotspots - like 2D prototyping tools.

Drag a box on the image to define a hotspot and add an Interaction, you can then drag and drop to reposition it, and use the anchors at the corners to resize. Like Objects, the size and position of hotspots are proportional the the size of the Image.

How to add an Interaction

Each Interaction can have multiple Effects e.g. tapping on a button might change the State of both the UI and another Object in the scene.

Gestures

The way an Interaction is triggered is called a Gesture. Currenlty we support two types, Tap and Look At. Taps happen when a user taps on the Model or a Panel Hotspot. Look At happen when the user focus the camera on an Object or Hotspot for a few seconds .

#SideNote. Currently the only supported Effect Type is to ‘change State’ for an Object — but more are coming real soon.

Changing Interactions Across States

For every State on an Object you can decide what Interactions are enabled. Much like State Properties, this is achieved by simply toggling them on/off. However, you don’t always want to define new Interactions for every State, for example, if you move an Object you probably don’t want the Interactions to change. To make this easy, we provide an Interaction Option on each State where you can set how that State should affect Interactions. The options are as follows:

  • do not change the interactions. In this case, activating this state will just keep whatever interactions the Object had previously.
  • reset interactions to default. Activating the state, will enable/disable Interactions to match the default state.
  • enable all interactions. This will set all interactions on the Object to enabled.
  • disable all interactions. This will set all interactions on the Object to disabled.
  • custom interaction setup. Manually define specifically what Interactions should be enabled/disabled for this State.

Previewing your Prototype

As soon as you added your first Object and selected a Model/Texture for it you were able to view it in the App. Simply launch the App, Login and tap Load in the top right corner to bring up a list of all your Prototypes. Select the one you want to see and tap to launch it.

If your Prototype is a Surface Type, then we’ll 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 in the bottom left corner to switch from displaying your overlay to displaying the App UI.

#SideNote. If your Scene Type is User, be sure to stand up before launching the App, as the template assumes you are standing, and tries to align items for a median eye height.

#ProTip. If you tap edit in the top left corner, you can reposition your scene and also adjust the scale.

Sharing your Prototype

By default a Prototype is Private and only visible to the creator. If you want someone else to be able to view it in the App, then you can toggle the Private property in the Prototype Properties Inspector. This will reveal a button, that will allow you to copy a viewable link to the clipboard, on mobile this link will on the specified prototype in the App.

Updating your Prototype

You can continue to make changes in the Editor, and these will be reflected in the App in a couple of seconds. A notice will pop down, informing you of the update, you can tap it to reload. You can also reload manually, if you want to ensure you get the latest version.

Next Steps

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

  • A Nutrition Helper — with popup Panels that show nutritional information of various food items, when the corresponding Model is clicked.
  • A Color Switcher — that changes the colour of a Model to match the tapped area on a Panel of colour options.
  • An Interactive Visualization — combine multiple Objects, States and Interactions to explore a complex topic in three dimensional space.