Skip to main content
Version: 4.0.0

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.

note

User Media Texture requires TikTok app version 30.2.0 or higher

user media texture demo

Add a User Media Texture

To add a User Media Texture, click the Add button [+] in the Assets panel, go to Texture, and select User Media Texture. You can use up to 8 User Media Textures in one project file.

add user media texture
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.

Add a Screen Image object by clicking the Add button [+] in the Hierarchy panel, going to 2D, and selecting Screen Image.

screen image

Then go to the Inspector panel and click the Image component's Texture field. Select your newly added User Media Texture and then click OK.

select user media texture

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

green checkered pattern
note

The green checkered pattern is a default texture that you can change. To do so, click the User Media Texture asset in the Assets panel, then go to the Inspector panel and change the Default Texture to your desired texture.

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.

preview in tiktok qr code

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.

preview in tiktok green checkered pattern    preview camera 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 preview cropped image

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. Add a Portrait Segmentation object to the Hierarchy panel, and then click the Background object. Then go to the Inspector panel and click the Image component's Texture field. Select User Media Texture and then click OK. Learn more about portrait segmentation.

user media texture portrait segmentation

Face Mask

You can also use User Media Texture to apply an image from your camera roll to the face. First add a Face Mask object to the Hierarchy panel. Then go to the Inspector panel and click the Face Mask component's Texture field. Select User Media Texture and then click OK. Learn more about face masks.

user media texture face mask

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.

user media texture materials

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.

user media texture visual scripting