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 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.
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:
Multiply the 2 together to make a vertical noise which maintains an underlying shape:
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: