Hello and welcome back to another 5-minute materials video. Today we're going to be talking about flow maps. What is a flow map and what can we do with a flow map?

Why is a flow map? Let's explore. So one of the things I've been using flow maps for recently, and what actually drove me to make this video in the first place, is this effect here.

And you can see that it's essentially a map of where something should flow, right?

That's it. Thanks for watching the video and with that we say, I'm just kidding. Now this is very much different to a Panner. We're going to actually explore how they differ in this video and when you should use each of them.

So you can imagine this is a really useful effect for things like wind.

It's very commonly used in rivers and like bodies of water to deal with things like, you know, the direction of the river. It can also deal with like foam on the edges of stuff, and in my case, I'm using it to do foam from movement and interaction in water bodies.

And it's also commonly used for things like water dripping down a surface just so you know it goes in all of the sort of crevices and whatnot.

So without any further Ado, let us begin the explanation, let us begin learning. So to start off with, let's discuss why a Panner can be a bad idea sometimes.

So if you're not sure what a Panner is, essentially if we get a texture, we get a Panner and we plug it in to the UVS, we Chuck that into the base color and we just set the speed to I don't know, 0.01 or something, we hit save and you can see that we now have a texture that is slowly moving ways.

Um you can see if I just make this a bit faster, it's going to be panning in the direction that we specified at the speed that we specified.

Now, the way that a Panner actually works under the hood is we get the original texture coordinates, so our original UVs, we then get time, which is the game time in seconds, and we add an offset to the texture coordinates.

For example, if I just had just a two vector and we're just going to do it in the X Direction, uh, and I just had a value, so we can essentially skip through time.

We're going to get this, we're going to multiply that by this, add that to the text cords, put that into the UVs, then if we hit save, you can see that we're not moving, but as I increase this value, we are panning the texture.

So after we've gone through one second of time, we've gone one whole UV space.

So if I keep doing this, you can see it's just panning through, and essentially if we were using time instead of that parameter, then this would just keep moving at one tile per second.

So this looks like it's doing what we're telling it to do, but where does it go wrong?

So the the first place this is going to go wrong is if the direction changes at runtime, or sorry if the direction changes gradually at runtime.

So for example, let's just get this, we're going to normalize this value, so you can see if I just punch in another variable, you know, it's moving diagonally.

If I get rid of this, it's moving vertically. If I make this a negative value, you can see that it will go in the opposite red Direction, but if if I gradually start increasing the red Direction, you can see that it just it skips over a bunch and it gets very jerky, and it's only when we stop changing the value that we get the effect that we wanted in the first place.

Now, the reason for this is to do with the way that time works. So if we just go back to having our static value, then you can see if, if let's just say we were 0.5 seconds into our session, as I start, you know, changing the uh the red value, you can see that from like the center offset, it's kind of swinging around in an arc like this.

And then as we go 1 second in the future, you can see that that arc travels more distance.

And then obviously, if we were like several minutes into our session, you know, maybe we're like, maybe we're 2 minutes in, then as we start changing the value gradually, it's just going all over the place.

Now, this limitation also applies to changing the speed of time at runtime. So if we just got time multiplied by a speed value and then multiplied by the direction, you can see that if time was one, we get this.

If it was two, it goes twice as fast. If it was 0.1, it's less fast.

But you can see that if I try to change this value gradually over time, it's going to do that same thing where it like skips a bunch of values and looks absolutely terrible.

So if I had a wind, for example, and the wind, I wanted the speed of the wind waves to speed up, I wouldn't be able to just use time and gradually speed it up like this, because if we wanted to go from 1.5 to two, then it's going to jump through a bunch of other values on the way to there.

So if we had a graph that was distance over time, so imagine just by default it's 1 second per second, one unit per second.

You can imagine if we are all the way over here and then we change the speed, we jump through a bunch of different values in order to get here.

And then from that point onwards it's, you know, it looks good at this speed, but then if we wanted to change it again, change the speed, we jump through, you know, a bunch of other values that, you know, kind of like, um, almost to like a different parallel timeline if you want to think of it that way, and warping to that other timeline causes all this crazy, you know, skibby RZ like this.

Now another place where panners fail us is if we wanted to pan different parts of the texture in different directions.

So if I got another texture, uh, I'm pretty sure there's one just called wind game wind noise and we just mask that in the RG.

So you can see if we're using a texture to determine our panning direction, um, in just, you know, a bunch of random directions.

At the beginning it looks like it's working, you know, it's panning them all in different directions, but then as time goes on, it just becomes an absolute mess, uh, and then as we approach infinity, it's just absolute, you know, monstrosity.

Oh my gosh. And so this is one of the things that flow maps are really good at. So just as an example, I'm going to get my Pris Flow Map secret source, which is a custom flow map that I have created.

You'll be getting it at the end of the video, lucky you.

But I'm just going to do this same thing using the flow map. All right, so you can see here, I've got my flow map set up.

Now you will notice this isn't really good for actual, like, texture text. Uh, but if I was using something appropriate, like a cloud noise, then you'll start to see that, yes, this is moving in a direction determined by a texture, and it looks pretty much seamless.

So you can see here that we have our clouds flowing in different directions, and you can almost, like, follow the flow continuously.

You know, we're going along, blah, blah, blah, it goes this way, then it's here, and you don't really notice any artifacting.

Now, the other example where we had our changing direction over time, so you can see here we now essentially have a Panner equivalent with our flow map. Uh, but the difference is that, you know, a few minutes, even hours, into a gameplay session, we can change the direction relatively smoothly.

We're not getting that jumping between, you know, jumping between values and stuff.

So if you were to do this really slowly, it would just naturally look like it is changing direction, as you can see here.

So the other really cool thing about flow maps is that they can also actually change the speed at runtime.

So if I just go to the flow map, we're not going to normalize the direction, and I just start increasing it from zero, you can see that, yes, it is, you know, it's flowing, it's flowing, it's flowing, still flowing.

You can just smoothly slow all the way back down to a complete halt.

So another property that flow maps can do, can, does do, is you can have variable speeds in the flow map.

So, for example, let's say we've got our regular old, this one, you know, we're saying flow in this direction, what we could do in theory is, say get the, let's just get the text coordinate and we're just going to get the G channel.

Uh, this is just going to return a gradient from top to bottom. We're going to multiply our speed by that value. All right, so you can see here that we are going faster and then it's slowing down gradually and coming to a complete halt at this end.

Uh, the other way we could do it is if we were using the R channel, then kind of like a river, it is flowing fast at this end but not moving closer to the shore or wherever we didn't want it to, uh, to move.

We just got this, run it through a L with a period of two, then you can see that it would just be going fast in the middle but not at either end.

Uh, and if we had just a period of one, it could even go backwards here and forwards here and it looks pretty much seamless.

So there we go. That is why we prefer flow maps over panning.

Now we need to look at how does a flow map actually operate. Now you don't necessarily need to know this to use a flow map, but it is always a good idea to know how a tool works and the the kind of theory behind it, uh, as well as it'll just give you some more insights into Shader effects in general and how you know shaders are constructed and whatnot.

So let's jump back in to the scene and the first thing we need to kind of know about is the Frac node.

So if we had time and we put it through a Frac node, Frac is just going to remove all of the, you know, the the integer, like anything left of the decimal place.

So it's going to return a zero to one value.

So you can see with Frac plugged into the base color, as time continues, this value might be in, you know, the hundreds, thousands by now.

As time goes on, it's just returning zero to one for each second. So if we looked at a graph of this, then it would be turning this value into something like bam, and then it would restart here, and then restart here, and then restart there.

So this would be one second here, this would be two, this would be three, so on, so on.

So you can see as the speed increases, the actual, like, speeding up and down of it looks fine, but it doesn't loop.

For, you know, this is looping 1.6 times before it resets back to zero. So what a flow map does is essentially creates multiple of these where they, you know, they go a certain distance and then reset back to their original place, but it layers them all on top of one another, and then it will actually ping pong between each of these things.

So you can see here now that I'm using the flow map, you can see that it's just getting multiple things, multiple different samples of this texture and panning them and fading between each of them.

And it just so happens that the moment that, let's say, this face right here fades out, it resets back to its original position, like we saw when we were using a Panner, but it fades in, and then it fades out and resets while it's faded out.

And so we layer three of these, in my case, three of them on top of one another.

And if you remember when we were adjusting the speed using a Frac time Panner, the actual transition of speed looked fine, but it's just that it wouldn't loop the whole way.

It was breaking the sort of loop when it was like not, you know, an integer number.

So with this, even if this slows down all the way to, you know, close to zero, you can see that they're just panning a little bit.

So this one's panning over a tiny bit, then it resets back to its original position, and then it keeps looping that.

Now, as you can probably tell, this isn't the best way to do panning, like a real, you know, like an important texture that needs to retain its visual quality.

This is really useful more for things like noise. So you can see with this noise pattern, you can barely tell that it's kind of flip-flopping between a bunch of different texture samples, especially when I start, you know, distorting it and whatnot.

Um, that like breaks up the tiling and the the sort of flippity floppity and then as we start, you know, changing the values, it just, you know, looks pretty decent.

So if you have Unreal Engine, which if you're watching this video is probably the case, there is a built-in function called flow maps.

You can see it's a little bit bigger than my flow map function, but size obviously isn't everything, copium.

And so if we jump into their flow map function, you'll see that it is a complete and utter but if we just go to my function instead, you'll kind of understand a bit better how a flow map works.

Look at that. So you can see here a difference between my flow map function and the the built-in one is that theirs uses two samples, whereas mine uses three.

The reason mine uses three, and I'll actually just show so you can see here in the real version of the flow map, you can kind of see that it's just swapping between two textures back and forth, um, and it's kind of really obvious because the texture kind of looks like it goes gray on and off, and the reason for this is that it's literally just going like this: one goes up and then down and then up and then down, and then the other texture goes down and then up and then down and then up.

And so these bits in here, you just have like a 50/50 blend of the two noise textures, which usually just results in it being gray.

It's also just a little bit obvious what's going on. Using this one here, you can see that it's just flipping between two different, two different textures.

So mine kind of uses three overlapping textures which are in a pattern of this, then this, then this, and then this, and then this.

So as Big Imp from Twitch chat—shout out to Big Imp—has so kindly set up in Graph Toy, uh, this is essentially what our Tri Fade In Outy function looks like.

So you imagine this line here is our current value.

At least one is always fading out, at least one is always fading in, and then at least one is staying completely steady. So this is why mine tends to look a little bit more stable than the Unreal version.

All right, so let's deconstruct a flow map step by step.

We understand the theory, we understand the use cases. Let's actually construct it. So the meat and the potatoes of this function is the triple sampler.

This takes in a texture object, just, it's just an easy way that, you know, they can all share the one texture.

reference over here is where they all get blended together, so we multiply them by their opacity value and then add them together. So what is happening over this end, well we have the actual flow map input, which is the RG value.

This doesn't have to be normalized. The flow map determines both the direction and also the speed of the flow map.

I multiply mine by -1 just to invert it, uh, cuz it was it was going the wrong way, basically.

Then we have the UVS input. So if you wanted it to be tiling, uh, more or less, or you wanted it to be world aligned, that's where the UVS come in.

This down here is just some extra noise to break up the tiling, so that's why this Distortion amount goes into here.

If you've watched my time video, uh, which you can find on YouTube somewhere, you'll know about distorting time using a texture sounds very, uh, very technical but simple thing once you understand it.

And so you can see essentially we've got time, we've got the Distortion and blah blah blah blah blah, and then we frack it.

So this is our 0 to 1 value. Then over here because we have three samples, we need to offset this fracked value by a third and 2/3 and then frack it again, so that essentially it's turning a uh, you know, a graph like this into either moving forward and then coming out here until it, you know, resets and then another one 2/3 ahead which does this and then comes out here, that's very wonky, comes out here which lines up here, and these are our three kind of timelines.

So we then get each of these timelines and we multiply it by the amount that we want to pan the texture.

and then we add that to the UVs, which essentially moves it in the direction. So after we have panned the textures by adding values to the UVs, we then apply an offset to the second and third sample.

Essentially what this does is that it makes the texture kind of appear in a more random location per, like each sample.

So you can see if we don't have that kind of randomized offset, if you had something going at a really low speed, uh, it would kind of look a little bit freaky for something like, you know, a panning noise texture.

This kind of creates some weird repetitive patterns, so it is usually better to have the random offset. So the only other element to discuss is this little, uh, you know, train rail switcher down here.

Uh, the essence of it is taking that 0:1 value, subtract 0.5, multiply by 2, and then absolute.

Intro to Flow Maps [UE5]

Intro to Flow Maps [UE5]