Full screen shader graph introduction in Unity

Hello everyone, welcome back.

Today's post will going to be a simple full screen shader introduction.

For this I am using Unity version 2022.3 and I have project setup in URP.

Creating shader graph and material

First of all, let's create a shader graph so right click > create > shader graph > URP > and then Full screen shader graph.

Let's call it FullScreenGraph.

Now let's create a material for it so keep our shader selected,

Right click > create > Material.

Let's call it FullScreen.

That's pretty easy but now the question is where do we apply this material?

We have to go to our renderer asset to assign our newly created material.

Locating renderer asset

If you don't know how to find it, go to Edit > Project Setting.

Go to Graphics tab, here we can see the render pipeline asset we are using.

Click on it and it will be highlighted in Project window.

Select our Pipeline asset, in the inspector you can see the renderer asset we are currently using.

Simply click on it to locate it in the Project window.

Select our renderer asset and in the inspector, we will add a new renderer feature.

For that go all the way down and hit this Add renderer feature button and select Full screen pass renderer feature.

It will add the new renderer feature.

Full screen pass renderer feature

Firstly let's give a proper name to our render feature.

I will call it FullScreenPass.

And in the Pass material slot we will apply our FullScreen Material.

The Inject point determines after which pass we want our full screen effect to render.

• Before Rendering Transparent will render our effect once all the opaque objects and our skybox is rendered.
• Before rendering post processing will render our effect after it renders transparent objects and before any post processing is applied.
• And last After rendering post processing will render our effect after everything else is done rendering.

The Requirements will allow our shader to use the additional passes and data.

• None means no addition passes or data.
• Everything means all of the following (Depth, Normal, Color and Motion).
• Depth will enable our shader to access depth or scene depth values.
• Normal will enable our shader to access normal vector data.
• Color copies the color data of screen to the blit texture.
• And Motion enables our shader to use motion vectors.

Pass index determines the pass index for our material to use. It will be visible, only if we have this Show additional properties checked.

Don't worry if all this is very new to you, we can get away without changing any of the settings unless we are going for specific effect behaviour.

Okay now I will just select Inject point to Before rendering post processing so that our effect will also receive the post processing we have applied in our scene.

Demo vignette effect

In our shader graph, let's go to Graph inspector, In the Graph settings, select the Blend mode to Alpha, otherwise this Alpha block won't work.

Okay here let's go for simple vignette effect.

Now, some of you might thing that we already have a Vignette module available in our post processing and that's absolutely correct, but this is for just a demo so bear with me.

Let's create a Tiling and offset node, and feed it into Length node.

Length node simply returns length of a vector from the origin.

In our Tiling and offset we have the origin at the bottom left, let's set it to center by offsetting it to -0.5, -0.5.

It will give us this effect, where the center is black and it becomes more white as we move towards the edges.

Let's take our Length node's output and feed it into the Power node.

Power node will darken the values which are less than 1 as we increase the power.

We will control the power from the inspector so let's create a Float property.

Call it VignettePower, give default value of 5, drag it in and assign it to the Power node.

Let's take our Power nodes output and feed it into the Alpha block.

Now let's create a Color property, call it BaseColor, Set the mode HDR, give some default color, drag it in.

We will multiply our BaseColor with the Power node.

Let's take our Multiply nodes output and feed it into BaseColor block.

That's it save our shader. It will look something like this at the end.

Trouble following along? Check out this video!

Thank you so much for reading!