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:

Adding 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 animated robot

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.

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:

1. In the Assets panel, click Add Asset.
2. Select Create New Material.

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 Robot in the Scene panel to reveal its children. In this object the mesh are all listed under a null object called Model_Grp. They're selected in the image below:

To apply the material to each mesh:

1. Select a mesh.
2. Go to the Inspector.
3. Next to Materials, click the dropdown.
4. Select Robot_Mat from the menu.

Next edit the material:

1. In the Inspector, change the Shader Type to Physically-Based.
2. 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.
3. Check the box next to Environment, and select machineShop0 from the menu. This will simulate the effect of real world lighting.
4. 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.
5. Change all 3 sliders under Surface Parameters to 100% - making the occlusion, roughness and metallic effects as strong as possible.
6. 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:

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.

And that’s it, you’ve completed 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.