Post Effect Tutorial
This guide is going to demonstrate how to make post effects with a Chromatic Aberration example.
Graph Post Effect from
Resources panel > Add New > 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:
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:
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:
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:
Still Looking for help?Visit Support