Skip to main content
TikTok Effect House Platform Logo
Download
Log in
Tracking and detection

Device Tracker

The Device Tracker component is used to place and track objects in the real world. You can create AR environment experiences like placing a 3D character or object on the ground, putting a drone to make it fly in the air, etc.

Assigning Device Tracker

Find the Camera in Hierarchy, then click + Add component> AR Capability > Device Tracker to assign the component.

Note
Note

Device Tracker can only be assigned to sceneObject that has Camera component.

Or you can go Hierarchy panel, click +Add object > AR Tracking > AR Camera, it will generate a AR camera automatically equipped with the Device Tracker component for you.

Tip
Tip

When creating the AR camera, remember to delete the default Camera if you don’t need it.

Putting objects in the world

Let’s make an effect that UFOs are floating in the air.

First, make sure the Device Tracker component is assigned to the Camera. Go to the Inspector panel and find the Device Tracker, click on the Tracking mode dropdown menu to make sure it’s on the World option. This will ensure that all the objects that are rendered by the AR camera will be tracked in the world. You will be able to hold the device and move around freely.

↓ UFO-assets.zip

Download the UFO model and import them as assets into Effect House.

Next, let’s create an empty scene object by clicking + Add object > Create empty. Let’s rename it to AR container. Then scale down the AR container to (0.05, 0.05, 0.05) by clicking on AR container to open the Inspector panel and Transform.

Then drag the UFO model underneath the AR container and set the model scale to 1.0. Setting the model scale this way ensures that the UFO will scale normally in the real world.

Note
Note

Since the scale ratio between the 3D scene of Effect House and real world is 20:1. We create the AR container with scale of 0.05 to match the unit in real world.

If you can’t preview in the editor, feel free to generate the QR code and open TikTok to scan the QR code and preview the effect in TikTok.

unaligned-image-0
unaligned-image-1

Placing objects on surface

Let’s make an effect that places the alien character on the floor.

First, remember to follow the first step “Assigning Device Tracker”. Check the Device Tracker component and click Tracking mode to make sure it’s on the World option. This way, it will show and place the object in the environment when the camera detects a surface or plane.

↓ Alien-assets.zip

Download the alien model and import the assets into Effect House.

We will start by creating an empty scene object and renaming it to AR container.

Scale down the AR container to (0.05, 0.05, 0.05). Then drag the alien character underneath the AR container and tweak the alien character scale to the proper number, in this case it will be 0.5.

By doing so, the alien will show normal scale in the real world.

Note
Note

Since the scale ratio between the 3D scene of Effect House and real world is 20:1. We create the AR container with scale of 0.05 to match the unit in real world.

For the alien materials setting, please go to Body Avatar Drive “Applying body and helmet material” for more details. Here we will uncheck Auto Sorting of the helmet and alien scene objects and set the Sorting Order manually to ensure that the sorting order of the helmet is bigger than the alien entity. This way, the helmet will cover the alien’s head.

If you want to add a plane indicator, go Hierarchy panel and click + Add object > AR Tracking > AR Plane. And this will generate an occlude plane for detected surface in the environment.

Interacting objects with on screen hand gesture

Next, let’s make the object interactive so it can be resized, rotated and moved by using hand gesture.

Select alien mesh and alienHelmet mesh, and go to the Inspector panel. Click + Add component > AR Capability > Interactable Object to assign the component for each mesh.

Note
Note

Interactable Object component will only work for scene object that has Skin Mesh Renderer.

Now, the object will be interactable. If you preview your effect on TikTok, you can use pinch gesture to scale the object, drag gesture to move, and two fingers to rotate.

unaligned-image-0
unaligned-image-1

Interacting objects with on screen hand gesture

↓ ARPlacement.zip

Next, let’s make the object interactive so it can be resized, rotated and moved by using hand gesture.

There is a build-in component called Interactable Object. When assigned the component to the scene object that has Mesh Renderer or Skin Mesh Renderer, it will make the object interactable.

Tip
Tip

Intractable Object component will only work for scene object that has Mesh Renderer or Skin Mesh Renderer.

For our case that the alien object has several child meshes and we don’t want to assgin the component on each meshes. Therefore, we can build a simple interactable cube container to cover the whole alien object.

First, create a cube underneath the AR container, then normalize the cube scale to (1.0, 1.0, 1.0).

Tweak the transform of the cube to make it cover the alien character.

After the cube covers the character, nest the alien object underneath the cube.

Then select the cube, go to Inspector and click + Add component > AR Capability > Interactable Object. If click and drag the cube, you will find the cube along with the alien has been interactive with the drag.

Next, let’s try to make the cube invisible. Create a new unlit material and assign it to the cube. Go to the material Render State 0 settings, and change Blend Mode to Transparent, and tweak the color alpha to 0. The cube has been hidden now!

Now, the object will be intractable. If you preview your effect on TikTok, you can use pinch gesture to scale the object, drag gesture to move and two fingers to rotate.

Device Tracker related properties

Device Tracker

Tracking mode

World: Support 6 DoF (degrees of freedom) in space, which means it will maintain position and orientation in world space for the device. Use this mode when you want the object to be positioned at specific location in the world and don’t need to detect surface.

Orientation: Support 3 DoF in space, which means it will detect orientation but not position in world space for the device. The objects will keep the same relative position as the camera, so you can’t walk close to or far from the objects.

Interactable Object

Interactable: check to make the attached object interactable with the on-screen gesture. Unchecking the box will make the interaction disabled.