fbpx

Amplify Shader Editor – sobel edge detection postprocess

Intro to Amplify Shader Editor 

Post-processing is a method for adding effects to rendered images. If we want to be more precise, we can say it is working on a rendered buffer before the image is displayed on the screen. Some effects will require additional passes or data from other buffers but basically it is “material” for the rendered image.

Limiting our scope to the Unity environment, we have access to 3 different rendering pipelines, these include “Build-in”, “Lightweight” and the “High Definition” rendering pipelines. Each of which possesses its own post-processing components.

In this article, we focus on the most popular, being the Build-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 official documentation.

 

But what if generic effects library provided in Unity is not enough?

In this case, we can use an awesome tool – Amplify Shader Editor from Amplify Creations. It’s a powerful visual shader editor for Unity which is available in the asset store. Basically it’s similar to Unity’s shader graph but not limited to SRP (both lightweight and HD rendering pipeline) and works great in both the standard and built-in rendering engine.

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 make these effects as post-process using one of the shaders from ASE’s library. They provide a wide range of examples of custom shaders for learning and reusing.

One of which is Sobel post-process which gives interesting for our results but inverted (negative).

How it works: As named, it is using the Sobel operators for edges detection. this is one of the basic algorithms for image analysis. By taking every pixel with its neighbors as a 3×3 pix matrix and convolving it with the kernel matrix.

You can find more about image processing here, and here is a great explanation about edge detection technique.

Now, back to the work

Open example scene from:

Project/AmplifyShaderEditor/Official//TemplateExamples/PostProcess/Sobel

Ok, moving forward, let’s take a look at the hierarchy. To 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”.

Material has two parameters “Intensity” and “Step” which are used to customize its effects. Let’s see what is underneath. Click on “Open” in the Shader Editor button.

The shader editor then opens in a new window. At the left is nodes property panel, while over on the right we have the nodes library. Between them is graph nodes tree. Like other graphs editors data flows from left to right.

And, as you can see, there are some unused nodes. Let’s tweak it a little bit.

At 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 “Open in Shader Editor” button.

Also, as a precaution, lets’ give it a unique name to avoid duplicate names in shaders hierarchy. Click here and type a new name, for example, “Custom/Sobel test”.

This name is displayed in Inspector, when the material is selected, in the “Shader” field. We can maintain order in our shaders by grouping them. 

Shaders in Unity are grouped in a hierarchy like folders structure, independent of the project hierarchy. Grouping is quite simple, type group name, then slashes, then shaders name. You can add subgroup in the same way

Ok, now it’s time to save our changes. Click on this icon. This will recompile and save our shader.

The next step is to make the material from our shader. Right-click on Project panel on

Sobel_test > Create > Material

This operation automatically creates the material with our shader and with name form “Shader Name”

From the “Hierarchy” tab select the Main Camera and in Inspector tab we can then put this material to

Postprocess Example > Post Process Mat slot 

 

Ok, now on the Main Camera using our copy of 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. Original ASE Sobel shader has “0” default value for “steps”.

Change it to “1” in the inspector 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 which opens as a new bookmark. We should not forget that functions are very useful features as they save us time and keep order in graph tree, usually designed to do one task plus you have the added bonus of being able to reuse them in other shaders.

Ok, getting back to our shader. Click on the “Sobel test” bookmark. What we need is the inverse output color of this graph. One of the simplest ways to do is 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 is just 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 alpha input on the lerp node. And the output from lerp node to Sobel test input. As you can see, the lerp node has two other inputs for interpolation between.

Click on lerp node and on the left panel we find the fields for input values. We can type values here but a better way is to create these values as color nodes and set them as property.


For creating color RGBA node hold 5 on the keyboard and click. Or you can use right-click and type “color” or drag from the right panel: Constants and Properties > Color.

On the left panel (node properties) we can see the color value is constant. That means we can’t set it further from Inspector. In this case, click on “Type” fields and set it to “Property”.

Name it, for example, “Background” and set the default value as white. Now we can control this value from Inspector without recompiling the shader.

Ok, now duplicate this node (Ctrl+D on the selected node) and change its name to

Line Color

This node has already set Type as “Property” because was duplicated from previous and inherit all properties from it. Set default value to black.

Now, connect Background output (RGBA) to input A on lerp node and Line Color output to B. Save changes by pressing Ctrl-S or click on the first icon located top-left in the graph window.

Go to the Project menu and select our Custom_Sobel test material:

As you can see we have there two new properties “Background” and “Line color” and we can change it in real-time. The in-game view we have is the effect we are looking for.

Share with:


4Experience Crew - 09/29/2019 - Technology - 0 Comments

Leave a comment


This site uses Akismet to reduce spam. Learn how your comment data is processed.


DON'T MISS OUT!

Sign up to best of AR/VR news, application ideas and opinions on what matters to you.

Invalid email address

PL OFFICE:
ul. Widok 5
43-300 Bielsko-Biała, PL
NIP/VAT ID:PL547-215-50-20
REGON:362196623
KRS: 0000574950

US OFFICE:
350 S. Northwest Highway SUITE 300 Park Ridge, Illinois, 60068, USA

Logo_4experience_white-scroll

Copyright 4experience ©  All Rights Reserved | Privacy & Policy