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:

--

--

--

Unity game developer / C# Programmer / Gamer. Australian (Tasmanian) indie games developer for 10+ years. Currently looking for games industry employment.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Get Your First UX Design Job (and What to do Next)

Person at desk sitting in front of computer

3D Design is in — my journey into trying 3D for the first time

5 Practices to Enhance your UX Design Process

IBM’s 50 shades of grey

13 helpful UX Research tools

Designing with Data

The psychology behind your screen, feat. Dezzie García

The Ultimate Guide to Creating a Design System — Part Three, Complex Buttons

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vincent Taylor

Vincent Taylor

Unity game developer / C# Programmer / Gamer. Australian (Tasmanian) indie games developer for 10+ years. Currently looking for games industry employment.

More from Medium

The Last Challenge: Using Timeline For A Gameplay Sequence

Adding Reflection Probes in Unity

Unity TileMap: Smooth Movement in a Top-Down Game

How to switch between Cinemachine cameras in Unity