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]

PrismaticaDev

플로우 맵은 바람이나 물과 같은 흐름의 방향을 제어합니다.

플로우 맵은 패너와 다르며 특정 효과에 더 적합합니다.

일반적인 용도로는 바람, 강, 거품, 떨어지는 물 등이 있습니다.

패너는 시간에 따라 텍스처 좌표를 오프셋하는 방식으로 작동합니다.

패너는 점진적인 방향 전환에 어려움을 겪으며 흔들리는 움직임을 유발합니다.

런타임에 패너 속도를 변경하면 원치 않는 점프가 발생하기도 합니다.

패너는 텍스처의 다양한 패닝 방향에 비효율적입니다.

플로우 맵은 다양한 방향의 텍스처 흐름을 원활하게 처리합니다.

플로우 맵을 사용하면 오랜 시간이 지난 후에도 부드럽게 방향을 변경할 수 있습니다.

플로우 맵은 끊김 없는 전환 없이 런타임 속도 변경을 지원합니다.

플로우 맵을 사용하면 텍스처 전체에 가변 속도(예: 강 흐름)를 적용할 수 있습니다.

플로우 맵은 Frac 노드를 활용하여 반복 세그먼트를 생성합니다.

텍스처의 여러 샘플을 패닝하고 블렌딩하여 매끄러운 루핑을 구현합니다.

트리플 페이드인/페이드아웃 시스템으로 샘플 간의 부드러운 전환을 보장합니다.

플로우 맵 입력(RG)은 방향과 속도를 결정합니다.

UV는 타일링과 월드 정렬을 제어합니다.

노이즈와 시간 왜곡은 시각적 복잡성을 높입니다.

랜덤 오프셋은 샘플에서 반복되는 패턴을 방지합니다.

흐름 맵은 강의 속도 변화와 같은 동적 효과에 사용할 수 있습니다.

플로우 맵 길이는 효과 가시성(예: 빠르게 흐르는 영역의 거품)을 제어할 수 있습니다.

강 흐름을 월드 공간에 정렬하고 속도 변화에 맞게 조정할 수 있습니다.

디스턴스 필드는 흐름 방향에 영향을 미치고 장애물과의 상호작용을 생성할 수 있습니다.

안녕하세요. 또 다른 5분 재료 영상에 다시 오신 것을 환영합니다. 오늘은 플로우 맵에 대해 이야기할 겁니다. 플로우 맵이란 무엇이며 플로우 맵으로 무엇을 할 수 있을까요?

플로우 맵이 왜 필요할까요? 한번 알아봅시다. 최근에 제가 플로우 맵을 사용하고 있는 것 중 하나는, 그리고 이 영상을 만들게 된 계기는 바로 이 효과입니다.

보시다시피, 기본적으로 무언가가 흘러야 할 위치의 맵입니다.

그게 다입니다. 영상 시청해 주셔서 감사합니다. 농담입니다. 패너와는 매우 다릅니다. 이 영상에서 어떻게 다른지, 그리고 언제 각각 사용해야 하는지 알아볼 겁니다.

이것이 바람과 같은 것에 매우 유용한 효과라고 상상할 수 있습니다.

강이나 물과 같은 곳에서 강의 방향과 같은 것을 처리하는 데 매우 일반적으로 사용됩니다. 또한 물체의 가장자리에 있는 거품을 처리할 수도 있고, 제 경우에는 물 속에서 움직임과 상호 작용으로 인한 거품을 만드는 데 사용하고 있습니다.

또한 물이 표면을 따라 떨어지는 것과 같이 모든 틈새 등으로 들어가는 것을 표현하는 데에도 일반적으로 사용됩니다.

그럼 더 이상 지체하지 말고 설명을 시작하고, 학습을 시작해 봅시다. 우선, 패너가 왜 때로는 좋지 않은 아이디어일 수 있는지 논의해 보겠습니다.

패너가 무엇인지 잘 모르신다면, 기본적으로 텍스처를 가져와서 패너를 가져와 UV에 연결하고, 기본 색상에 넣고, 속도를 0.01 정도로 설정하고 저장하면 텍스처가 천천히 움직이는 것을 볼 수 있습니다.

속도를 조금 더 빠르게 하면 지정한 속도로 지정한 방향으로 패닝되는 것을 볼 수 있습니다.

패너가 실제로 작동하는 방식은 원래 텍스처 좌표, 즉 원래 UV를 가져온 다음, 게임 시간(초)을 가져와서 텍스처 좌표에 오프셋을 추가하는 것입니다.

예를 들어, 2차원 벡터가 있고 X 방향으로만 움직인다고 가정하고, 값을 하나만 가지면 시간을 건너뛸 수 있습니다.

이 값을 가져와서 이것과 곱하고, 텍스처 좌표에 더한 다음 UV에 넣습니다. 저장하면 움직이지 않지만, 이 값을 증가시키면 텍스처가 이동하는 것을 볼 수 있습니다.

1초가 지나면 UV 공간 전체를 이동한 것입니다.

계속 이렇게 하면 계속 이동하는 것을 볼 수 있습니다. 만약 파라미터 대신 시간을 사용했다면, 1초에 한 타일씩 계속 움직일 것입니다.

이것은 우리가 의도한 대로 작동하는 것처럼 보이지만, 어디에서 문제가 발생할까요?

가장 먼저 문제가 발생하는 경우는 런타임 중에 방향이 바뀌거나, 런타임 중에 방향이 점진적으로 바뀌는 경우입니다.

예를 들어, 이 값을 가져와서 정규화하면 다른 변수를 입력했을 때 대각선으로 움직이는 것을 볼 수 있습니다.

이것을 제거하면 수직으로 움직입니다. 이 값을 음수로 만들면 반대 방향으로 이동하는 것을 볼 수 있지만, 빨간색 방향을 점진적으로 증가시키기 시작하면 건너뛰는 부분이 많아지고 매우 불안정해집니다. 값을 변경하지 않을 때만 우리가 원했던 효과를 얻을 수 있습니다.

이유는 시간의 작동 방식 때문입니다. 정적 값을 다시 사용하면, 예를 들어 세션 시작 후 0.5초가 지났을 때 빨간색 값을 변경하기 시작하면 중심 오프셋에서 호를 그리며 회전하는 것을 볼 수 있습니다.

그리고 1초 후에는 그 호가 더 많은 거리를 이동하는 것을 볼 수 있습니다.

몇 분이 지난 후, 예를 들어 2분이 지난 후 값을 점진적으로 변경하기 시작하면 모든 방향으로 움직입니다.

이제 이러한 제한은 런타임 시 시간 속도를 변경하는 데도 적용됩니다. 따라서 시간에 속도 값을 곱한 다음 방향을 곱하면 시간이 1일 때 이렇게 됩니다.

2이면 두 배로 빨라지고 0.1이면 덜 빨라집니다.

하지만 이 값을 시간이 지남에 따라 점진적으로 변경하려고 하면 여러 값을 건너뛰고 끔찍하게 보이는 동일한 작업을 수행하게 됩니다.

예를 들어 바람이 있고 바람의 파도 속도를 높이고 싶다면 시간을 사용하여 이처럼 점진적으로 속도를 높일 수 없습니다. 왜냐하면 1.5에서 2로 가고 싶다면 그 과정에서 다른 여러 값을 뛰어넘기 때문입니다.

거리가 시간 경과에 따른 그래프라고 가정해 보겠습니다. 기본적으로 초당 1초, 초당 1단위입니다.

우리가 여기에 있다가 속도를 변경하면 여기에 도달하기 위해 여러 다른 값을 뛰어넘는다고 상상할 수 있습니다.

그리고 그 시점부터는 이 속도에서 보기에 좋지만 속도를 다시 변경하고 싶다면 다른 여러 값을 뛰어넘습니다. 마치 다른 평행 시간선과 같다고 생각할 수도 있습니다. 그리고 다른 시간선으로 워프하면 이러한 모든 엉망진창이 발생합니다.

이제 패너가 우리를 실망시키는 또 다른 곳은 텍스처의 다른 부분을 다른 방향으로 패닝하고 싶을 때입니다.

다른 텍스처를 가져왔습니다. 'wind game wind noise'라는 텍스처가 있고 RG에서 마스크 처리합니다.

텍스처를 사용하여 패닝 방향을 결정하는 경우 무작위 방향으로 말이죠.

처음에는 작동하는 것처럼 보입니다. 다른 방향으로 모두 패닝하고 있지만 시간이 지날수록 완전히 엉망이 됩니다. 그리고 무한대에 가까워질수록 완전한 괴물이 됩니다.

정말 놀랍죠. 이게 바로 플로우 맵이 정말 유용한 점 중 하나입니다. 예를 들어, 제가 만든 커스텀 플로우 맵인 프리즈마티카 플로우 맵의 비법 소스를 가져와 보겠습니다.

영상 마지막에 여러분도 얻을 수 있을 거예요. 운이 좋으시네요.

플로우 맵을 사용해서 똑같은 작업을 해보겠습니다. 자, 여기 보시면 플로우 맵이 설정되어 있습니다.

실제 텍스처에는 별로 좋지 않다는 것을 알 수 있을 겁니다. 하지만 구름 노이즈처럼 적절한 것을 사용하면 텍스처에 의해 결정된 방향으로 움직이는 것을 볼 수 있고, 거의 끊김이 없어 보입니다.

여기 보시면 구름이 여러 방향으로 흐르고 있고, 거의 연속적으로 흐름을 따라갈 수 있습니다.

계속 흘러가면서, 이쪽으로 갔다가 저쪽으로 가는데, 인공적인 느낌이 전혀 들지 않죠.

시간이 지남에 따라 방향이 바뀌는 다른 예시를 보면, 플로우 맵과 동등한 패너가 있습니다. 하지만 차이점은 게임 플레이 세션에 몇 분, 심지어 몇 시간 동안 참여하더라도 비교적 부드럽게 방향을 바꿀 수 있다는 것입니다.

값 사이를 건너뛰는 것 같은 현상은 없습니다.

아주 천천히 진행하면 보시다시피 자연스럽게 방향이 바뀌는 것처럼 보일 겁니다.

플로우 맵의 또 다른 멋진 점은 런타임에 속도를 변경할 수도 있다는 것입니다.

플로우 맵으로 가서 방향을 정규화하지 않고 0부터 시작하여 속도를 높이면 흐르고, 흐르고, 계속 흐르는 것을 볼 수 있습니다.

부드럽게 속도를 줄여서 완전히 멈출 수도 있습니다.

플로우 맵이 할 수 있는 또 다른 속성은 플로우 맵에서 속도를 가변적으로 설정할 수 있다는 것입니다.

예를 들어, 흔히 볼 수 있는 이 낡은 것을 예로 들어보죠. 이 방향으로 흐르고 있다고 가정했을 때, 이론상 텍스처 좌표를 가져와서 G 채널을 가져올 수 있습니다.

이것은 위에서 아래로 그라데이션을 반환합니다. 속도에 해당 값을 곱하면 보시다시피 속도가 빨라지다가 점차 느려지면서 이쪽 끝에서 완전히 멈춥니다.

다른 방법으로는 R 채널을 사용하는 것입니다. 강처럼 이쪽 끝에서는 빠르게 흐르지만 물가나 움직이고 싶지 않은 곳에서는 움직이지 않습니다.

이것을 가져와서 주기가 2인 L에 통과시키면 중간에서는 빠르지만 양쪽 끝에서는 움직이지 않는 것을 볼 수 있습니다.

주기가 1이면 여기서는 뒤로, 여기서는 앞으로 갈 수도 있고 거의 매끄럽게 보입니다.

됐습니다. 이것이 패닝보다 플로우 맵을 선호하는 이유입니다.

이제 플로우 맵이 실제로 어떻게 작동하는지 알아봐야 합니다. 플로우 맵을 사용하기 위해 꼭 알아야 할 필요는 없지만 도구가 어떻게 작동하는지, 그리고 그 이면에 있는 이론을 아는 것은 항상 좋은 생각입니다. 또한 셰이더 효과 전반과 셰이더가 어떻게 구성되는지 등에 대한 더 많은 통찰력을 얻을 수 있습니다.

장면으로 돌아가서 가장 먼저 알아야 할 것은 Frac 노드입니다.

시간을 Frac 노드에 통과시키면 Frac은 정수, 즉 소수점 왼쪽에 있는 모든 것을 제거합니다.

따라서 0에서 1 사이의 값을 반환합니다.

Frac을 기본 색상에 연결하면 시간이 지남에 따라 이 값이 수백, 수천이 될 수도 있습니다.

시간이 지남에 따라 매초 0에서 1 사이의 값을 반환합니다. 따라서 이것의 그래프를 보면 이 값을 쾅 하고 바꾸고 여기에서 다시 시작하고 여기에서 다시 시작하고 거기에서 다시 시작합니다.

자, 여기가 1초, 여기가 2초, 여기가 3초 이런 식입니다.

속도가 증가함에 따라 실제로 속도가 빨라졌다 느려졌다 하는 것은 괜찮아 보이지만 반복되지는 않습니다.

이것은 0으로 재설정되기 전에 1.6번 반복됩니다. 플로우 맵은 기본적으로 이러한 것들을 여러 개 만들어 특정 거리만큼 이동한 다음 원래 위치로 재설정하지만, 이 모든 것을 서로 겹쳐서 배치한 다음 실제로 이 모든 것들 사이에서 핑퐁을 합니다.

여기 플로우 맵을 사용하고 있는데, 이 텍스처의 여러 가지 샘플을 가져와서 패닝하고 각각 페이드하고 있습니다.

그리고 마침 이쪽 면이 페이드 아웃되는 순간, 패너를 사용했을 때처럼 원래 위치로 재설정되지만 페이드 인되고, 페이드 아웃되고, 페이드 아웃된 상태에서 재설정됩니다.

그래서 제 경우에는 이 세 가지를 서로 겹쳐서 배치합니다.

그리고 Frac time 패너를 사용하여 속도를 조정했을 때 속도 전환 자체는 괜찮아 보였지만 전체적으로 반복되지는 않았던 것을 기억하실 겁니다.

정수가 아닐 때는 일종의 반복을 깨고 있었습니다.

그래서 이것을 사용하면 거의 0에 가까울 정도로 속도가 느려져도 약간씩 패닝되는 것을 볼 수 있습니다.

이것은 아주 조금씩 패닝되다가 원래 위치로 재설정된 다음 계속 반복됩니다.

이제 아시겠지만 이것은 실제와 같이 시각적 품질을 유지해야 하는 중요한 텍스처를 패닝하는 가장 좋은 방법은 아닙니다.

이것은 노이즈와 같은 것에 더 유용합니다. 이 노이즈 패턴을 보면 특히 왜곡하기 시작하면 여러 텍스처 샘플 사이를 왔다 갔다 한다는 것을 거의 알 수 없습니다.

음, 그게 타일링과 일종의 팔락거림을 분해하고, 값을 바꾸기 시작하면 꽤 괜찮아 보입니다.

만약 언리얼 엔진이 있다면, 이 영상을 보고 있다면 아마 그럴 텐데, 플로우 맵이라는 내장 함수가 있습니다.

보시다시피 제 플로우 맵 함수보다 약간 더 크지만, 크기가 전부는 아니죠.

그래서 그들의 플로우 맵 함수로 들어가 보면 완전히 엉망진창이라는 것을 알 수 있지만, 대신 제 함수로 가면 플로우 맵이 어떻게 작동하는지 조금 더 잘 이해할 수 있을 겁니다.

보세요. 여기 제 플로우 맵 함수와 내장 함수의 차이점은 그들의 함수는 두 개의 샘플을 사용하는 반면, 제 함수는 세 개를 사용한다는 것입니다.

제 함수가 세 개를 사용하는 이유는, 실제로 보여드리자면, 플로우 맵의 실제 버전에서 두 개의 텍스처 사이를 앞뒤로 바꾸는 것을 볼 수 있습니다. 텍스처가 회색으로 켜졌다 꺼지는 것처럼 보이기 때문인데, 그 이유는 말 그대로 이렇게 움직이기 때문입니다. 하나는 올라갔다가 내려갔다가 올라갔다가 내려가고, 다른 텍스처는 내려갔다가 올라갔다가 내려갔다가 올라갑니다.

그래서 이 부분들은 두 개의 노이즈 텍스처가 50대 50으로 혼합되어 있어서 보통 회색으로 보입니다.

무슨 일이 일어나고 있는지 약간 명확하기도 합니다. 여기서 이것을 사용하면 두 개의 서로 다른 텍스처 사이를 뒤집는 것을 볼 수 있습니다.