Clear
Back

There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.

Tutorial: Creating a Target AR Effect

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:



Learn about:

  1. Adding a target tracker.
  2. Building the dancing robot effect.
  3. Testing target tracking.

Download the sample content to follow along. It includes both the finished project and an unfinished version.

Getting started

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:

  • Two 3D objects - Background and Robot. These objects will appear when the camera is pointed at the target.
  • A selection of textures, that you’ll use to make the robot look metallic.

Adding a target tracker

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:

  1. Click Add Object.
  2. Select Fixed Target Tracker from the menu.

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:

Add the target image

Next add the target image to the target tracker:

  1. Select the fixedTargetTracker0 in the Scene panel.
  2. Go to the Inspector.
  3. Next to Texture, click the dropdown and select SparkPoster.

The target should be a flat image, like a poster or business card.

Building the effect

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

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:

  • One mesh is a concave shape. You’ll add the colorful custom texture we can see behind the robot to it.
  • The other mesh is a flat shape with a hole in the center that matches the shape of in the center of the poster.

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:

  • The first image on the left is the target image, the poster.
  • In the center image we’ve added the custom texture that forms the background. You can see it’s too big and spills out behind the target image.
  • In the final image we’ve added the occluder, hiding the parts of the texture we don’t want to see.


To add Background to the scene:

  1. Select Background in the Assets panel.
  2. Drag it onto fixedTargetTracker0 in the Scene panel.


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:

  1. Select Occluder _MAT in the Assets panel.
  2. In the Inspector, change the Opacity to 0%. This will make it invisible to the eye, but it’ll still hide objects positioned behind it.
  3. Change the Blend Mode to Alpha.

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:

  1. Select Enviro_MAT in the Assets panel.
  2. In the Inspector change the Color to white - this’ll make the colors in the custom texture appear brighter.
  3. Click the dropdown next to Texture and select BG_ENV from the menu.

You’ve now completed the background:

The robot

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:

  1. Select Robot in the Assets panel.
  2. Drag it onto fixedTargetTracker0 in the Inspector.


So now the robot is visible in the scene, but there’s no animation. We’ll use an animation playback controller to add it.

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:

  1. Click Add Asset at the bottom of the Assets panel.
  2. Select 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:

  1. Select animationPlaybackController0.
  2. Go to the Inspector.
  3. Click the dropdown next to Animation Clip.
  4. Select dance - the name of the animation.

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:

  1. Select Robot in the Scene panel.
  2. Click the arrow next to Animation in the Inspector.
  3. Select animationPlaybackController0.

Editing the robot

So now you have the dancing robot in the scene. Let’s complete the effect by adding a physically-based material, giving it a realistic metallic appearance. To do this:

  1. Select the material applied to the robot - it’s listed as Robot_Mat in the Assets panel.
  2. In the Inspector, change the Shader Type to Physically-Based.
  3. Under Albedo, click the dropdown next to Texture and select Robot_DIF. This will add a base texture to the material that’ll add color and surface detail.
  4. Check the box next to Environment, and select machineShop0 from the menu. This will simulate the effect of real world lighting.
  5. Click the dropdown next to ORM Texture and select Robot_ORM. This will add an ORM texture that can be used to add occlusion, roughness and metallic details.
  6. Change all 3 sliders under Surface Parameters to 100% - making the occlusion, roughness and metallic effects as strong as possible.
  7. Check the box next to Normal, and select Robot_NORMAL from the dropdown menu. This will add even more surface texture.

Here’s how the robot will look with a complete material:



And that’s it, you’ve completed the physically-based material, and your target AR effect!

Testing target tracking

Use Spark AR Player to test the effect. You’ll need to print out the target - find it in the sample content file.

Learn more

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs
Was this document helpful?