With target AR, an augmented reality effect is triggered when the camera is pointed at a specific real world target.
In this tutorial, you'll create a target AR effect with a dancing robot that appears when the camera is pointed at a Spark AR Studio poster.
Download the sample content to follow along. It includes both the finished project and an unfinished version.
To get started, open the unfinished effect in the sample content folder. We’ve already imported the objects and assets you’ll need — they’re listed in the Assets panel. You’ll see:
The foundation of any target AR effect is an object included in Spark AR Studio called a target tracker. This object detects the target, triggering an effect in response.
To add a target tracker:
It’ll be listed in the Scene panel as fixedTargetTracker0. You’ll also see a square in the middle of the Viewport and Simulator. This square represents the space for the target image:
Next add the target image to the target tracker:
There are two main parts to the effect. First you’ll create a colorful background behind the robot, then you’ll add the animated robot. Everything you add to the effect will be a child of the target tracker, so it will appear when the target is detected.
The background fits the shape in the center of the poster. You’ll use the Background object to create this part of the effect. It has 2 mesh:
The flat mesh will become an occluder. It’s positioned in front of the other mesh and will hide the parts of the texture we don’t want to appear in the scene, so the texture that does appear is the same size and shape as the center of the poster.
Let’s take a closer look at how this works:
To add Background to the scene:
Now make the occluder. To do this you’ll edit the material applied to the mesh. The material is called Occluder _MAT and listed in the Assets panel, underneath the Background object. So:
Here’s how your project will look:
Now edit the material applied to the second mesh to add the colorful effect to the background. It’s listed as Enviro_MAT in the Assets panel:
You’ve now completed the background:
The robot is a 3D object with an animation included in the file. It’s listed in the Assets panel as Robot. Add it to your effect in the same way as the background:
Adding a material to the robot
Let's give the robot a metallic appearance using the physically-based material. Start by creating a material for the robot:
The material will be listed in the Assets panel as material0. Rename it Robot_Mat. You'll apply it to each of the mesh that make up the complete 3D object.
You can find the meshes by clicking the arrow next to Robot, then Robot_GRP in the Scene panel to reveal its children. In this object the mesh are all listed under a null object called Model_Grp.
To apply the material to each mesh one at a time:
Next edit the material:
Here’s how the robot will look with a complete material:
Adding the animation
The animation playback controller can set how and when an animation plays. In this particular effect, we’ll set it to make the animation loop continuously.
To create the animation playback controller:
It’ll be listed in the Assets panel as animationPlaybackController0. Next you'll need to connect the animation included in the robot object's file to the playback controller. To do this:
It’s not visible in the scene yet. That’s because you need to connect the animation playback controller to the robot object itself.
To do this:
And that’s it, you’ve completed your target AR effect!
Use Spark AR Player to test the effect. You’ll need to print out the Spark Poster target — find it in the sample content file under Textures.
Distort the face with a blendshape and add a retouching material.
Change someone’s environment with segmentation and the camera texture.