Getting Started with AR Prototyping in wiARframe

A quick guide to creating 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.

Home Overview

wiARframe Home Screen

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

Editor Overview

Adding Objects

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

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.

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.

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

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

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.

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.

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.

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


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

Home Overview

wiARframe Home Screen

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

Editor Overview

Adding Objects

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

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.

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.

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

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

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.

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.

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.

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


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

wiARframe

wiARframe empowers anyone to design AR experiences through an intuitive prototyping tool, a creator community and rich learning materials.

Jeremiah Alexander

Written by

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

wiARframe

wiARframe

wiARframe empowers anyone to design AR experiences through an intuitive prototyping tool, a creator community and rich learning materials.