Skip to main content
TikTok Effect House Platform Logo
Latest
Download
Log in
Post Effect

Filter

Use Filter to transform color inputs. You can make effects black and white or enhance your effect with fun cinematic colors.

unaligned-image-0
unaligned-image-1

In the Demo Effect sections, you will learn how to apply filters to different parts of the screen. Download the following files to get started:

↓ filter_half_and_half.zip

↓ filter_four_screens.zip

Here are some filter textures you can use:

↓ Color_Cards.zip

↓ colorCard_Template.psd

↓ colorCard_dark.zip

Add a Filter Object

Add a Filter object to your scene by clicking the Add button [+] > Post Effect > Filter in the Hierarchy panel.

Note
Note

Adding a Filter object automatically adds a Camera component in the Inspector panel. This makes it easier to apply filters to that camera’s render texture.

Object Hierarchy

Starting in Effect House v2.0.0, the Filter object is automatically added to the Post Effects render group in the Hierarchy panel. Learn more about render groups.

Create a LUT Texture

A lookup table (LUT) contains a preset filter texture. You can easily apply a LUT filter to color grade your effect. You can use a built-in LUT asset for your filter effect or create your own.

Use a Built-In LUT Texture

You can use a built-in filter texture by clicking the Add button [+] > Texture > LUT Texture and selecting an option in the Assets panel.

Customize a Filter’s Texture

To create your own LUT filter texture, you can use an image editing application. In the following section, you’ll learn how to use Photoshop and the Colorcards_Template.psd file to make your own filter texture.

Check out the following demo video!

Download the following Photoshop file:

↓ colorCard_Template.psd

Here are some LUT textures you can download:

↓ Color_Cards.zip

First hide the DEFAULT COLORCARD layer and add new adjustment layers with the default photo.

Once you’re satisfied with the result, hide the photo layer and show the DEFAULT COLORCARD layer. Make sure the DEFAULT COLORCARD layer is below the color layer.

unaligned-image-0
unaligned-image-1

Save it as a PNG file.

unaligned-image-0
unaligned-image-1

Your end result should look like a color card similar to the following image:

Import a Texture

Import your prepared filter texture, or color card, by clicking the Add button [+] > Import > From Computer in the Assets panel. Learn more about the recommended texture specifications for your 2D image.

Apply a LUT Texture to Filter Texture

Click the Filter object in the Hierarchy panel to access its properties in the Inspector panel. Then replace Bright LUT Texture, the default texture, with your new imported texture.

Filter Properties

Tip
Tip

We recommend that you do not add components that depend on the Mesh Renderer component to the Filter object. Doing so will make the mesh invisible.

Texture: Select a built-in texture or use your own. The default is Bright LUT Texture, a bright color lookup up table texture.

Intensity: Adjust the intensity of the filter to a value between 0 and 1.

  • Default: 1.0
  • Range:
    • 0.00: No filter is applied
    • 1.00: Full filter is applied

Color Correction

The following color correction properties make it easier to tweak the filter without having to repeatedly edit the LUT:

  • Exposure
  • Contrast
  • Brightness
  • Saturation
  • Temperature
  • Tint

Demo Effect: Half and Half

In this demo, you will learn how to apply filters to parts of the screen.

If you haven’t already, download the following file:

↓ filter_half_and_half.zip

Follow along with this video tutorial:

  1. Add a Filter object by clicking the Add button [+] > Post Effect > Filter in the Hierarchy panel.
  2. Create a Render Texture by clicking the Add button [+] > Texture > Render Texture in the Assets panel.
  3. Select the new Render Texture in the Assets panel and change the Input Texture property to Final Render Output in the Inspector panel.
  4. Select the Filter object in the Hierarchy panel to see the Camera component in the Inspector panel.
  5. Replace the default Render Texture with the new Render Texture.
  6. Add a 2D image by clicking the Add button [+] > 2D > Image in the Hierarchy panel.
  7. Select the new Image object in the Hierarchy panel and change the Texture property to the new Render Texture in the Inspector panel.
  8. To reorient the image, check Flip X and change the Rotation to 180 degrees in the Inspector panel.
  9. Expand Advanced Settings and change Draw Mode to Filled in the Inspector panel.
  10. Adjust the Start Point value to 0.5.
  11. Add a new Texture asset by clicking the Add button [+] > Texture > LUT Texture > Black and White in the Assets panel.
  12. Select the Filter object in the Hierarchy panel to see the Camera component in the Inspector panel.
  13. From the Inspector panel, replace the LUT Texture component’s default Texture propertyto Black and White.

Demo Effect: Four Screens

In this demo, you will learn how to apply filters to four images on the screen.

If you haven’t already, download the following file:

↓ filter_four_screens.zip

Start by applying a filter to the first image:

  1. Add a Filter object by clicking the Add button [+] > Post Effect > Filter in the Hierarchy panel.
  2. Create a Render Texture by clicking the Add button [+] > Texture > Render Texture in the Assets panel.
  3. Select the new Render Texture in the Assets panel, and then change the Input Texture property to Final Render Output in the Inspector panel.
  4. Select the Filter object in the Hierarchy panel to see the Camera component in the Inspector panel.
  5. Replace the Camera component’s default Render Texture with the new Render Texture.
  6. Add a 2D image by clicking the Add button [+] > 2D > Image in the Hierarchy panel.
  7. Select the new Image object in the Hierarchy panel and change the Texture property to the new Render Texture in the Inspector panel.
  8. To reorient the image, check Flip X and change the Rotation to 180 degrees in the Inspector panel.
  9. From the Scene panel, resize the image to fit the upper left quadrant of the scene.

Apply a filter to the second image:

  1. Duplicate the Image object in the Hierarchy panel to create Image (1).
  2. Duplicate the Render Texture in the Assets panel to create Render Texture (1).
  3. Duplicate the Filter in the Hierarchy panel to create Filter (1).
  4. With Filter (1) selected in the Hierarchy panel, go to the Inspector panel and replace the Camera component’s Render Texture with Render Texture (1).
  5. Add a new Texture asset by clicking the Add button [+] > Texture > LUT Texture > Green to Purple in the Assets panel.
  6. From the Inspector panel, replace theLUT Texture component’s default Texture propertyto Green to Purple.
  7. Select Image (1) from the Hierarchy panel, then change the Image component’s Texture property to Render Texture (1) from the Inspector panel.
  8. From the Scene panel, drag and resize the image to fit the upper right quadrant of the scene.

Apply a filter to the third image:

  1. Duplicate the Image object in the Hierarchy panel to create Image (2).
  2. Duplicate the Render Texture in the Assets panel to create Render Texture (2).
  3. Duplicate the Filter in the Hierarchy panel to create Filter (2).
  4. With Filter (2) selected in the Hierarchy panel, go to the Inspector panel and replace the Camera component’s Render Texture with Render Texture (2).
  5. Add a new Texture asset by clicking the Add button [+] > Texture > LUT Texture > Black and White in the Assets panel.
  6. From the Inspector panel, replace theLUT Texture component’s default Texture propertyto Black and White.
  7. Select Image (2) from the Hierarchy panel, then change the Image component’s Texture property to Render Texture (2) in the Inspector panel.
  8. From the Scene panel, drag and resize the image to fit the lower left quadrant of the scene.

Apply a filter to the fourth image:

  1. Duplicate the Image object in the Hierarchy panel to create Image (3).
  2. Duplicate the Render Texture in the Assets panel to create Render Texture (3).
  3. Duplicate the Filter in the Hierarchy panel to create Filter (3).
  4. With Filter (3) selected in the Hierarchy panel, go to the Inspector panel and replace the Camera component’s Render Texture with Render Texture (3).
  5. Add a new Texture asset by clicking the Add button [+] > Texture > LUT Texture > Warm in the Assets panel.
  6. From the Inspector panel, replace theLUT Texture component’s default Texture propertyto Warm.
  7. Select Image (3) from the Hierarchy panel, then change the Image component’s Texture property to Render Texture (3) in the Inspector panel.
  8. From the Scene panel, drag and resize the image to fit the lower right quadrant of the scene.