The Post-Processing Filter

Use the post-processing filter template to apply different visual effects to the whole scene. The template lets you either choose between six different built-in post-processing filters or layer multiple filters on top of each other.

Opening the Elements template

To open the template:

  1. Open Spark AR Studio.
  2. In the Welcome Screen, go to Create New > All Templates and select Post-Processing Filter from the list.

Inside the template

The template contains a few different features and settings that can be easily adjusted to achieve a wide range of visual effects.

The postProcessingFilter block

In the Scene panel you’ll see the postProcessingFilter block. This master block contains six different post processing blocks and all their different inputs. This means you can easily choose which block and attributes to turn on or off from the postProcessingFilter Inspector.

The six post-processing effect blocks

Below the postProcessingFilter block, you’ll see six different blocks. These each contain attributes and settings that create different post processing effects:

  • filters
  • TV
  • Symbols
  • tiltShift
  • glitch
  • lensFlare

If you open the Patch Editor, you’ll see that these blocks are set up in a kind of series. For example, the symbols block outputs an image (which is itself a manipulation of the camera texture), this image is then used as an input for the TV block, which outputs an image that is used as an input for the tiltShift block and so on and so on, until the final image is out put to the device screen.

Because the blocks are set up in a series, you can layer multiple effects on top of each other by turning on multiple blocks on the postProcessingFilter Inspector.

Using the template

Editing the blocks

To edit the blocks, select the postProcessingFilter in the Scene panel and then:

  • Adjust the Inputs to change the way the filter looks.
  • Check more than one box to add multiple filters to your effect.

For example, below we’ve selected the TV block only. Adjusting the slider to the right of scanlines adjusts the thickness of the horizontal lines so they are more or less visible in the effect.

Post-Processing Effect Types

Below are the available post effect types that you can turn on and off and their available customizable inputs in the Inspector.

Glitch

Creates a pixelated, rainbow effect with customizable Glitch amount, Glitch scale and Chroma (chromatic aberration, to adjust the color shit effect).

TV

Creates an Analog TV/VHS look with the following stylistic elements to play with: Fisheye, Scanlines and TV Sync amount. TV sync mimics the property of old-broken TVs, where the image rolls up and down the screen.

Symbols

Creates a green, coding effect with customizable color and symbols scale.

tiltShift

Creates a blur effect that you can maximize or minimize with the Tilt Amount slider.

Lens Flare

Creates a Lens Flare effect. A lens flare is often deliberately used to invoke a sense of drama. A lens flare is also useful when added to an artificial or modified image composition because it adds a sense of realism. Lens Flare Dirt adds little Lens Imperfections to the image, which originated in Dust etc. on a physical lens, that makes the image feel more analogue/photographic. Lens Flare Halo adds a secondary light ring around the image that intensifies the Lens Flare. Another element creators can play around with to artistically tweak their effect.

Filters

Creates an image-editing filter that lets you adjust the default brightness, saturation contrast etc. for the whole scene and any scene objects, as if you’re using a TV remote. This filter is always on.

Using the blocks your own project

You can already customize the existing template by editing the block inputs as described above. If you want to go further, you can add and use any of the blocks in your own project.

For example, to add the symbols block to another project:

  1. From the Post-Processing Filter template, in the Asset's panel open the symbols block.
  2. Click File and select Package...
  3. Choose a name and destination on your computer.
  4. Click Save.

Next:

  1. Open a new or existing project.
  2. In the Assets panel, Click Add Asset > Import > From Computer and locate the symbols block on your computer.

Then set up the patch graph as follows:

  1. In the Scene panel, select Device, go to the Inspector and click Create to the right of Default Pipeline to render the filter block in the scene. We will edit the output later.
  2. Drag the symbols block into the Scene panel, this will instantiate your block.
  3. With the symbols block selected in the Scene panel, go to the Inspector and click the arrow to the left of Image. This creates a patch representing the symbols block texture that creates the visual symbols effect.
  4. Drag the symbols block from the Scene panel into the Patch Editor.

Your graph will look like this:

Then connect:

  1. The Image output of the symbols patch to the Device screen output patch.
  2. The Texture output of the Scene Render Pass patch to the Image patch.

Your final graph will look like this:

The symbols block is now set up to work in your project. To edit the visual effect created, you can open the symbols block and replace the symbols texture with a texture of your choice measuring 256 x 32 pixels. The symbols texture is listed as symbolsBW in the Assets panel.

Keep in mind that some blocks from the Post-Processing Filter template need to be set up slightly differently in the Patch Editor when you add them to your project. For example, you may need to add a Shader Render Pass or Blur patch.

Publishing

Once you’ve finished editing or customizing the template, it’s time to export and upload it to Spark AR Hub. Learn more about exporting and publishing effects.

Was this article helpful?