Question Noisy Transition (Intentional 'Banding')

I'm trying to set up a shader that transitions between 2 textures, using noise in between the two (across a single axis).
I can get from Texture 1 to Noise by lerping between the two, but I'm not sure how to 'cut off' this value, and add the other transition (from noise to Texture 2) on top.

Example of the initial transition:


What I'm looking for is a value that starts at 0, transitions to noise, then ends at 1 (i.e. starts at black and ends at white, with the noise in between).
Example (Done in Photoshop):


Q2:
In the final shader, I need to do this 3 times (4 textures), and have it be scrollable. How can I cut off these values, so I can add the textures together for the final result?
(By that I mean: Texture1 - Transition - Texture2 - Transition - Texture3 - Transition - Texture4, with Inputs to determine the amount of space on the mesh each Texture takes up (on a single axis))

 

Hi,
Your question is a bit convoluted. So, are you asking if you could blend textures together like A > B > C > D? And then also have those textures animate by scrolling each of them. I am not sure what exactly you mean with "using noise in between the two " and "cut off" etc.

Perhaps you could clarify this a bit.

But you could definitely blend between multiple textures.

 

As the second image shows, I need to have the transition between the two textures use noise. (i.e. black is Texture1, White is Texture2)
The textures themselves do NOT need to be animated (I will of course expose tiling & offset for each of them, but animating the textures themselves is not what I'm looking for).
What I DO need to do, is have exposed variables so that I can start with just showing 1 texture, then scale this out to showing all 4.
The ideal outcome would have variables for the size for each of the textures (V in UV), as well as their transitions.


Image for clarification (the intended result would be rotated 90 degrees from this, across Y instead of X):

1, 3, 5 & 7 are the textures. 2, 4 & 6 are the transitions (using Gradient Noise)

I want to be able to set the sizes for all of them, so I can animate it (start with just #1 showing across the entire mesh, animate in #3, then do the same for #5 etc, until all textures are visible)

 

Achieving something like above is quite easy - you can generate blend zone masks with smoothstep. This way you have control over the start and end of the transition area, which gives you the ability to control steepness of the transition like you have have drawn in your picture. Then you can generate your noise and multiply it down to maybe 0.1 range (min 0, max 0.1) and add that to a clean UV. Now you can use this UV's one dimension as the In value of your transition smoothsteps to deform them. I will add images in a moment to clarify this.

Perturbed UVs
Note: I've left out the animating part out as it's not that relevant, but you can just add time on the axis of your noise UVs to get the noise moving. And use multiply to control the speed. Or perhaps use some more sophisticated way of moving the noise. Remember that you have to use really mild offset.




Smoothstep to create transition
Here you see the edge values, you can use these to control steepness of the transition. Of course nothing in the UI limits you from breaking it down, so you need to use common sense to not go inverse etc.

Combine with Lerp
Use a few lerps with the smoothsteps as masks to composite together a result, like you see below. If you need more transitions you just add more similar composition steps.


I didn't go through your requirements that well but I think this should give you a good starting point that already is functioning.

 

Ah, I see where I went wrong now..
I was looking at the output as being 2D, even though it was 1D..

add that to a clean UV

was the part that got me in the right direction, thanks..

Instead of using the Lerps, as in your example; would another way to do this be:
- Create a Vector, of the same length as the amount of textures
- Push values into the vector corresponding to an 'alpha'-value for each texture
- 'Normalize' the Vector
- Multiply each 'alpha'-value with the pixel for the texture
- Add together the results
E.g. [0, 0, 1, 0] would result in a pixel from Texture3, whereas [0, .5, .5, 0] would result in 50% from Tex2, and 50% from Tex4
?

I got the functionality working in any case, so thanks for the help!

 

Good that you got it working. Use whatever works for you better, makes more sense to you and
does not bog down your game/product.