User Media Texture

User Media Texture is an asset that allows TikTok creators to incorporate images from a camera roll into effects. For example, you can use User Media Texture to create an effect with a custom image as the background, similar to the Green Screen effect on TikTok.

Add User Media Texture

To add User Media Texture:

1. Go to the Assets Panel
2. Click the Add button [+]
3. Go to Texture
4. Select User Media Texture. You can use up to 8 User Media Textures in one project file.

note

Currently, User Media Texture supports only images and not video.

Apply User Media Texture to an Image Component

User Media Texture can be applied anywhere a Texture property is indicated. The simplest use case requires a Screen Image object.

To add a Screen Image object:

1. Go to the Hierarchy panel
2. Click the Add button [+]
3. Go to 2D
4. Select Screen Image

5. Go to the Inspector panel
6. Click the Image component's Texture field
7. Select your newly added User Media Texture
8. Click OK

9. By default, a green checkered pattern fills the 2D Scene panel and preview.

tip

The green checkered pattern is a default texture that you can change.

Change the Default Texture

To change the default green checkered pattern texture:

1. Go to the Assets panel
2. Click the User Media Texture asset
3. Go to the Inspector panel
4. Click Default UM Texture
5. Choose from an available texture or add your own
6. Choose a Segmentation type. If Portrait or Subject are selected, you'll have the option to change the default green checkered pattern from your mobile device.

Click the Preview in TikTok button in the titlebar to display the preview QR code. Then open the TikTok app on your mobile device and scan the QR code using the scanner function in the Friends tab. Learn more about how to preview in TikTok.

Once your effect preview is opened in TikTok, you can choose an image from your camera roll to apply to the User Media Texture. The green checkered pattern is replaced with your chosen image.

    

The selected camera roll image uses its original aspect ratio and does not necessarily fill the entire screen. If you want your camera roll image to fill the screen, make sure it is cropped to match your device's fullscreen dimensions.

User Media Texture Use Cases

As User Media Texture is an asset that can be applied anywhere there is a Texture property, it can be used in a variety of different scenarios, including, but not limited to, the following examples.

Portrait Segmentation

To make an effect with a custom image from your camera roll as the background, you can use portrait segmentation.

To add a Portrait Segmentation object:

1. Go to the Hierarchy panel
2. Click the Background object
3. Go to the Inspector panel
4. Click the Image component's Texture field
5. Select User Media Texture
6. Click OK

Learn more about portrait segmentation.

Face Mask

You can also use User Media Texture to apply an image from your camera roll to the face.

To add a Face Mask object to the Hierarchy panel:

1. Go to the Inspector panel
2. Click the Face Mask component's Texture field
3. Select User Media Texture
4. Click OK

Learn more about face masks.

Materials

User Media Texture can also be applied to materials on 3D objects. For example, add a Standard PBR material to the Assets panel. Then go to the Inspector panel, check Texture On under Albedo, and then click the Texture field. Select User Media Texture and then click OK. Learn more about standard PBR materials.

Then add a Sphere object to the Hierarchy panel. With the Sphere object selected, go to the Inspector panel and click the Mesh Renderer component's Material property. Select Standard PBR and then click OK.

Use Visual Scripting with User Media Texture

You can retrieve image indexes and information using the User Media Info node. This allows you to manipulate User Media Texture with visual scripting. Learn more about the User Media Info node.