Skip to main content
Version: 5.x

Post Effect Tutorial

This guide is going to demonstrate how to make post effects with a Chromatic Aberration example.

Guide

Create a Graph Post Effect from Asset Browser panel > + > Graph Post Effect and apply it to a Post Effect component.

The default graph might look complicated, but what it actually does is just color the screen texture with a LUT map and then multiply it with a color parameter to give an extra tint. The entire structure can be as simple as this:

LUT stands for Lookup Table. The LUT Map nodes takes a target (which will be our screen texture) and colors it with a LUT map input.Texture Sample will come in handy when you only want one texture input but different UV Coords:

Chromatic Aberration

Now, let's make a chromatic aberration effect. The process can be broken down into two steps: offsetting screen texture and assigning RGB colors.

By adding or subtracting UV, we can offset Screen UV Coord. We start from a new graph, drop in a Screen UV Coord node and separate Screen UV Coord.x and Screen UV Coord.y with a Split node. Under Split node we can set Output 3 to disabled, since we won't be using it. Create a Float Parameter and name it "Chromatic Aberration Offset". This will be an offset controller. Check Enable Min and Enable Max to turn this parameter into a slider.

To offset the image horizontally, let's work on one side first by using a Subtract node to subtract the “Chromatic Aberration Offset” from Screen UV Coord.x. Combine this result back with original Screen UV Coord.y with a Channels (Mixer) node, and you get a new UV coordinate:

Create a Screen Texture node and connect it with a Sample Texture. Hook up our new UV to its UV Coords.xy input, and then feed the result to a Shader 3D at the end.

We can name the first texture we made "Left" and move on to create an Add node to add chromatic aberration offset to Screen UV Coord.x. Follow with a Channels (Mixer) node to combine Screen UV Coord.y back together like we did for Left. Plug it into a new Texture Sample node, feed in the same Screen Texture node and let's call this result "Right".

Besides hitting Tab hotkey to create new nodes, we can click and drag from an input or output for quick graph building:

Let's give Screen UV Coord its Screen Texture by connecting them straight to a new Texture Sample and call it "Center". We have Center, Left and Right split by chromatic aberration offset. Create a Channels (Mixer) node again to read in RGBA but only output R channel from the Center texture. Same for the G channel from Left and B channel from Right. Create one final Mixer node to connect all three texture sample outputs. On the Mixer node, you can expand how many inputs are accepted by the Channels dropdown menu. Finally connect this result to a Shader 3D node and we are done:

Here is how the entire graph looks like:

Downloads

Download the example material for chromatic aberration

Was this page helpful?
Yes
No

AI-Powered Search