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.
- 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
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.
Once you have both the Editor and App, you are ready to begin creating and viewing AR Prototypes.
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.
Scene Types (Table Top or Room)
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.
Once you click the create button, you’ll be transported to the editor to begin the creation process.
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.
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.
Object Types (3D & 2D)
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.
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.
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”.
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.
Actions that Change Interactions
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.
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.
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.