Getting Started with AR Prototyping in wiARframe

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

TL;DR

  • Request an invite
  • Once invited, Register for an account
  • Create a wiARframe in the Editor
  • Add an Object to it
  • Add some States to that Object
  • Add Interactions and Effects to switch between states
  • 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 request an invite and 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

wiARframe Home Screen

From the wiARframe home screen, you’re able to access all of your previous creations. You can also view creations from other members of the wiARframe community.

With the Home tab selected you, can click the new wiARframe button to begin creating your first prototype.

#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 creation 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.

Scene Types (Table Top or User)

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.

wiARframe Scene Types

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

Editor Overview

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 > on the side of its header. When docked you can bring it back by clicking ☰

#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 edit it by clicking the pen button next to its name in the inspector. From here you also delete it by clicking the trash icon.

Object Types (Model & Panel)

We currently have two types of Object in wiARframe, a Model, and a Panel. A Model is a full 3D Object, whereas Panels are flat rectangles that you display 2D images on.

Uploading a 3D Model / Image

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.

#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 Image slot will launch the Asset Manager popup that shows both the suitable files previously added to your Prototype and allow you to upload new files. Also, you can search for simple 3D model with our Google Poly integration.

Click to ‘Select’ a model/image and assign it to your object.

#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 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
  • near to far
  • floor to sky

Rotation

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)

Scale

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

Additional Properties

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

Managing States

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. To allow multiple property changes at once, we group properties 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 on the triple dots icon on the current state label.

When defining a State, add only the properties that you want it to change such as position or rotation. When an interaction triggers this State the object will transition smoothly to the new properties.

#ProTip. When you toggle between States their changes are applied to the preview and layout so that 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 Interactions, click the + button in the interaction inspector on the base of the Object Inspector.

Model Objects only support interacting with the whole Object, but Panels 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 to the size of the Image.

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

Changing Interactions Across States

For every State on an Object, you can decide what Interactions are enabled, and this is achieved by toggling them on or 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.

  • No change. In this case, activating this state will just keep whatever interactions the Object had previously.
  • Change. This will require defining what Interactions should be enabled/disabled for this State.
  • Enable all. This will set all interactions on the Object to enabled.
  • Disable all. This will set all interactions on the Object to disabled.
  • Reset interactions to default. This will enable/disable Interactions to match the settings in the default state.

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.


Updating your Prototype

You can continue to make changes in the Editor, and have these passed to the editor in real-time. 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 are 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.

Getting Started with AR Prototyping in wiARframe

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

TL;DR

  • Request an invite
  • Once invited, Register for an account
  • Create a wiARframe in the Editor
  • Add an Object to it
  • Add some States to that Object
  • Add Interactions and Effects to switch between states
  • 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.

The Editor can be accessed at app.wiarframe.com, where you can request and invite and register for an account.

The app can be used 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

wiARframe Home Screen

From the wiARframe home screen, you’re able to access all of your previous creations. You can also view creations from us and other members of the wiARframe community.

With the Home tab selected you, can click the new wiARframe button to begin creating your first prototype.

#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 how they were made 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.

Scene Types (Table Top or User)

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.

wiARframe Scene Types

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

Editor Overview

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.

The Property Inspector can be docked by clicking on the > icon to the side of its header. When docked you can bring it back by clicking the ☰ icon.

#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 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 to create your first object.

A new Object needs to be given a Name and an Object Type. Once added, you’ll be able to manipulate the defaults of other properties such as Rotation and Size. You can edit it by clicking the pen button next to its name in the inspector. From here you also delete it by clicking the trash icon.

Object Types (Model & Panel)

We currently have two types of Object in wiARframe, a Model, and a Panel. A Model is a full 3D Object, whereas Panels are flat rectangles that you display 2D images on.

Uploading a 3D Model / Image

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.

#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 Image slot will launch the Asset Manager popup that shows both the suitable files previously added to your Prototype and allow you to upload new files. In addition, you can search for basic 3D model with our Google Poly integration.

Click to ‘Select’ a model/image and assign it to your object.

#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 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, which are conveniently labelled from:

  • left to right
  • near to far
  • 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)

Scale

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

Additional Properties

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

Managing States

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. 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 on the triple dots icon on the current state label.

Each State is automatically given a name, which you can change at any point to make your project more manageable. When defining a State, add only the properties that you want it to change such as position or rotation. When this State is triggered by an interaction the object will transition smoothly to the new properties.

#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 Interactions, click the + button in the interaction inspector on the base of the Object Inspector.

Model Objects only support interacting with the whole Object, but Panels 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 to the size of the Image.

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. 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 fine grain control to explore what interactions work best for your AR experience.

Changing Interactions Across States

For every State on an Object, you can decide what Interactions are enabled, 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.

  • no change. In this case, activating this state will just keep whatever interactions the Object had previously.
  • change. This will require defining what Interactions should be enabled/disabled for this State.
  • enable all. This will set all interactions on the Object to enabled.
  • disable all. This will set all interactions on the Object to disabled.
  • reset interactions to default. This will enable/disable Interactions to match the settings in the default state.

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.


Updating your Prototype

You can continue to make changes in the Editor, and have these passed to the editor in real-time. 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 are 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.