Completing The White Noise Shader

In this post, I am adding the scrolling bar effect to yesterday’s static shader to complete the shader effect.

Today’s Objective: Create and combine the scrolling static bars with the static noise effect from yesterday’s post.

Note: While I have used the Shader Graph many times for various effects, there is a lot to learn, so if you have any suggestions/improvements, please let me know! Especially with the major Shader Graph update that happened not too long ago.

Inside Shader Graph:

The process for creating this effect, even without the background static, is much more complicated than yesterday, so I’ll go through it step-by-step.

However, it basically comes down to 3 parts:

• Creating a vertical noise to affect the bars.
• Creating a horizontal noise to affect the vertical noise.
• And combining these 2 parts with a custom texture, which is the bars themselves, and continuously scrolling these down on-repeat.

The Texture:

A screenshot of the texture I’m using. NOT the original, so don’t use this file yourself.

The line texture only needs to be 1 pixel wide, but the height is important, since it determines the bar-to-no-bar ratio. The bar texture simply fades from 100% transparent to 100% white, then back to transparent. This, when stretched horizontally, makes a straight bar.

P.S. If anyone knows how I could procedurally create this texture/shape in-shader without a texture file, please let me know. I feel like I’ve done that before in the old Shader Graph system, but the new one’s made me forget how.

Anyway, the graph looks like this:

We’ll link this with the noise at the end.

The Noise:

First to create some simple vertical noise as the first base layer to give the general shape to the bar’s noise:

Now a second layer of noise to add smaller details and movement:

I use 2 public parameters to control the movement speed (“Distortion Strength”) and the smoothness of the noise (“Distortion Detail”).

Multiply the 2 together to make a vertical noise which maintains an underlying shape:

The Scrolling:

Now to make the bars scroll down, I need to offset the textures position continuously. I also want to control how many bars can be on the screen at one time, which would be a vertical tiling variable.

So I need a Tiling And Offset node:

Now I combine the scrolling with the noise, and add it into the texture sample’s UV variable:

The result is a nice-looking static screen, fully customizable via each Material instance: