How To Create an Augmented Reality App In Under 2 Minutes, With No Code
I won’t bore you with an intro. You’re here to build an AR app. Let’s get started.
What You’ll Need
- Vuforia Studio — Sign up for a free trial: https://studio.vuforia.com/
- A 3D model you want to view in AR. There’s tons of great free content on GrabCAD, Turbosquid, and Sketchfab.
- A smartphone (iOS/Android), or various wearable devices, including the Microsoft Hololens. See the complete list here.
- The Vuforia View app (Android, iOS, Windows)
1) Install and Run Vuforia Studio
While Vuforia Studio is installed on your computer, and the files for your projects are stored on your computer, the application/editor runs in your browser. This is because what you’re building is actually a web application, using typical web development frameworks like AngularJS and CSS. But we won’t get into that now.
With Vuforia Studio open on your desktop, click “Open”.
2) Create a New Project
Click the green “+” button the upper right corner to create a new project. On the next page input the desired name of your project, and leave the other options as they are.
2a) Getting to Know The Editor Interface
Before we move forward, it’s good to be familiar with the interface for Studio. If you just want to jump into things, move on to the next step.
Vuforia Studio is made up of 5 columns:
- 1) Project — This is where you’ll find all the content and resources of your experiences.
In “Configuration” you can set things like the experience name, description, and whether or not you’d want it to be password protected (more on this later).
If you’d like to customize the look and feel of your app, you’d go to the “Styles” section, where you’ll find “Application” — this is your .CSS file. It acts just like any other CSS file in a web application. If you’re not familiar with CSS, read more about it here. It’s OK if you’re not, you won’t need it here.
Below “Styles” is “Resources” — all the assets (2D images, 3D models) for your experience are located here. Vuforia Studio comes with some default 2D images, like this alert icon, that you can use, but you can upload your own content by clicking the green “+” button next to Resources. We’ll use that in Step 3.
- 2) Widgets — These are the types of things you’ll place in your experience (3D models, images, labels, etc.) as well as how you’ll choose which AR target type to use (image, model, spatial, ThingMark). At the bottom of the list you’ll see “TML Text” — this is for doing some very advanced things like custom shaders.
- 3) Canvas — This is where all the magic happens. You drag your targets and augmentations here, and have a three-dimensional view for setting up your experience. At the top you have basic functions like cut, copy, paste, and undo/redo. You also can switch between the 3D view, and 2D view (to setup the layout of your on-screen user interface (buttons, a logo, etc.).
- 4) Details/Properties — When you select something in your scene, like a 3D model, it’s properties can be viewed and edited here.
- 5) Data — (You don’t see this column by default; click the icon in the upper right corner of the window, seen in the image below, to show this column.) This is where other topics like IoT data and connected products come in, which requires other tools like ThingWorx come in. Since it’s not important for creating a basic AR experience, we won’t cover it now.
3) Import your 3D Content
To get started — you’ll need something to view in AR!
Click on the “+” icon next to Resources in the lower left corner, at the bottom of the Project column. Click “Select Files” and choose your 3D model.
See here for a list of supported 3D model types. Note that there is a slightly different level of support depending on whether you're using a Windows or Mac machine.
Before you finish uploading your model, you’ll the option to “Run CAD Optimizer”. Click that checkbox.
The CAD optimizer is a great feature if you’re using large or complex 3D models. It automatically creates 3 versions of your file in High, Medium, and Low qualities, trading detail for file size at each level. A lower quality model will allow your experience to run faster, but you may lose some important details! I generally stick with the Medium output in most cases.
Click “Add” to begin uploading and optimizing your model. When it’s finished you’ll find 4 versions of your model, all converted to .PVZ (PTC’s file type that’s designed to work across their suite of products — Vuforia, Creo, etc.).
4) Add Your Model to the Scene
From the Widgets column, click and drag the “Model” item into the canvas (note, not “Model Item”, that’s for something else). You’ll see a blue cube appear in the scene, as well as it’s properties to the right. In the properties, under Resource, select your model from the dropdown menu.
Now you should see your model in the scene!
5) Add an AR Spatial Target
Now, you’ll need a way for your model to appear in your reality, augmenting it (ehh, ehhhh? :) ) This is where the “Targets” come in in the Widgets column. For the easiest, most “portable” experience, we’ll be using a Spatial Target (a.k.a. “ground plane”, a.k.a “markerless AR”). This just means that we can place your model on any horizontal surface, like your desk or floor.
Click and drag the “Spatial Target” widget into the canvas, making sure it’s centered under your model.
6) Configure Your Properties
Before we go and publish your experience, we just need to make sure the properties are set properly.
In the upper left corner, under Configuration, click Experiences.
- Set ThinkMark Association to None.
- Add your title as you’d like it to appear.
- Leave Initial View at Home.
- You can leave Description blank for now.
Next click on Info, under Experiences.
Leave everything as default, except for the following:
- Change Access to Public.
- Set View Navigation Menu to Hidden.
Great, you’re done! That’s it! (I know, right?)
Go and hit “Publish” at the top. You’ll see a progress bar as your experience is uploaded.
When it’s complete, click Share > Share Experience.
You’ll see a couple of things here, including a QR code. We’ll need that next.
8) Viewing your AR Experience
Open up the Vuforia View app on your iOS, Android, or Windows device.
In the bottom right, tap the Scan icon. This will open your device’s camera.
Point your device at the QR code displayed on your desktop, from the previous step.
Your experience will start — point your device at a surface, making sure to move side to side, up and down, etc., so your device can identify where the surface is. As soon as a surface is found, you’ll see a silhouette of your model. Then just tap to place it!
Hint: Swipe across the screen with two fingers to rotate your model. Tap and drag with one finger to move it around.
Congrats, you just built your first AR experience!