Create A White Noise Shader With Shader Graph In Unity
Today I am creating a static/white noise shader similar to what could be seen on older televisions years ago.
Today’s Objective: Create a simple static noise shader similar to the effects you might see on older TVs.
Note: This post isn’t intended to teach you how to use Shader Graph from the beginning. Just how to make a static noise shader. If you have never used Shader Graph, consider checking out some other resources/tutorials first.
Setting up Shader Graph:
Before you can use Shader Graph, you must:
- Be working in either a Universal Render Pipeline (URP)or a High Definition Render Pipeline (HDRP) unity project.
- Have downloaded the Shader Graph package from the in-built Package Manager.
After you’ve done both of these, you can start creating shaders.
Creating the shader file:
In your project files, create a new Shader Graph shader. I find that an unlit shader works best for shaders you intend to apply to lights such as screens, so I’ve created an Unlit Shader Graph.
Select the new shader and choose “Open Shader Editor”:
Now you should see a new window open, looking something like this:
Making the static noise shader:
First create a Simple Noise node and a Tiling And Offset node by right-clicking, choosing “Create Node”, and searching for those names:
Connect the Simple Noise node to the UV point of the T&O node:
At the moment, we have an image of white noise, but it doesn’t move. For that we need a Time node (plus some others):
Now after setting everything up like so, we have moving noise!
This will work perfectly if we create a material and apply this shader to it. However, the parameters of this noise effect are not changeable unless you open the shader like this again and modify them. But that changes them for every instance of this shader. That is not ideal.
Let’s make some of the useful parameters public, so that we can change them for each instance as needed.
For the 2 parameters I’ve chosen, I create 2 public properties within the shader:
And drag them into the shader:
You’ll notice that the resulting shader has now turned black. This is because the default values of the parameters are ZERO, but we need them to be higher. Correct this by selecting the properties and changing the defaults in the Graph Inspector:
Now the shader has returned to working condition.
Finally, connect the last Simple Noise node to the Base Color input of the Fragment group in the shader, and click “Save Asset”:
Now if we create a Material using this shader, and apply it to a GameObject, we can see it working:
Now by selecting the Material and changing the variables which are now visible on it, we can change how the static looks:
You can also lock the floats into a range, making them sliders.
Creating the scrolling “bands” as seen in the below gif is a fair bit more complicated, so I’ll go over that in tomorrow’s post.
