How to make Augmented Reality Powered Street Wear
Hey all! It’s been a while, hasn’t it? We’ve been pretty busy with WeAre Studios, but we are proud to announce our latest project: making Augmented Reality Street Wear using Spark AR!
So what does our final product look like? Well, then! I thought you’d never ask. Check it out below.
Ta-da! So, how do we really do that, exactly? Let’s follow the steps below!
Step 1: Design your own graphic (optional)
This step is optional, but for us to even think about image tracking and activation, we’ll need to have our own graphic. If you already have something in possession, awesome! We’ll use it and skip to step 2. If you want something custom made, we highly suggest using Adobe Illustrator or Photoshop to create something from scratch. For our graphics, our friend helped us out with a starting file, to which we updated into the final image on the left.
Now that looks clean! As said, you can always find your own graphic using Google if you just want to test. Lastly, it’s important you follow these guidelines for the highest quality image for tracking within AR.
Step 2: Download Spark AR
Head over to Spark’s website and download Spark AR!
Step 3: Start a new empty project
Head on over to Spark AR Studio and click New Project. When a new pop up emerges, click on Blank Project. Yes, yes, we know that we can just as easily select Target Tracking from above Blank Project. However, we won’t learn as much as we would with a Target Tracking project template than with a Blank Project.
Step 4: Learn a bit about your Spark AR environment (optional)
Skip this step if you are already familiar with Spark AR. However, if it’s your first time using this program, then check out this tutorial to get a little bit familiarized with your Spark AR environment. Take your time learning the ropes as it gets really fun once you get a hang of it.
Step 5: Add A Fixed Target Tracker
On the scene panel, right click on your mouse and select Fixed Target Tracker. You can learn more about the Fixed Target Tracker here in this article.
After adding the target tracker, you can see in the Viewport a square image that is checkered. This is our main target tracker at a mock position in world space and it is checkered because it has no texture yet. So let’s add one!
Step 6: Add a texture on the fixed target tracker
First, click on the fixedTargetTracker0 on the Scene Panel on the left side.
Next, in the Inspector Panel, click on Choose File in the Texture option and click on New Texture.
Now, if you look at your Target Tracker in world space, you can see that the texture changed to what you chose!
Step 7: Add a 3D model inside the Fixed Target Tracker object
We highly suggest that you import one of the many 3D models in the Spark AR library to test first. The reason why is Spark AR already does all the compressing for you, so the 3D objects are simple to import. We recommend doing your tests first on these Spark AR imported 3D models first, then importing your own. We imported a sample Wooden Statue! The statue sits at x: 0 y: 0 z: -1.5
Step 8: Animate the 3D object
Here is the funnest part, at least for us! Click on fixedTargetTracker0 in the Scene Panel. Then in the Inspector Panel, click Create next to Producer Patch.
This will open up a new window at the bottom of Spark AR called the Patch Editor. Here, we will make our 3D Object rotate in a loop by it’s Y-Axis. Sort of like a collectible in a video game! Find out more about the patch editor here.
First, right click anywhere on the patch editor and search for Loop Animation. Do the same thing for Transition as well. You should get something like this:
The Loop Animation has multiple inputs, but we are only concerned about the Enable and Duration input, along with the Progress output. The Transition patch goes hand in hand with a Loop Animation patch as it calculates the transition from one Vector3 value to another Vector3 value.
What we’re going to do is set the Duration to 2 seconds and connect the Progress output with the Progress Input of the Transition Patch. It should now look something like this.
Here, we are telling the computer: start a 2 second animation indefinitely (loop) that goes from [90, -90, -180] to [90, 270, -180] . So, in two seconds, we go from -90 to 270 on our y-axis since that’s the only value that’s changing.
For the final piece of the puzzle, click on the wooden statue model again (or your own 3D model), head on over to the Inspector panel and click the arrow button near Rotation. This will create a Rotation Patch for our 3D object, which allows us to program it. Neat, huh?!
Now, let’s hook all the inputs and outputs together! To complete our looped animation, simply plug the Value output of the Transition patch into the 3D Rotation input of the Wooden Statue patch. Finally, we connect the Found output of the fixedTargetTracker0 patch into the Enable input of our Loop Animation patch. The result will look a little bit like this.
Step 9: Test on Spark AR
Make sure you have an Instagram or Facebook account connected to Spark AR before continuing with this. Before printing on your Street Wear items, you have to make 100% sure that this the target tracking works. Click Send to either Facebook Camera or Instagram Camera and wait for a notification to pop. Once a notification does pop, open the camera and test the target tracking with a sample image (on your computer). You should be seeing this:
Ta-da! I changed the 3D model to something a little less heavy so that Spark AR didn’t complain about exporting.
Step 10: Rinse, repeat and try again on printed Street Wear!
Now that you understand how to make tracked images, it would be cool to do the same thing with your own 3D models / worlds. Just make sure it works on the tracked image first by testing them! Who knows what you can make? AR Socks? AR hoodies? The world is ours!
