Video Scanline Post Process Effects (Tutorial)

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 menubar.

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

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

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 Lighting Model property to Unlit.

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 scanlines while the view is in motion.

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 scanline overlay effect. You can really make just about anything you like, however.

Material Setup

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

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

File:ScanDistort.png|Scan Distort File:Noise.png|Noise File:Scanlines.png|Scanlines

It should be noted that the images seen here in this document are slightly misleading in that they've 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've 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's 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 scanline 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.

Assigning to a Post Process Volume

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

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

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

File:BeforePost.png|Before Post Process Effect File:AfterPost.png|After Post Process Effect

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.