Build Your Own AR Prototype — SXSW 2019

Create an Interactive AR Cocktail Maker

Jeremiah Alexander
Mar 12, 2019 · 13 min read

This tutorial is the companion for the SXSW 2019 Workshop of the same name, co-delivered by leading digital agency Huge and AR design and prototype platform wiARframe.

In this workshop, we will explore an application of AR, that we call Hyper Competence. We define this as, the ability for us to do something that we previously didn’t know how to do and to appear almost instinctive in our execution.

Image for post
Image for post
AR Hyper Competence

Since this is for SXSW, we have to prototype a relevant hyper-competence, something that encompasses the immediate needs of visitors… Let’s make an interactive AR experience that guides us through making the perfect Margarita :-)

Our prototype will display a holographic mixing glass alongside step by step instructions that the user can follow to make their drink.

Prerequisites

If you’re new to wiARframe, we recommend reading Getting Started with AR Prototyping in wiARframe before you start this tutorial.

Create a New wiARframe

In the pop-up form, name it mARgarita Mastery, and set the Scene Type to table top. You can leave the visibility setting as open — this means that anyone can view your wiARframe and remix it.

Importing our Cocktail Mixing Glass

In the pop-up form, set the Object Type to model and name it Mixing Glass.

In the inspector on the right of the screen, either click on the placeholder white cube or expand the Properties > 3D Model property drawer and click the upload icon.

Image for post
Image for post
New Model Properties

This will open up the asset manager, where we can select a 3D model to upload. For this tutorial, we’ve prepared you a custom 3D model and some 2D graphics, download them here (http://bit.ly/mARgarita_assets).

Once you’ve downloaded the assets, extract them, then drag and drop the mixing_glass.fbx onto the asset manager upload box. Once uploaded it will open up in edit mode.

Image for post
Image for post
Asset Manager

Adjusting the colours

Image for post
Image for post
Changing Model Colours

Close the default style drawer, and then click the select button in the bottom left corner of the window. This will assign the 3D model to the Object in our scene.

Adding Properties to Our Mixing Glass

Movability, Rotatability and Scalability

In each of the three new property drawers, tick the boxes to ensure the user can move, can rotate and can scale the object.

Adjusting the visibility settings

Click on the + button at the bottom of the properties inspector to add one more additional property, then select Visibility from the menu that appears. Drag the opacity slider to 50%, and change the Render Mode to shaded + wireframe. This is going to colour in the model as normal but also draw the outline of the 3D shape on top of it. Finally, set the wireframe colour to a medium shade of blue.

Increasing the Size

Image for post
Image for post
Mixing Glass Properties

Previewing in the app

From the home screen select your mARgarita Mastery wiARframe and open it. Follow the instructions to detect a tabletop and then tap to select it. You should now see your holographic mixing glass displayed and you should be able to reposition, resize and rescale it.

Image for post
Image for post

Let’s get back to the editor and add the instructions.

Adding some UI

Click anywhere on the canvas to add a new object. In the pop-up form, set the Object Type to Panel and name it Instructions.

From the inspector, either click on the placeholder white square or open the Properties > 3D Image drawer and click the upload icon.

Image for post
Image for post
New Panel Properties

This will open up the asset manager, where we can upload a 2D image. From the sample collection that we provided, drag and drop the step_0.png file onto the asset manager upload box. Once uploaded it will open up in edit mode, we have nothing to edit so just click select to assign it to our panel.

Reposition & Resize Our Objects

Image for post
Image for post
Scene Layout

Adding Properties to our Panel

With the Instructions object selected, Click on the + button at the bottom of the properties inspector to add an additional property, then select Rotation Binding from the menu that appears. In the new drawer, set the Target to Camera and the Bind Type to look at.

Optionally, you may also want to add the Moveability property to the Instructions so that the user can drag to reposition it.

Image for post
Image for post
Instruction Properties

Adding Interactive Hotspots

In the inspector, expand the Interactions drawer, and select the first interaction, rename it Begin Instructions.

We can now add one or more effects to this interaction, such as changing the properties of any object in our scene. In wiARframe to allow multiple object property changes at once, we group these property changes into groupings we call States.

Click the + Add an Effect button at the bottom of the effect list, and in the form, create an effect that changes the state of the Instructions to a new state, called Show Step 1.

Image for post
Image for post
Adding an Interactive Hotspot

This will automatically create a new state and select it for us. In this new state, we then add the properties that we want to change. We’re going to change two things, we’re going to swap the image being displayed and we’re going to activate some new interactions.

Show Step 1

This will open up the asset manager so that we can select a new image. Drag and drop the step_1.png onto the upload zone. Once upload click the select button in the bottom left corner.

When we change the image, the editor will automatically recalculate the scale to match the aspect ratio. As we know our image size is identical for all images, we can delete the Change Scale property added, by clicking the X next to its name.

Change the Interactions

Image for post
Image for post
Changing Interactions with States

Open the Interaction Layout tab, then click and drag to create a new hotspot over the next button. In the property inspector, we can then name this interaction Go To Next Step.

Click the + Add an Effect button at the bottom of the effect list, and in the form create an effect that changes the state of the Instructions to the Next State — this is a special instruction that will apply whatever the next state is on our object, very useful in our scenario.

Image for post
Image for post

Repeat the above process to create a new interaction for the back button called Go To Previous Step. Create an effect for this new interaction that changes the state of the Instructions to the Previous State.

We now have an active Go To Next Step and Go To Previous Step interaction, we should also be able to see the disabled Begin Instructions interaction.

Image for post
Image for post
Show Step 1 Interactions

Show Step 2

Image for post
Image for post
Duplicate State

By default, it will be called Show Step 1 copy. Click the edit button (pencil) in the properties drawer, and rename it Show Step 2.

Image for post
Image for post

Then click the upload icon in the Properties > Image drawer, and replace the image with the step_2.png. Again we can remove the Change Scale property, by clicking the X next to its name.

Show Steps 3 to 8

Show Step 9

Duplicate Show Step 8, rename it Show Step 9, and replace the image with the step_9.png.

Expand the interactions drawer and simply toggle-off the Go to Next Step interaction.

Image for post
Image for post
Show Step 9 Interactions

Previewing in the app

We should now see both our moveable glass, as well as our billboard instructions. If we tap on the begin, next or previous buttons, it should navigate us through the instructions.

Image for post
Image for post
mARgarita Mastery in-app preview

This is already pretty useful but let’s enrich it by triggering some 3D animations on our mixing glass.

Adding Animations

To achieve this, select the Mixing Glass from the Scene Layout, and add a new state by clicking on the triple-dot icon next to the state name and chose + New State.

Image for post
Image for post

In the new state, click the edit button in the properties drawer and rename the state Animate Step 1.

Click on the + button at the bottom of the properties inspector to add an additional property, then select Animation from the menu that appears. In the new drawer, set the Animation to Static Mixing Glass, and leave the looping toggle off.

Animating Steps 2 to 9

Repeat this process for steps 3 to 9 using the following animations pairings:

  • Animate Step 3 > Fill Mixing Glass to 55ml
  • Animate Step 4 > Fill Mixing Glass to 75ml
  • Animate Step 5 > Fill Mixing Glass with ice
  • Animate Step 6 > Shake Mixing Glass
  • Animate Step 7 > Pour into Cocktail Glass
  • Animate Step 8 > Garnish Cocktail Glass with a slice
  • Animate Step 9 > Static Cocktail Glass

Triggering Animations

Select the Instructions object in its default state. Expand the Begin Instructions drawer and click the add additional effect button.

Image for post
Image for post
Add Additional Effect

In the form that appears create an effect that changes the state of the Mixing Glass to Animate Step 1.

Next, change the Instructions object to the Show Step 1 state. In this state, expand the Go to Next Step interaction and add an additional effect that changes the state of the Mixing Glass to Next State. Now expand the Go to Previous Step interaction and add an additional effect that changes the state of the Mixing Glass to Previous State.

Image for post
Image for post
Add additional effects to an interaction

Previewing in the app

Image for post
Image for post

There’s only one thing missing… some REAL Tequila!

What Next?

Share it

When no objects are selected, the inspector will show information about your wiARframe. You can add a thumbnail, a description and even a link to a blog post about the project. You can then get the share link, by clicking on the share icon below the thumbnail. You can either share a link to the playable version in the app or the remixable version in the editor.

Image for post
Image for post
Share your wiARframe

Change the interactions to respond to the user’s gaze

Image for post
Image for post
Changing an interaction’s gesture

Add an Info Panel

Image for post
Image for post

Your favourite Cocktail

Other Competencies

wiarframe

Wiarframe was the world’s 1st dedicated AR prototyping tool… Unfortunately, it was ahead of its time

Jeremiah Alexander

Written by

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

wiarframe

wiarframe

Wiarframe is no more… It was the world’s 1st dedicated AR prototyping tool and unfortunately, it was ahead of its time.

Jeremiah Alexander

Written by

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

wiarframe

wiarframe

Wiarframe is no more… It was the world’s 1st dedicated AR prototyping tool and unfortunately, it was ahead of its time.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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