Get started by placing a single 3D object in AR using wiarframe

In this tutorial, we’ll use the wiarframe editor to upload a 3D model that we found online. We’ll then use the Wiarframe app to preview it in AR.

If you haven’t already, sign up for a free wiarframe account, and get an overview of the platform.

Create a new wiarframe

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

Image for post
Image for post

In the popup form, give our wiarframe a name, for example ‘a solitARy object’.

Next, we pick a scene type. In wiarframe, scene types work as templates for setting up your AR experience and control how things like scaling and positioning are controlled — read more about scene types. …


How the user interacts with the objects in the scene

Each object in your scene can have multiple interactions that control how the user can interact with that object and the effect it has.

In wiarframe, you add interactions in the form of user stories, for example:

  • when the user looks towards the Spaceman, the Spaceman should Spin
  • or when the user taps on the Signboard, Open the URL …

Interactions are thus broadly broken into three parts, the object, the gesture and the effect. The effect can then either be a global effect such as Opening a URL or an object-specific action, such as Spinning. …


How do objects in the scene look and behave

Image for post
Image for post

Each object in your scene has properties that control its presentation and behaviour. As a minimum, this includes its position, rotation and scale but there are loads more that you can optionally add. These properties can be changed during the experience based upon interactions.

Position

The available position for an object will be affected by your scene type. For a Table Top experience, all objects are positioned proportionally with x,y,z coordinates from (-0.5, 0, -0.5) to (0.5, 1, 0.5), and like a vector graphics, these positions will scale smoothly with the surface size. …


The elements that make up a scene

Multiple objects will populate your wiarframe scene. These can be either 3D models or 2D image panels. Both are positioned in 3-dimensional space — that is they have an x, y and z coordinate.

2D

When you create a 2D object, you’ll need to upload one or more image files (jpg or png format).

3D

When you create a 3D object, you can either upload a 3D model file (fbx or obj format), or you can search for a sample asset.

Image for post
Image for post

Who can see your wiarframe and what can they do with it.

Image for post
Image for post

Each wiarframe you create has a visibility setting that determines who can see it and what they can do with it.

Image for post
Image for post

Open

Anyone can see this wiarframe in both the editor and the app. In the editor, they can also remix it. Use this whenever you’re happy to share your creation with others.

Public

Anyone can see this wiarframe in the app but not in the editor. Use this is whenever you want people to experience your wiarframe but may need to protect the assets it uses.

Private

Only you can see this wiarframe. Use this for projects where confidentiality is essential.


How we set up your AR experience

When you create a new wiarframe, you’ll pick a Scene Type, which we use to control the scaling and positioning of your AR scene. Currently, we support two types, Table Top & Room.

Image for post
Image for post

Table Top

A table top experience…

  • can be placed on any horizontal surface
  • its size is scaled to match the surface size
  • and its position is moved to the center on the surface

Table tops work best for experiences like games and interactive stories, as you can reuse the same experience on any size of surface, from a small coffee table to a boardroom table.

Room

A room experience…

  • is placed on the floor
  • its size is constant — specified in meters
  • its position is centred from the user’s position
  • and it is grounded to the floor

Room experiences work best went you want the user to move around, for example, way-finding. They work well with proximity-based interactions.


A quick intro to wiarframe and the core features

Wiarframe empowers you to design, prototype and share AR experiences. It is both a powerful tool and a community. Check out the video below for a quick intro.

Your Home Page

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.

Image for post
Image for post

The Wiarframe Editor

The wiarframe editor 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 side contains a dock-able Inspector, with controls to change the properties of the objects in your scene. …


What is a wiarframe?

A wiarframe is our name for an Interactive AR prototype. It’s a double play on words, both wireframe (a low fidelity product design used in UX) and wireframe (the outline only version of a 3D model).

We use Wiarframe (capital W) when referring to the design tool itself and wiarframe (lowercase w) when referring to a prototype.

What mobile devices do you support?

We support ARKit devices on iOS and ARCore devices on Android.

Check your iOS device on this list:
https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/DeviceCompatibilityMatrix/DeviceCompatibilityMatrix.html

Check your Android device on this list:
https://developers.google.com/ar/discover/supported-devices

What 2D formats can I use?

In wiarframe, you can use either PNG or JPG files.

What 3D formats can I use?

In wiarframe, you can upload either OBJ or FBX files. …


Add some fun to AR by showing an animated 3D object using wiarframe

In this tutorial, we’ll use the wiarframe editor to upload an animated 3D model that we found online. We’ll then use the Wiarframe app to preview it in AR.

If you haven’t already, sign up for a free wiarframe account, get an overview of the platform, and check out this introductory tutorial for displaying an object in AR.

To get started, create a new table top wiarframe and call it ‘Tiny Dancer’.

Adding an Animated Object

Click on the scene canvas to bring up the new object form. Let’s create a 3D object and call it ‘Tiny Dancer’. …


Creating an interactive presentation using Wiarframe

In this tutorial, we’ll use the wiarframe editor to upload a sequence of 2D images and create an interactive slideshow. We’ll then use the Wiarframe app to preview it in AR.

If you haven’t already, sign up for a free wiarframe account, get an overview of the platform, and check out these introductory tutorials for displaying an object in AR and animating a 3D object in AR.

To get started, create a new room type wiarframe, about 2m square, and call it ‘Tap to Continue’.

Adding a 2D Image Object

Click on the scene canvas to bring up the new object form, and let’s create a 2D object. We’re going to upload a sequence of images, if you don’t have your own you can download some sample images. …

About

Jeremiah Alexander

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

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