Published on | Prototyping: From UX to Front End — Medium Jeremiah Alexander

A code-free AR tutorial using wiARframe

© ZeroLight AR Car Showroom — https://zerolight.com/

Most likely you’ve seen an Augmented Reality Showroom App, perhaps one where you visualise a car in the real world, and change options such as the colour. AR Showrooms are a great way to preview how any product will look customised and at a specific location. In this tutorial, I’m going to show you how we can prototype an AR Showroom for a Toyshop in about 10 minutes.

This tutorial is using wiARframe — the world’s 1st dedicated AR Prototyping tool. It is currently in Closed Beta, so you need to sign up to request access. This article also assumes you know the basics i.e. how to create States and Interactions. If not, you should probably read the Quick Start Guide below. This guide is written with Editor version (0.3) and App version (0.1).

Getting Started with AR Prototyping in wiARframe

Getting Started

Logging into the wiARframe Editor at https://app.wiarframe.com, we can create a new Prototype. We give it a unique name e.g. Woody’s Toy Showroom, and set the Scene Type to Surface — as we want to detect a flat surface e.g. a Table and have our toy stand on it.

Adding Our Toy Model

Let’s dive straight in to the main part and add our toy to the scene. Create a new Object, let’s name it Cowboy, and set its Object Type to Model.

Our new Object will be placed at the centre of the scene, this is where we want it, so let’s just leave it there.

Selecting a Model

With our Object selected, we can see all of its properties in the Inspector on the right-hand side of the screen. The first property we want to change is the 3D Model. We change the model by clicking on the small 3D preview window that currently shows a white placeholder cube. This will launch the Asset Picker and allow us to select a Model, select the Model named Cowboy.

#SideNote. In wiARframe we’ve included some samples assets that you can use to quickly get started but you can find more online. We currently support simple .obj and .fbx files, with a single texture. For this tutorial we’re using a free Cowboy model by Melbers Animations, it’s been included in the App for convenience.

Adding a Model and a Texture

Selecting a Texture

Next, we need to select a Texture, again we’ll use one of the Sample Assets, the one called Cowboy Default. It’s a monochrome skin that is intended to add just enough detail to the model to make it look like an unpainted toy.

Cowboy Default Texture

Now that we have our Model and Texture selected we can launch the mobile App, load our prototype and check that our model loads and displays correctly.

Animating Our Cowboy

One of the great abilities of AR is that the viewer can walk around a model and view it from any angle they want, but we also want to make it easy for them to quickly view it in full without too much effort. To achieve this we’ll add a basic animation that rotates it to face the back when the user taps on it, on screen.

Adding a ‘Face Backward’ State

In order to affect the rotation of our Cowboy, we need to give him a State in which he is rotated to face the back. To do this we add a new State, enable the ‘Changes Rotation’ property, and set the turn (rotation around Y) to 180 °. We should also rename the state to something sensible like ‘Face Backward’.

Add an Interaction to Animate the Cowboy

Now that we have a ‘Face Backward’ State on our model, we can add an Interaction, so that our cowboy will transition to this State when the user taps on it. First select the Default State (as this is what we want to transition from), scroll to the bottom and click to ‘Add Interactions’.

Now add an Interaction that triggers with a Tap gesture and creates an Effect that changes the state of the Cowboy to ‘Face Backward’.

Test it out in the App, in order to check it works correctly.

Going Full Circle

You probably noticed that once we turn our Cowboy around, we can’t turn him back. In order to do this, we need to add a new State in which the Cowboy’s rotation is reset back to zero. Add a new ‘Face Forward’ State that changes the rotation back to the center.

Next, we want to add an Interaction on the ‘Face Backward’ State. This Interaction will change the state of the object to face forward again when the user taps on it.

By default, new States don’t change interactions, so after selecting the ‘Face Backward’ State, change its Interaction Property to ‘has custom interaction setup’. Next, click the ‘Manage Interactions’ button.

From the Interactions Layout, add a new Interaction that is only enabled on the ‘Face Backward’ State. It should be activated by a Tap and change the state of the Cowboy to ‘Face Forward’.

If we test in the App, we should now have our Cowboy rotate to face backward when we tap, and then forward when we tap again. However, we want it to loop, so one last change is required. We need to change the ‘Face Forward’ State’s Interaction Property so that it resets to default, this will tell it to use the same Interactions as the default State i.e rotate to face backward when tapped.

#SideNote. From the ‘Face Backward’ State, we could have transitioned back to the default State instead of the ‘Face Forward’ State. This would have reset the rotation of our Cowboy and saved us the need to create the ‘Face Forward’ State. However, the default State resets all properties and so would cause us problems later when we want to change properties such as the Texture but not have it reset when the object rotates.

Painting our Cowboy

Now that we have our Cowboy viewable, let’s add some customisation options, specifically the option to pick a colour.

Creating a Colour Picker Panel

Create a new Object, give it a suitable name e.g. Colour Picker and set the Object Type to Panel. We’re using a Panel in our showroom because the colour picker is just a 2D image, in a more exciting showroom the individual colours could instead be 3D Models, like folded up costumes but let’s keep it simple for now.

Let’s add a texture to the Panel, specifically the Cowboy Color Picker texture from the Samples Collection. We can also take this opportunity to reposition the Panel in the scene. I’m going to place it next to the Cowboy, just slightly above the floor and make it a bit smaller, but feel free to play around and find the layout you like best.

Making the Colours Pickable

The next step is to create an Interaction for each of the colours on the Panel. These Interactions should cause the Cowboy to change state to one of four new States, each of which will have a different texture to match the chosen colour.

Open the Interactions Layout for the Panel, and drag to create an Interaction hotspot around the brown colour. Next add an Effect to this, so that a Tap Gesture will change the State of the Cowboy. We want to change to a State called ‘Brown’ but that doesn’t exist yet. Fortunately, we can create it from here by selecting NEW STATE as the ‘Target State’ option. We can then name our desired new State.

#ProTip. To keep our project manageable we can name Interactions, to help quickly identify them from the list. You can use any naming convention you like but I tend to use ‘[Area Interacted With] [Gesture Performed]’, for example, the above Interaction would be ‘Brown Tapped’.

Adding the Cowboys’ New Clothes

If we return to our Cowboy in the Scene Layout, we’ll see that the new ‘Brown’ State has been added, ready for us to customise. The next step is to change the texture on that State. Let’s use the ‘Cowboy Traditional’ texture from the Sample Collection. We don’t want to change any other properties, so make sure all other changes are disabled.

Cowboy Traditional

Add the Remaining Costumes

If we launch the App, we should now have our Colour Picker displayed, and tapping on the brown square should change the Cowboy’s costume. The next step is for you to repeat the above two steps to add the Red, Blue, & special edition Wooden colours to our Toy. There is a texture available for each of those variations.

#ProTip. you can speed this up, by duplicating the selected Interaction, then repositioning, renaming and changing the Effect’s Target State on the copy.

The Finished Product

We’ve just created an Interactive Toy Showroom. We display a toy which the user can tap on to rotate and view from different angles. We also have a Colour Picker where the user can select a colour that they want their toy to appear in.

AR Toy Showroom running on iPad

Extensions

There are numerous enhancements that you can make to this project, below are a few suggestions and some pointers to get you started.

Size Selection. From another Panel, allow the user to pick one of a number of different sizes for the toy. This can work exactly the same way as the colour picker but you’ll need to upload your own texture for the UI (User Interface).
Toy Description. Add another Panel that shows the user information about the selected Toy configuration e.g. ‘This is the special edition Wooden Cowboy it costs $299’. The trick here is that making a configuration choice such as Colour, should also change the state of the Information Panel. If you want to display multiple information points, you can always make multiple smaller Panels that sit together.
Shop Front. Assume we want to simulate how this might work with commerce, we can add some additional UI to show how a user might add an item to a basket or checkout. This can be done as Models, Panels or as an Overlay (a 2D image that sticks to screen, like traditional UI).
Additional Toys. Add one or more additional Toys to the scene that the user can customise in the same way. You can hide both Toys at the start and add a first step where they decide which one they want to display. If they have the same colour options, then as a shortcut, you can reuse the colour picker and just have it affect the colour of both toys, as one will be hidden you won’t be able to see it change.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

How to Prototype an AR Showroom in 10 Minutes was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Prototype an AR Showroom in 10 Minutes

Cool stuff, every week

More Articles