Intro to Amplify Shader Editor
Post-processing is a method of adding effects to rendered images. More precisely, we can say that it is working on a rendered buffer before an image is displayed on the screen. Some effects will require additional passes or data from other buffers, but these are basically “material” for the rendered image.
Limiting our scope to the Unity environment, we have access to 3 different rendering pipelines, these include the “built-in”, “lightweight” and “high definition” rendering pipelines. All of these pipelines possess their own post-processing components.
In this article, we will focus on the most popular, being the built-in rendering pipeline. The package manager gives us access to a collection of filters and effects, such as color grading, anti-aliasing, screen-space ambient occlusion and many more. There are a lot of articles on how it installs and functions, including the official documentation.
But what if the generic effects library provided with Unity is not enough?
In this case, we can use an awesome tool – Amplify Shader Editor from Amplify Creations. Amplify Shader Editor (ASE) is a powerful visual shader editor for Unity and is available in the Asset Store. Basically, it’s similar to Unity’s shader graph, but is not limited to SRP (both lightweight and HD rendering pipeline); and it works great in both the standard and built-in rendering engines.
If, for example, we are in need of a linear, black & white render that looks similar to a CAD drawing
Obviously, we could use outline shaders for objects, but those come with some limitations. Instead, let’s create these effects as a post-process, using one of the shaders from ASE’s library. ASE provides a wide range of examples of custom shaders for learning and reusing.
One of these is the Sobel post-process, which yields interesting, but inverted (negative), results.
How it works: As named, it uses Sobel operators for edge detection. This is one of the basic algorithms for image analysis. It works by considering every pixel and its neighbors as a 3×3 pix matrix, and then convolving that matrix with the kernel matrix.
Now, back to the work
Open the example scene from:
Project/AmplifyShaderEditor/Official//TemplateExamples/PostProcess/Sobel
Moving forward, let’s take a look at the hierarchy. In the main camera, we have an attached script called “Post Process Example,” and in the “Post Process Mat” slot there is a material called “Sobel”.
The material has two parameters, “Intensity” and “Step,” which are used to customize its effects. Let’s see what is underneath by clicking the “Open in Shader Editor” button.
The shader editor then opens in a new window. At the left is the nodes property panel, while over on the right, we have the nodes library. Between them is the graph nodes tree. As with other graph editors, data flows from left to right.
And, as you can see, there are some unused nodes. Let’s tweak it a little bit.
First, let’s duplicate the shader (Ctrl+D), and rename it to something like “Sobel_test”
…and now we move to our asset folder:
We can open it by clicking on the Inspector tab’s “Open in Shader Editor” button.
Also, as a precaution, lets’ give it a unique name to avoid duplicate names in the shader’s hierarchy. Click on the “Shader Name” field shown below to type a new name. For example, “Custom/Sobel test”.
This name is displayed in the Inspector tab when the material is selected in the “Shader” field. We can maintain order among our shaders by grouping them.
Shaders in Unity are grouped in a hierarchy like a folder structure, independent of the project hierarchy. Grouping is quite simple, type the group name, then slashes, then the shader’s name. You can add subgroups in the same way.
Ok, now it’s time to save our changes. Click on the icon shown below. This will recompile and save our shader.
The next step is to create the material from our shader. Right-click on the project panel on
Sobel_test > Create > Material
This operation automatically creates the material using our shader and the name from “Shader Name”
From the Hierarchy tab, select “Main Camera”, and then in the Inspector tab, we can then add this material to
Postprocess Example > Post Process Mat slot
Now, on the Main Camera, using our copy of the Sobel post-process, we can see the final results in the Game view window. The screen is black because we have one last thing to do. The original ASE Sobel shader has a default value of “0” for “steps”.
Change it to “1” in the Inspector tab under material properties:
Let’s look at the nodes tree
There is an orange node named “Sobel Main”. It is a function. If you double-click on it, ASE will open it as a new bookmark. We should not forget that functions are very useful features, as they save us time and maintain order in the graph tree. Usually, they are designed to do one task, plus you have the added bonus of being able to reuse them in other shaders.
Returning to our shader; click on the “Sobel test” bookmark. What we need is the inverse the output color of this graph. One of the simplest ways to do is a Lerp output (RGB) of Sobel Main to new values.
Hold “L” on the keyboard and click somewhere between nodes to create a Lerp node. Or, you can do it by drag-and-drop from the right panel: Math Operators > Lerp. Another way to accomplish this is by right-clicking and type “lerp”. Lerp node creates linear interpolation between two values (scalars or vectors) based on weight.
Let’s connect Sobel’s main output to the alpha input on the Lerp node. And the output from the lerp node to the Sobel test input. As you can see, the Lerp node has two other inputs for interpolating between.
Click on the Lerp node, and on the left panel, we find the fields for the input values. We can type values here, but a better way is to create these values as color nodes and set them as properties.
To create the color RGBA node, hold 5 on the keyboard and click. Or, you can use right-click and type “color,” or drag-and-drop from the right panel: Constants and Properties > Color.
On the left panel (node properties), we can see that the color value is constant. This means that we can’t set it further from the Inspector tab. In this case, click on the “Type” field, and set it to “Property”.
Name it. For example, “Background,” and set the default value as white. Now we can control this value from the Inspector tab without recompiling the shader.
Next, duplicate this node (Ctrl+D on the selected node), and change its name to “Line Color.” This node already has its type set as “Property,” because it was duplicated from previous and inherited all properties from it. Set the default value to black.
Now, connect Background output (RGBA) to input A on the Lerp node, and the Line Color output to B. Save changes by pressing Ctrl-S, or by clicking on the first icon located at the top-left of the graph window.
Go to the Project menu and select our Custom_Sobel test material:
As you can see, there are now two new properties, “Background” and “Line Color,” and we can change them in real-time. The in-game view now shows the effect we are looking for.
