Language:
Page Info
Skill Level:
Engine Version:

Post Process Material Example

Choose your OS:

Creating a Material for Post Process Effects

Below are some basic instructions on how to set up a simple Post Process Material:

  1. Create a new Level by choosing File > New Level from the Main Menu Bar.

  2. Create a new Material by clicking the CB_button_NewAsset.png button in the Content Browser and choosing Material. Provide a name for the Material.

    CreateNewMaterial.png

  3. Double-click this new Material to open it up in the Material Editor.

  4. In the Material Properties panel, look under the Material category and set the Material Domain property to Post Process. This will require you to also set the Shading Model property to Unlit.

    PostMaterialProperties.png

  5. In the Post Process Material category, be sure to set the Blendable Location property to Before Tonemapping. This makes for more of a performance hit, but prevents ghosting of the scan lines while the view is in motion. For more information about the Blendable Location property, see the Critical Settings for Post Process Materials section below.

    PostProcessMaterialsCategory.png

  6. At this point, you would create some Material expression network that defined the look of your post process. As a test for this example, we will create a video scan line overlay effect. You can really make just about anything you like, however. If you would like an example of a cool video scan line post process material, see the Material Setup section.

Material Setup

This document is an overview and breakdown of simple video scan line Post Process Material.

VideoScanlineEffect.png

First, here are the textures used in the effect. You can right-click and save each one if you like or create variations of your own. They are all pretty simple.

ScanDistort.png

Noise.png

Scanlines.png

ScanDistortion.png (2x128)

Noise.png (512x512)

Scanlines.png (4x4)

It should be noted that the images seen here in this document are slightly misleading in that they have been scaled for visual clarity. When you download them (right-click > Save As), they will come through at their original sizes, which are noted in the table.

Assembly Overview

To facilitate putting this Material together, we have broken the key elements into separate numbered Comment boxes. You can go through each one and simply recreate each node network and connect them together and shown in the network image. Please be aware that the image of the network is rather large; it would be best to save it separately and view it on your computer.

The numbered steps below overview what is going on in the numbered Comment Boxes in the image. By using the two in tandem, you should be able to recreate this effect if you desire.

  1. We start with the Scene Texture expression, which is set to bring in the Scene Color. This is how we will manipulate the scene via post process.

  2. We perturb the UVs of the Scene Color using a simple panning texture (ScanDistort.png). This is done by multiplying the result of the texture by 0.03 and then combining it only with the red channel of the texture coordinates, effectively sliding the pixels across the screen. This creates a distortion effect.

  3. We bring in our 4x4 pixel scan line texture and tile it very heavily in the vertical direction (v:128). We also pan it downward very slowly.

  4. We reuse the same scanline texture, this time tiling it only by 1.28 and panning it upward, but a little more quickly. We also clamp it between 0.1 and 0.5. This will be used to create some variation in the scanlines.

  5. Create a time-driven sine wave that runs between 0.6 and 1.0, at a frequency of 10 Hz. This will be used to flicker the scanlines.

  6. Take the noise texture and tile and pan it at 2 different amounts and speeds for variation.

  7. Make an average of the two noises, then multiply it by the ScanDistort texture. Multiply that by 40 and add it into the result to create white static.

  8. We take the panning ScanDistort texture, raise it to a power of 4 (this boosts contrast), multiply it by 40 to make it very bright, but then subtract that from the final result to push it to full black. This creates the black bar effect often seen when tracking an old-school VCR .

If you actually needed to click the VCR link above, then we do not expect you to really appreciate this effect.

Assigning to a Post Process Volume

  1. We now need to associate the Material with a post process volume. In our case, we will use the Global Post Process. In the World Outliner, click Global PostProcess.

    SceneOutlinerGlobalPost.png

  2. In the Details panel, locate the Blendables property, found under the Misc category. Click the button_Plus.png button next to the property to add a new element.

    BlendablesProperty.png

  3. Select your new Material in the Content Browser and click the button_CBApply.png button to apply the Material into the element. Your effect is now applied.

Before post process material applied

After post process material applied

Now you can add in some of the property-based post process settings that are a part of the Post Process Volume. In this case, we did the following:

  • Pull Saturation to very near zero.

  • Use Tint to put a pale green cast over the result.

  • Boost Contrast to about 0.65.

  • Tweak Crush Shadows and Crush Highlights to increase contrast even further.

  • Set Vignette Intensity to about 0.9 for a really strong vignette.

  • Kick Bloom intensity up to about 3.0.