[Inside Unreal] UI Material Lab 1: 오프닝 및 라이브러리 설명

 

Materials and Concepts

So I noticed some stuff while working with materials. First thing, not going to lie, materials are intimidating.
They introduce new concepts that we might not necessarily be used to, like the concept of UVs. They rely heavily on math.
And many nodes' names are just not self-explanatory.

작업을 하면서 몇 가지를 발견했어요. 첫째, 솔직히 말해서, 머티리얼은 정말 어렵습니다.
UV 개념처럼 우리가 익숙하지 않을 수 있는 새로운 개념을 소개하죠. 수학에 많이 의존합니다.
그리고 많은 노드의 이름은 그 자체로는 설명이 충분하지 않습니다.

Now I know that Lerp stands for linear interpolation. But if someone just wrote Lerp somewhere, I just didn't know.
I wouldn't know what they meant. And I always wondered [LAUGHS] does saturate have anything to do with saturation? Well, the answer is no. Also, if you come from certain types of software,
you are used to expressing your values in pixels. And you can't really do that in UI materials.
Most of the values that you will be using are zero to one values. So it just works differently.

이제 Lerp가 선형 보간을 의미한다는 걸 알지만, 누군가가 그냥 Lerp라고 썼다면 저는 몰랐을 거예요.
그들이 무슨 뜻인지 몰랐을 겁니다. 그리고 항상 궁금했어요, saturate가 채도와 관련이 있나요? 답은 아니에요. 또한, 특정 소프트웨어에서 온 경우,
값을 픽셀 단위로 표현하는 데 익숙할 것입니다. 그러나 UI 머티리얼에서는 그렇게 할 수 없습니다.
대부분의 값은 0에서 1 사이의 값입니다. 그래서 작동 방식이 다릅니다.

So, yes, I do use materials a lot. But most of the time, I'm just reusing the same nodes over and over.
I find myself having to loop time. So I will take the game time and I will multiply it by a speed parameter, and then I use the Frac node, or I have to do some basic transforms,
like translating, rotating, scaling. I need some gradients, like linear gradients, or radial gradients. But it's always the same combinations of nodes.

그래서 저는 머티리얼을 많이 사용합니다. 그러나 대부분의 시간에는 같은 노드를 반복해서 사용합니다.
시간을 반복해야 한다는 것을 알게 됩니다. 그래서 게임 시간을 가져와 속도 매개변수로 곱한 다음 Frac 노드를 사용합니다. 아니면 번역, 회전, 스케일링 같은 기본 변환을 해야 합니다.
선형 그라디언트나 방사형 그라디언트 같은 그라디언트가 필요합니다. 그러나 항상 같은 노드 조합입니다.

And despite reusing these things very often, I still don't always get it right the first time. Math is hard.
And this is a fact, especially when you try to translate math into something visual. It's not an immediate translation.
And you have to keep in mind the sequence of operations, and even the order of inputs in some cases.

이것들을 자주 재사용하더라도 처음부터 항상 정확하게 맞추지는 않습니다. 수학은 어렵습니다.
그리고 이는 사실입니다. 특히 수학을 시각적인 것으로 변환하려 할 때 그렇습니다. 즉각적인 변환이 아닙니다.
연산 순서와 경우에 따라 입력 순서까지 염두에 두어야 합니다.

 

 

 

 

 

Basic Understanding

So for this stream, I want to assume that people who are watching this are already familiar with the very basics of material.
So we'll not be teaching you how to create a material or how to create a material instance, although you will see me do that.
So if you don't know how to do that, you will just see how it is done.

따라서 이 스트림에서는 시청자들이 이미 머티리얼의 기본적인 내용을 알고 있다고 가정하고 싶습니다.
머티리얼을 생성하는 방법이나 머티리얼 인스턴스를 생성하는 방법을 가르치지는 않겠지만, 제가 하는 것을 보게 될 것입니다.
그 방법을 모르면 그냥 어떻게 하는지 보게 될 것입니다.

But I would still like to cover just a couple of concepts that I feel are important to explain so that we're all on the same page and pertain particularly UI materials so that we all
know we're all on the same page.

하지만 여전히 중요한 몇 가지 개념을 다루고 싶습니다. 모두가 같은 이해를 가지고 있고 특히 UI 머티리얼에 관한 내용을 설명하기 위해서입니다.

 

So we know that materials are basically sets of instructions. And these instructions determine the appearance of the pixel-- of each pixel-- of the object we want to render.

우리는 머티리얼이 기본적으로 명령어 집합이라는 것을 알고 있습니다. 이러한 명령어는 렌더링하려는 객체의 각 픽셀의 외관을 결정합니다.

So what do we want to render? If you're not used with UI material, you might think that you're rendering a mesh, because that's what most materials are doing.
They're rendering pixels on a mesh. But in the case of UI materials, we are rendering widgets.
So we are rendering images, borders, text. They are just different types of objects.

그렇다면 무엇을 렌더링하고 싶습니까? UI 머티리얼에 익숙하지 않다면 대부분의 머티리얼이 하고 있는 것처럼 메시를 렌더링하고 있다고 생각할 수 있습니다.
그들은 메시 위에 픽셀을 렌더링하고 있습니다. 그러나 UI 머티리얼의 경우, 우리는 위젯을 렌더링합니다.
즉, 우리는 이미지, 테두리, 텍스트를 렌더링합니다. 이들은 단지 다른 유형의 객체입니다.

 

What makes a material a UI material is that we use the user interface material domain, which is what you can set when you create or when you have a material open.
And what this does, it changes the output of the material to three or four values that we can set. And these values determine what the pixel looks like.

머티리얼을 UI 머티리얼로 만드는 것은 사용자 인터페이스 머티리얼 도메인을 사용하는 것입니다. 이는 머티리얼을 생성할 때나 열었을 때 설정할 수 있는 것입니다.
이것이 하는 일은 머티리얼의 출력을 우리가 설정할 수 있는 3~4개의 값으로 변경하는 것입니다. 이 값들이 픽셀의 외관을 결정합니다.

 

So the values that we can set are the color of the pixel. So it's an RGB value. And the opacity of the pixel, depending on the blend mode.
If it's not opaque, you can decide the opacity. And this is the alpha. And this is zero to one value.

그래서 우리가 설정할 수 있는 값은 픽셀의 색상입니다. 이는 RGB 값입니다. 그리고 블렌드 모드에 따라 픽셀의 불투명도입니다.불투명하지 않다면 불투명도를 결정할 수 있습니다. 그리고 이것은 알파 값입니다. 이 값은 0에서 1 사이의 값입니다.

And we can also control the screen position, although we will not cover this during this livestream.
And, yeah, as I mentioned, we use zero to one values for almost all of them except for the screen position.

그리고 화면 위치도 제어할 수 있지만, 이 스트림에서는 다루지 않을 것입니다.
네, 언급했듯이 화면 위치를 제외한 거의 모든 값에 대해 0에서 1 사이의 값을 사용합니다.

 

 

Important Concepts

So things to keep in mind. Each pixel doesn't know anything about the other pixels because pixels are all rendered at the same time, pretty much, all of them. And so, they don't know about each other.
And each pixel doesn't know what it look like in the previous frame. We don't store information between frames with UI materials.

염두에 두어야 할 사항들입니다. 각 픽셀은 다른 픽셀에 대해 아무 것도 모릅니다. 왜냐하면 모든 픽셀이 거의 동시에 렌더링되기 때문입니다. 따라서 서로에 대해 알지 못합니다.
또한 각 픽셀은 이전 프레임에서 어떻게 생겼는지 모릅니다. 우리는 UI 머티리얼로 프레임 간 정보를 저장하지 않습니다.

So what does the pixel know, and how does a pixel know what it has to look like?
A bunch of things. The most important stuff is the position of this pixel relative to its container. And it's what we call the UV coordinates.

그래서 픽셀이 무엇을 알고 있으며, 픽셀이 어떻게 해야 할 외관을 알 수 있을까요?
여러 가지가 있습니다. 가장 중요한 것은 이 픽셀의 컨테이너에 대한 상대적인 위치입니다. 이를 UV 좌표라고 부릅니다.

So UV coordinates is a couple of values. The first value is the horizontal position of the pixel. So all the way to the left will be zero. And all the way to the right will be one. And all the values in between.
And the second value is the vertical position. So all the way to the top it will be zero, and all the way to the bottom it will be one.

UV 좌표는 몇 가지 값입니다. 첫 번째 값은 픽셀의 수평 위치입니다. 왼쪽 끝은 0이고, 오른쪽 끝은 1입니다. 그 사이의 모든 값도 포함됩니다.
그리고 두 번째 값은 수직 위치입니다. 맨 위는 0이고, 맨 아래는 1입니다.

This position could be relative to the container as fit, but, also, it could be a relative to something else, for example, relative to the screen. These are called different types of coordinate spaces.
A material function that is in the Engine and that we're using Fortnite all the time, but I feel like it's a bit obscure. I don't find much information out there about this, but it's really vital for UI materials, is the get user
interface UV. This not only outputs different sets of UV coordinates but also the pixel size, which is the size in pixels of the container.

이 위치는 컨테이너에 상대적일 수 있지만, 화면에 상대적일 수도 있습니다. 이것들은 다양한 종류의 좌표 공간이라고 부릅니다.
엔진에 있는 머티리얼 함수로, 우리는 Fortnite에서 항상 사용하고 있지만, 약간 모호하다고 느낍니다. 이에 대한 정보는 많이 없지만, UI 머티리얼에서는 매우 중요한 함수입니다. 그것이 get user
interface UV입니다. 이 함수는 다양한 UV 좌표 세트를 출력할 뿐만 아니라, 컨테이너의 픽셀 크기도 출력합니다.

And this is important because you might, as we said, we have zero to one values. So where zero and one are the limits of the container where we draw something.
This means that if you stretch a container and you don't account for that, the content will be stretched. But if you know how big the container is, you can compensate the stretch. And that's what the pixel size node is useful for.

그리고 이것이 중요한 이유는 0에서 1 사이의 값을 사용하기 때문입니다. 따라서 0과 1은 우리가 무언가를 그리는 컨테이너의 경계를 나타냅니다.
이것은 만약 컨테이너를 늘리고 이를 고려하지 않으면, 콘텐츠가 늘어나게 된다는 것을 의미합니다. 그러나 컨테이너의 크기를 알면, 늘어남을 보상할 수 있습니다. 이것이 픽셀 크기 노드의 유용성입니다.

Animation and Timing

And there's another information that the pixelize is the game time. And this is very useful for animation.
We use animations inside materials a lot in Fortnite because it's just more performant for us to animate more in materials rather than a Sequencer because it relies more on the GPU rather than the CPU.

그리고 픽셀화가 포함하는 또 다른 정보는 게임 시간입니다. 이는 애니메이션에 매우 유용합니다.
우리는 Fortnite에서 머티리얼 내에서 애니메이션을 많이 사용합니다. 이는 시퀀서보다 머티리얼 내에서 애니메이션을 더 많이 사용하는 것이 더 성능이 좋기 때문입니다. 이는 CPU보다 GPU에 더 의존하기 때문입니다.

 

 

Material Parameters and Functions

A concept that I think everyone is familiar with but still better to make it clear because it is the foundation of the material lab is the concept of material functions.
As I mentioned, if you find yourself repeating the same operations over and over, it might be worth just packing them into a material function, which becomes an asset that you can reuse in different materials.

모두가 익숙할 것 같은 개념이지만, 머티리얼 랩의 기초이기 때문에 명확히 하는 것이 더 나은 개념은 머티리얼 함수의 개념입니다.
언급했듯이, 같은 작업을 반복해서 수행하게 되면, 그것들을 머티리얼 함수로 묶는 것이 좋습니다. 이는 다양한 머티리얼에서 재사용할 수 있는 자산이 됩니다.

So you don't have to redo the same operation. You just drag a material function, and it does the thing for you. It contains the logic. It has inputs and outputs.
And if you are more familiar with After Effects, I think it is a similar concept to the concept of effects in After Effect. It's not the exact same thing, but the concept is similar, where there are some bunch of operations that happen under the hood.
And what we see and what we can control is a bunch of input parameters, which are the same as the inputs in our material functions.

따라서 동일한 작업을 다시 할 필요가 없습니다. 머티리얼 함수를 드래그하면 작업이 수행됩니다. 그것은 논리를 포함하고 있으며 입력과 출력을 가지고 있습니다.
그리고 After Effects에 더 익숙하다면, After Effect의 효과 개념과 유사한 개념이라고 생각합니다. 정확히 같은 것은 아니지만, 개념이 유사합니다. 후드 아래에서 일어나는 여러 가지 작업이 있습니다.
우리가 보는 것과 제어할 수 있는 것은 입력 매개변수의 집합으로, 이는 머티리얼 함수의 입력과 동일합니다.

And, basically, these parameters just change the output of our material function.
And one difference is probably that we can have different outputs with Unreal. So, for example, we can have-- if we have a function that draws a circle,
we can have an output that draws the discus or the field circle and the different outputs that maybe draws only the outline.
But for the rest, they work in a similar way.

기본적으로 이러한 매개변수는 머티리얼 함수의 출력을 변경합니다.
Unreal에서는 다른 출력을 가질 수 있다는 점에서 차이가 있을 것입니다. 예를 들어, 원을 그리는 함수가 있다면,
원반이나 필드 원을 그리는 출력과 윤곽선만 그리는 출력 등 다른 출력을 가질 수 있습니다.
그러나 나머지 부분은 유사하게 작동합니다.

 

 

 

Integration with UMG

And of course, it wouldn't be UI if we didn't mention UMG, because UMG is the UI editor that we use in Unreal.
Materials integrate perfectly into UMG because all the parameters that we create in our materials can be animated. They can be animated into the Animation Sequencer.
But they can also be set directly in the Blueprint. And just a quick side note.
Something that we try to do in Fortnite is to animate less parameters in Sequencer for the reasons that I said before, because we want to move our calculations from the CPU to the GPU.
And so, for simple transitions, like you have a button that has maybe a hovered and unhovered state.
What you would do is you would have a control that is the hovered, which is just a float that goes from zero to one.

 

그리고 물론, UMG를 언급하지 않으면 UI가 아니겠죠. UMG는 Unreal에서 사용하는 UI 편집기입니다.
머티리얼은 UMG에 완벽하게 통합되는데, 이는 우리가 만든 모든 매개변수를 애니메이션화할 수 있기 때문입니다. 애니메이션 시퀀서에서 애니메이션화할 수 있습니다.
그러나 블루프린트에서 직접 설정할 수도 있습니다. 빠른 사이드 노트로, Fortnite에서 시퀀서에서 매개변수를 적게 애니메이션화하려고 하는 이유는 계산을 CPU에서 GPU로 옮기고 싶기 때문입니다.

그래서 간단한 전환, 예를 들어 버튼이 호버 상태와 비호버 상태를 가지는 경우, 호버 상태를 제어하는 것은 0에서 1로 변하는 플로트입니다. 이것을 시퀀서에서 애니메이션화합니다

 

And that's the one that you animate in the Sequencer. So you want to make just one parameter in the Sequencer.
And inside the material, you have parameters depending on this control. So, for example.
In this GIF, we have a color for the button when it's hovered and the color for the button default. And we animate the hovered control.
And what happens inside the material is that it picks one or the other, depending on if the button is hovered or not.
And so, yeah, this is something that can help with performance of the game and also can help preview the states,
because you can preview the hover state directly from the material instance.

.
시퀀서에서는 하나의 매개변수만 애니메이션화하고 싶습니다. 그리고 머티리얼 내부에서는 이 제어에 따라 매개변수를 가집니다. 예를 들어,
이 GIF에서 버튼이 호버되었을 때의 색상과 기본 색상이 있습니다. 그리고 우리는 호버된 제어를 애니메이션화합니다.
머티리얼 내부에서는 버튼이 호버되었는지 여부에 따라 하나를 선택합니다.
그리고 이것은 게임 성능에 도움이 되며 상태를 미리 볼 수 있도록 도와줍니다.
머티리얼 인스턴스에서 호버 상태를 직접 미리 볼 수 있습니다.

 

 

Material Lab

So time to talk about the material lab because we haven't even mentioned it yet. So the material lab is a collection of material functions, not only material functions, but also techniques or something that we call techniques, which is either combinations of material
functions or best practices, like the use of SDFs, which we will talk about later on. The philosophy behind it is that these
are intuitive to use, especially for artists. And we will see later how we try to make these happen.
But the idea is that they can be very easily chainable and can be used like building blocks. So you can chain a translator, rotate, and then a box,
and then you can slant it, and then you can turn it into half tone-- I don't know.
What the material lab is not, it's not an explanation of the super basic stuff, as I mentioned.
So it will not be explaining to you what a step is. But, also, it is also not the extreme opposite.
It's not this complex material breakdown. It's in the middle.

이제 머티리얼 랩에 대해 이야기할 시간입니다. 아직까지 언급하지 않았기 때문이죠. 머티리얼 랩은 머티리얼 함수뿐만 아니라 기술 또는 기술의 모음입니다.

이는 머티리얼 함수의 조합이나 SDF의 사용과 같은 최선의 실천을 포함합니다.
철학은 이것들이 직관적으로 사용될 수 있다는 것입니다. 특히 아티스트에게 말이죠.

 

그리고 나중에 이러한 것들을 어떻게 실현하려고 하는지 볼 것입니다.
아이디어는 이들이 쉽게 연결될 수 있고 빌딩 블록처럼 사용될 수 있다는 것입니다. 번역기, 회전기, 상자를 연결하고,
기울일 수 있고, 하프톤으로 변환할 수 있습니다.

머티리얼 랩이 아닌 것은 초보적인 내용을 설명하는 것이 아닙니다.
따라서 스텝이 무엇인지 설명하지 않습니다. 또한 극단적으로 복잡한 머티리얼 분해도 아닙니다. 중간 정도입니다.

Practical Application and Use

And the material functions that you will find in a project tend to be quite generic, not super specific,
because we just don't feel that there's much use for material functions that you probably would use just once in your life or never. So nothing too specific.

프로젝트에서 찾을 수 있는 머티리얼 함수는 대체로 일반적이며, 너무 구체적이지 않습니다.
한 번도 사용하지 않을 수도 있는 머티리얼 함수에는 큰 의미가 없다고 생각합니다.

This is an overview of the material functions that we have in the lab. So when you open the project, you will see
that they are in the form of cards. And these cards are all different examples.

이것은 랩에서 가지고 있는 머티리얼 함수의 개요입니다. 프로젝트를 열면 카드 형태로 되어 있습니다.
이 카드들은 모두 다른 예제입니다.

And we have different-- we sorted them into different categories. And the last tab, which is the Applications tab,
has a collection of widgets. So you not only you will be able to check out how the materials are made but, also, you can use them in UMG in real cases.

 

그리고 우리는 이들을 다른 카테고리로 분류했습니다. 마지막 탭은 응용 프로그램 탭으로 위젯 모음이 있습니다.

따라서 머티리얼이 어떻게 만들어지는지 확인할 수 있을 뿐만 아니라 실제 사례에서 UMG에서 사용할 수도 있습니다.

So to make a button, or to make an inventory slot, or a progress bar, or whatever. So you can really check out how maybe parameters can be animated, and how you can trigger an animation for a button that maybe gets hovered, or stuff like that.

버튼을 만들거나 인벤토리 슬롯, 진행 바 등을 만드는 등 실제 사례에서 사용할 수 있습니다.
따라서 매개변수가 애니메이션화될 수 있는 방법과 버튼이 호버되는 등의 애니메이션을 트리거할 수 있는 방법을 확인할 수 있습니다.

 

 

So the main purpose of the material lab is educational.
머티리얼 랩의 주요 목적은 교육적입니다.

These materials that we have in our examples are heavily commented, so that if you really want to understand what's going on, you just open the material or the material function,
and you just read all the comments and follow through. And, hopefully, it is easily understandable.
But, also, at the same time, for people who are starting-- and not only-- we want to also convey some best practices that they can use.
And we will see later when we talk about SDFs in particular how you can really boost the performance of your game
by using less textures. And also, the visual quality of it. And you can get better animations.

예제에서 가지고 있는 이 머티리얼들은 주석이 많이 달려 있어, 무엇이 진행되고 있는지 정말 이해하고 싶다면, 머티리얼이나 머티리얼 함수를 열고
모든 주석을 읽고 따라가면 됩니다. 그리고 쉽게 이해할 수 있기를 바랍니다.
또한 동시에 시작하는 사람들뿐만 아니라 최선의 실천을 전달하고자 합니다.
그리고 나중에 SDF에 대해 이야기할 때, 텍스처를 적게 사용하여 게임 성능을 크게 향상시키는 방법을 볼 것입니다.
그리고 시각적 품질도 향상됩니다. 그리고 더 나은 애니메이션을 얻을 수 있습니다.

There's just lots of advantages. But, also, if you are already working with materials, you might just want to expand your material library.
And that's also, we hope, a useful tool for that, because there are a lot of material functions.
Maybe you just want to check out if there's a different way of doing something that you're already doing.

이점이 많습니다. 그러나 이미 머티리얼 작업을 하고 있다면, 머티리얼 라이브러리를 확장하고 싶을 수 있습니다.
그것도 유용한 도구가 되기를 바랍니다.
이미 하고 있는 일을 다른 방식으로 할 수 있는지 확인하고 싶을 수 있습니다.

 

And why not inspiration? Because maybe you just started with Unreal Engine. You don't even know what you can do with UI.
And maybe you don't know you can do certain animations inside materials and stuff.
So we hope this can provide some inspiration. And maybe you are a designer or an artist
and you just want to prototype something. This is really a safe space to do that.
It's called material lab for a reason because it really is meant to be experimented with and to be just played with.

 

그리고 영감을 받을 수도 있습니다.
왜냐하면 Unreal Engine을 처음 시작했을 때, UI로 무엇을 할 수 있는지 몰랐기 때문입니다.
머티리얼 내부에서 특정 애니메이션을 할 수 있는지 모를 수도 있습니다.
이것이 영감을 제공할 수 있기를 바랍니다.
그리고 디자이너나 아티스트일 경우, 무언가를 프로토타입화하고 싶을 수 있습니다.
이것은 정말 안전한 공간입니다. 실험하고 즐길 수 있는 공간이기 때문입니다.
머티리얼 랩이라는 이름이 붙은 이유는 정말 실험하고 놀기 위한 공간이기 때문입니다.

 

 

Practical Example

So I just want to give you a little tease of how these cards that we saw before would translate into material functions in a practical application.
This is not the demo. I will just do a demo just in a little bit. So I will not really explain exactly what's going on but just give you an idea of how you would go, for example, creating this objective marker.

So you could maybe use this for a capture point or something. It has this diamond that-- and that's a progress bar, that fields. So the way you would go with that is, if you didn't even
know where to start, you would probably just check all the other functions that we have in the examples and just try to find something that is good for you.

 

So first, I would think, yeah, I would just take a box, and I will rotate it 45 degrees. And I will take the outline of the box. And then I will use some sort of mask to mask the progress the way I want it. And that's how we go with it. So the box, we have a material function.

 

그래서 이 카드들이 실제 애플리케이션에서 머티리얼 함수로 어떻게 변환될지 간단히 보여드리고 싶습니다.
이것은 데모가 아닙니다. 곧 데모를 할 것입니다. 그래서 정확히 무슨 일이 일어나고 있는지 설명하지는 않겠지만, 예를 들어 이 목표 마커를 생성하는 방법을 간단히 보여드리겠습니다.

이것을 캡처 포인트로 사용할 수도 있을 것입니다. 다이아몬드가 있고, 이것은 진행 표시줄입니다. 진행 상황을 표시하는 것입니다. 어디서부터 시작해야 할지 모를 경우, 아마도 예제에 있는 다른 모든 기능을 확인하고 자신에게 맞는 것을 찾아보는 것이 좋습니다.
먼저 상자를 가져와 45도 회전시키고, 상자의 윤곽선을 가져옵니다. 그런 다음 진행 상황을 원하는 방식으로 마스킹하는 마스크를 사용합니다.

It's the SDF box. And as you can see, you have a bunch of input parameters. And we take the outline output.
And this is what it looks like, just an outline box outline.

그래서 상자에는 머티리얼 함수가 있습니다.
그것은 SDF 상자입니다. 보시다시피 여러 입력 매개변수가 있습니다. 그리고 우리는 윤곽선 출력을 가져옵니다.

 

So now we want to rotate it 45 degrees and also to scale it to fill the container. So this is the customer data that is in the Engine.

이것은 그냥 윤곽선 상자처럼 보입니다.
이제 상자를 45도 회전시키고, 컨테이너를 채우기 위해 스케일링하고 싶습니다. 이것이 엔진에 있는 고객 데이터입니다.

And this is our scale function. So see, we are chaining them together.
And this is what we see now. Now we basically want to be able to find some gradient that we
can use to mask the progress.

그리고 이것이 우리의 스케일 함수입니다. 보세요, 우리는 이들을 함께 연결하고 있습니다.
그리고 이것이 우리가 지금 보는 것입니다. 이제 기본적으로 진행 상황을 마스킹하는 데 사용할 수 있는 그라디언트를 찾아야 합니다.

 

And this is what the square gradient is for.
It is a gradient that goes from zero to one along a square.
Now I'm just here storing the UV so that I can use them-- that I can give the rotated UVs to the square gradient.
And this is what it looks like.

And I combine it with a step so that it becomes a harsh mask of zero or one.

 

그리고 이것이 사각 그라디언트의 목적입니다.
이것은 사각형을 따라 0에서 1로 이동하는 그라디언트입니다.
지금 여기에 UV를 저장하여 회전된 UV를 사각 그라디언트에 제공할 수 있습니다.
그리고 이것이 그 모습입니다. 그리고 이를 단계와 결합하여 0 또는 1의 거친 마스크가 되도록 합니다.

 

And I'm using linear time, in this case, to animate it. But, of course, this could be set by a parameter
maybe that you set in Blueprint. So this is our progress mask. So now, we want to take the outline that we had.
and we want to intersect it with the mask. So the mask will mask the outline.

 

이 경우에는 선형 시간을 사용하여 애니메이션화합니다. 하지만 물론, 이것은 블루프린트에서 설정한 매개변수로 설정할 수도 있습니다.

이것이 우리의 진행 상황 마스크입니다. 이제 우리가 가지고 있던 윤곽선을 가져와서 마스크와 교차시키고 싶습니다. 마스크는 윤곽선을 마스킹합니다. 

 

And we use the min node for that.
So this is the outline that we were using before. This is the progress mask that we made. And this is the output.
It's a masked outline. 

그리고 이를 위해 min 노드를 사용합니다.
이것은 우리가 사용하던 윤곽선입니다. 이것은 우리가 만든 진행 상황 마스크입니다. 그리고 이것이 출력입니다.
마스킹된 윤곽선입니다. 

 

And now we just make another box for the thinner background line.
And really nothing fancy about that. It's the same box just with slightly different parameters. The stroke is thinner.And it's just a bit smaller.

이제 얇은 배경 라인을 위해 또 다른 상자를 만듭니다.
그리고 정말 특별한 것은 없습니다. 약간 다른 매개변수를 가진 같은 상자입니다. 스트로크가 더 얇습니다.

And this is our progress background. And we just combine the alpha with what we had before so
that we see both of them. And now we need just one thing, which is the inner diamond
field, which is, again, another box.

그리고 조금 더 작습니다. 이것이 우리의 진행 상황 배경입니다. 그리고 우리는 알파를 이전에 가지고 있던 것과 결합하여
두 가지를 모두 봅니다. 이제 필요한 것은 내부 다이아몬드 필드 하나입니다. 다른 상자입니다. 

 

And this time, instead of using the outline, we use the field.
So it's field. And it's a bit smaller. And we just combine this. So, basically, now we use the three boxes, a rotator, and the scale.
And we have all the alphas that we need to also use them with the colors.

이번에는 윤곽선 대신 필드를 사용합니다.
그래서 이것은 필드입니다.

그리고 조금 더 작습니다. 그리고 이것을 결합합니다. 기본적으로 이제 우리는 세 개의 상자, 회전, 스케일을 사용합니다.

그리고 우리는 알파를 모두 가지고 있어 색상과 함께 사용할 수 있습니다.

 

 

 

 

And now it becomes a Lerp frenzy because we used the masks that we have created. So we have our diamond and we say, OK, where there's the diamond,
make it this greenish color. And there's the progress, make it this light blue color.
And for the rest use this gray color. And so, here we have it. It's just an animated capture objective marker.

이제 우리가 만든 마스크를 사용하므로 다이아몬드가 있는 곳을 초록색으로 만듭니다. 그리고 진행 상황이 있는 곳을 연한 파란색으로 만듭니다.
나머지 부분은 회색으로 사용합니다. 그리고 여기 있습니다. 이것은 애니메이션화된 캡처 목표 마커입니다.

 

This is the final material. And you will notice that we used no textures.
And this matters because we are saving memory, which we can use for other textures,
maybe textures that are cooler that we really need.

We don't need to worry about the texture resolution.

이것이 최종 머티리얼입니다. 그리고 텍스처를 사용하지 않았다는 것을 알게 될 것입니다.
이는 중요합니다. 왜냐하면 우리는 메모리를 절약하고 있으며, 이 메모리는 다른 텍스처에 사용할 수 있습니다.
정말로 필요한 더 멋진 텍스처일 수 있습니다. 텍스처 해상도에 대해 걱정할 필요가 없습니다.

And it's just easier to animate because animating a parameter is just easier than trying to animate a texture. And all these values that we can tweak really give us a quicker iteration time because we can just tweak a parameter.
We don't need to re-export the texture and then re-import it in the Engine, and then see the stuff update.
We can just change literally a number, and we see what is changing.

 

그리고 매개변수를 애니메이션화하는 것이 더 쉽습니다.
텍스처를 애니메이션화하려고 시도하는 것보다 매개변수를 애니메이션화하는 것이 더 쉽습니다. 그리고 이러한 값을 모두 조정할 수 있어
빠른 반복 시간을 제공합니다. 매개변수를 조정하면 됩니다.
텍스처를 다시 내보내고 엔진에 다시 가져온 다음, 업데이트되는 것을 볼 필요가 없습니다.
숫자를 문자 그대로 변경하면 무엇이 변하는지 볼 수 있습니다. 어떻게 작동하는지 조금 보여드렸기를 바랍니다.

 

 

 

-So I hope I teased you a little with how it works.

And now I really invite you, if you haven't done it already, to download the project. It is free in the Marketplace.
And it comes with a tutorial. The tutorial is in three parts. The first part is an introduction.
It explains to you basically what I explained to you just now, how to get the project, and how to use it.

And then, second part is a huge documentation with all the material functions.
So it explains inputs and outputs of all of them. It shows you what it looks like. And it also gives you additional examples and explanations.

And the third part is just a list of interesting combinations, so ways
you can combine these material functions in ways that maybe you didn't even think about. And this is supposed to be some sort of living document
where we will add stuff as soon as we think about new stuff.

 

그러니 아직 하지 않았다면, 프로젝트를 다운로드해 보시기 바랍니다. 마켓플레이스에서 무료로 제공됩니다.
그리고 튜토리얼이 포함되어 있습니다. 튜토리얼은 세 부분으로 나뉩니다. 첫 번째 부분은 소개입니다.
기본적으로 방금 설명한 것처럼 프로젝트를 얻고 사용하는 방법을 설명합니다.

두 번째 부분은 모든 머티리얼 함수에 대한 방대한 문서입니다.
입력과 출력을 설명합니다. 그리고 그 모습도 보여줍니다. 추가 예제와 설명도 제공합니다.

세 번째 부분은 흥미로운 조합 목록입니다.
이것은 여러분이 생각하지 못한 방식으로 머티리얼 함수를 결합할 수 있는 방법입니다. 이것은 일종의 살아있는 문서로
새로운 생각이 떠오를 때마다 추가할 것입니다.

Getting Started with the Material Lab

So let's just open the Engine. And so, if you download the project, pretty much
this is what you should see.

You have your material lab folder. And you have a bunch of other folders.
First thing I really suggest you do is just press Play.

이제 엔진을 열어 봅시다. 프로젝트를 다운로드하면 대략
이와 같은 모습을 볼 수 있습니다. 머티리얼 랩 폴더와 다른 여러 폴더가 있습니다  

제가 정말로 권장하는 첫 번째 작업은 Play를 누르는 것입니다. 

If you press Play, you will have a bunch of cards.
We sorted them into categories. And I will not go through all of them.
I will not explain all of them. We have a documentation for that. And some of them, I mean, the examples are there for these.
I will probably just explain some concepts behind some of them.
So we have our transforms here.

Play를 누르면 여러 카드가 나옵니다.
우리는 이들을 카테고리로 분류했습니다. 모든 것을 다루지는 않을 것입니다.
모두 설명하지는 않을 것입니다. 이에 대한 문서가 있습니다. 그리고 일부는 예제가 있습니다.
몇 가지 개념을 설명하려고 합니다.
여기 변환이 있습니다. 

We have our gradients. And all these gradients, they actually work--
they can be plugged-- they can be remapped with this remappable gradient function. That works very much like Photoshop or Illustrator.
Whenever you added the gradient, you can just move the values around to make the gradient the way you like it.
And this is how this function works.

그리고 그라디언트가 있습니다. 이 모든 그라디언트는 실제로 작동합니다.
플러그할 수 있고, 리매핑할 수 있습니다. 포토샵이나 일러스트레이터처럼 작동합니다.
그라디언트를 추가할 때마다 값을 이동하여 원하는 방식으로 그라디언트를 만들 수 있습니다.
이 함수가 작동하는 방식입니다. 

 

And then we have time.
So I'm just going to show you something about time. 

.
그리고 시간이 있습니다.
시간에 대해 보여드리겠습니다.

 

 

I'm going to make a new material.
And I'm going to use the user interface domain. So I want to just animate something.
So let's draw a circle. I will use my SDF circle function with the field.
And this is what it looks like. Maybe smaller would be better.

새 머티리얼을 만들겠습니다.
사용자 인터페이스 도메인을 사용할 것입니다. 그래서 애니메이션을 하고 싶습니다.
원을 그려보겠습니다. 필드를 사용하여 SDF 원 함수를 사용하겠습니다.
이것이 그 모습입니다. 더 작게 만드는 것이 좋습니다.

 

 

 

And now I want to show you time. This is our material function, linear time.
As you can see, there's three outputs. So I just want to animate this circle from this corner to the top right corner.
So I use translate. 

그리고 이제 시간을 보여드리겠습니다. 이것이 우리의 머티리얼 함수, 선형 시간입니다.
보시다시피 세 가지 출력이 있습니다. 그래서 이 원을 이 코너에서 오른쪽 위 코너로 애니메이션화하고 싶습니다.
그래서 변환을 사용합니다.

 

By the way, another way of seeing all the material functions is you can just right-click or tab when you're in the Material Editor.
And you find the UI material subcategory. And you have all your functions here.
And as you can see, they all have a naming convention where they start with MF underscore UI underscore the name of the function.
And also, quick disclaimer. Some of these functions are referring to functions that we already have in Engine, like the rotate is the custom rotator that is already in the Engine. It hasn't been created in the UI material lab.
I just felt it made sense to include it because it's a tool that you can already use. But at least, now you have a method-- a method on how you would chain these things.
And it makes sense that we would include some of them.

참고로, 머티리얼 함수의 모든 기능을 보는 또 다른 방법은 머티리얼 편집기에서 오른쪽 클릭하거나 탭을 누르는 것입니다.
그리고 UI 머티리얼 하위 카테고리를 찾습니다. 여기 모든 기능이 있습니다.
모두 MF_ UI_ 함수 이름으로 시작하는 명명 규칙을 가지고 있습니다.
또한, 빠른 면책 조항입니다. 일부 기능은 이미 엔진에 있는 기능을 참조합니다. 회전은 이미 엔진에 있는 사용자 지정 회전기입니다. UI 머티리얼 랩에서 만든 것이 아닙니다.
이것을 포함하는 것이 의미가 있다고 느꼈습니다. 이미 사용할 수 있는 도구이기 때문입니다. 그러나 최소한 이제 이러한 것을 체인하는 방법에 대한 방법을 가지고 있습니다.
일부 기능을 포함하는 것이 합리적입니다.

 

 

 

And, basically, there are a bunch of easing functions out there. We included sine, cubic, and quintic.

But there are more that you can find and that we will probably add in the future. But the way it works is that you can easily combine linear time

with our ease curves. You just take your volume, my loop here.

So this is what the normal linear time looks like.

And let's make it slow at the beginning.

So this just changes the character of the animation.

And it has different types of curves. So ease in, ease out, and ease in out.

And we will also see later how this is not just for time. But you can use this also for other things,

like for gradients to change the hardness of the gradient.

And then, probably, my favorite effect, is the time displays. I say my favorite, because it is really simple in concept,

but so versaitile

 So the idea behind the time displace is

that you have an animation, some value that is animating. But you just want to give a delay to part of this animation.

So let's just look at this blue box that is animating from top to bottom.

We want to combine this with a delay mask. So we will use, in this case, it's a horizontal linear gradient.

And what the delay mask does is you set a value that you're animating. In this case, the vertical translation.

You set an offset, which, I don't know, could be zero, five. And then you put a mask.

And where the mask is black, so it is zero, there will be no delay. And where the mask is white, there will be the delay that you set,

and all the values in between. So if you apply this delay mask to this animation, what you get

is these slanted animation, because the more you go to the right, the more delayed the animation is.

Maybe more interesting it is with the step, the gradient in the second example, because then you can really see the different chunks animating at different delays.

And the mask can be anything, really. In this case, for example, we have a box that is rotating.

And we combine it with the time displays and the delay mask and the radial gradient.

So in the center, black, which means zero, which means no delay.

And the more outwards we go, the brighter the mask is, so the more delay we have.

Which means that these corners of the box will just be delayed compared to the rest. And we get these Shuriken galaxy spiral sort

of thing, 

 

 

of thing, which is also pretty much this example, this fifth example

that we have here. It's a bit embellished. And if we go on, we find the SDFs.

So SDFs are just the best thing in the world,

because you will see right now.

 

So SDF stands for signed distance field.

So when you have to draw a shape, you're used to using a texture. So you would have this texture with, I don't know,

a white triangle on a black background. But you could replace this texture entirely

with a primitive, so like circle, triangle, box, that is calculated with math.

 

And so, there are some differences, of course. Instead of having a mask, like a white on black, for example,

you would have a gradient as an output.

And this gradient, in this gradient, each pixel is expressed as the distance of this pixel to the closest point of the shape we want to draw.

 

I will explain better. So let's take, for example, this circle here.

So the circle I want to draw is a circle of size zero, five. It is this magenta circle here.

So what this SDF outputs is zero for each point that is on the circle,

because the distance of that point from the circle is zero. It is on the circle.

And the further we go from the circle, the higher the distance becomes, so the higher the value,

which means the brighter. And these are called signed, because when the point is inside

of the shape, it has a negative distance. So it has a sign.

 

 

Material Function and SDF Properties

And the material function already has the smooth step applied to it.
So it does output in the normal field and outline outputs.
It outputs your white shape on a black background.

But why is this relevant is because we're not using a texture. So as I mentioned before, the memory is happy.
But also, because of their nature, SDFs come with really some interesting properties.

그리고 머티리얼 함수에는 이미 스무스 스텝이 적용되어 있습니다.
그래서 일반 필드와 윤곽선 출력으로 출력됩니다.
검은 배경에 흰색 형태를 출력합니다.
이것이 중요한 이유는 텍스처를 사용하지 않기 때문입니다. 그래서 앞서 언급한 것처럼 메모리 사용에 있어서 이점이 있습니다.

또한, SDF의 특성상 매우 흥미로운 속성을 가지고 있습니다.

If you see this square at the bottom, the further we go from the shape we want to draw, the rounder the corners become.
So you can easily get rounded corners. You don't even have to worry about the shape getting bigger,
because we compensated that already in the material function. So you just have the same shape, but we round the corners.

아래의 사각형을 보면, 우리가 그리고자 하는 형태에서 멀어질수록 모서리가 둥글게 됩니다.
따라서 둥근 모서리를 쉽게 만들 수 있습니다. 형태가 커지는 것에 대해 걱정할 필요가 없습니다.
왜냐하면 머티리얼 함수에서 이미 이를 보상했기 때문입니다. 그래서 같은 형태를 유지하면서 모서리만 둥글게 만들 수 있습니다.
And since this is a gradient, you can use this to make a glow or a shadow,
anything that needs-- we can control the level of blurriness of the shape.

그리고 이것이 그라디언트이기 때문에 이를 사용하여 빛 효과나 그림자를 만들 수 있습니다.
형태의 흐림 정도를 조절할 수 있습니다.

 

 

 WaveEffect

And then there's another super cool thing, which is the wave effect. So let's look at this highlighted part in the magenta square.
And as we said, this is a gradient because it's a distance. And let's say it's a zero to one range, which probably it isn't.
It's probably from zero to zero, five. But for simplicity, let's say it's from zero to one.
We can do some math with this. We can multiply this by a number. Let's say four in this case.
So now we have a zero to four range. And we can apply more math to it. For example, if we do a Frac, what we're doing is
we're splitting this into four different chunks that go from zero to one. And imagine doing this for the entire container, so for every pixel.
What do you get in the end is these concentric frames that you can also animate, and they look very cool.
And if you don't want to use Frac, you can use many other operations to give the shape different looks.
o.

그리고 또 다른 멋진 것은 파동 효과입니다. 자, 이 자주색 사각형의 강조된 부분을 봅시다.
말씀드린 것처럼, 이것은 거리이기 때문에 그라디언트입니다. 이것이 0에서 1 범위라고 가정해봅시다. 아마도 그렇지 않겠지만,
0에서 0.5일 가능성이 큽니다. 하지만 간단하게 하기 위해 0에서 1이라고 가정합시다.
이것으로 약간의 수학을 할 수 있습니다. 이를 숫자로 곱할 수 있습니다. 이 경우 4로 곱한다고 가정해봅시다.
그래서 이제 0에서 4 범위를 가집니다. 그리고 더 많은 수학을 적용할 수 있습니다. 예를 들어, Frac을 적용하면,
이를 0에서 1로 가는 네 개의 다른 조각으로 나누는 것입니다. 그리고 전체 컨테이너에 대해, 즉 모든 픽셀에 대해 이 작업을 한다고 상상해보십시오.
결국 얻는 것은 이러한 동심원 프레임이며, 이는 애니메이션화할 수도 있고 매우 멋지게 보입니다.
Frac을 사용하고 싶지 않다면, 다양한 다른 연산을 사용하여 형태에 다른 외관을 줄 수 있습니다.

 

And if you want to see it in action, it is this function here. And we will also see it in action in the dem

이 기능을 실제로 보고 싶다면, 여기 이 함수입니다. 그리고 데모에서도 이를 볼 수 있을 것입니다.

 

Combining Shapes and Advanced Effects

So I mentioned the glow. I mentioned the shadow. Each SDF has the stroke output and can have rounded corners.
Also something cool, if you're already used to working with shapes in Illustrator or wherever, of course
you know that you can combine, intersect, and subtract shapes. And you can, of course, do this with SDFs as well,
but with an added perk, which is with some math magic you can have a smooth blending of these shapes.
As you can see in the second row here of the Boolean operations. And so, it gives you this liquid feeling.
And you can also control how much it smooths the blending.
So I don't know, if your next project is a lava lamp material, you can probably use this.

 

빛 효과를 언급했습니다. 그림자도 언급했습니다. 각 SDF는 스트로크 출력을 가지고 있으며 둥근 모서리를 가질 수 있습니다.
또한 멋진 점은, 일러스트레이터나 다른 도구에서 형태 작업에 익숙하다면,
형태를 결합, 교차, 빼기할 수 있다는 것입니다. SDF에서도 이를 할 수 있지만,
추가적인 장점으로 수학적 마법을 통해 이러한 형태의 부드러운 블렌딩을 할 수 있습니다.
여기 두 번째 행의 불리언 연산에서 볼 수 있습니다. 이렇게 하면 액체 느낌을 줄 수 있습니다.
그리고 블렌딩의 부드러움을 얼마나 조절할 수 있습니다.
그래서 다음 프로젝트가 용암 램프 머티리얼이라면, 이를 사용할 수 있을 것입니다.

And this is just an overview of the SDFs that we made. I mean, that we added to the material lab. So we have the box. We have triangle, circle, and hexagon.
And we will probably add more in the future. And you can really see how just by changing
the parameters that we have, we can have so many different versions of this.
And we can have many different usages for them. And how easy it is to animate from one to the other.
So you, say you have a button that has straight corners. And when it's selected you want it to turn into rounded corners.
That's very easily done by just changing one parameter. And in the last row, you can see how you
can do a union, a subtraction, an intersection, and how it changes when you make it smooth compared to when it's not smooth.
So I think that's really cool. But going on. Ah, one thing, actually, is, I did mention SDFs as a replacement
for textures. But, actually, you can also make distance field textures. You have to create them.
You have to make them yourself. And in the documentation, in the SDF section,
I also link an article that explains to you how to make them in Photoshop. There are also plugins that can do that.

이것은 우리가 만든 SDF의 개요입니다. 머티리얼 랩에 추가한 것입니다. 그래서 우리는 상자, 삼각형, 원, 육각형을 가지고 있습니다.
앞으로 더 많이 추가할 것입니다. 그리고 우리가 가진 매개변수를 변경함으로써
다양한 버전을 가질 수 있습니다.
이를 여러 용도로 사용할 수 있습니다. 그리고 하나에서 다른 것으로 애니메이션화하는 것이 얼마나 쉬운지 볼 수 있습니다.
예를 들어, 직선 모서리를 가진 버튼이 있습니다. 선택되면 둥근 모서리로 바꾸고 싶다면,
매개변수 하나만 변경하면 됩니다. 마지막 행에서는
결합, 빼기, 교차를 할 수 있으며, 부드러운 것과 부드럽지 않은 것을 비교할 때 어떻게 변하는지 볼 수 있습니다.
정말 멋지다고 생각합니다. 계속해서, 사실 SDF를 텍스처의 대체물로 언급했습니다.
하지만 실제로는 거리 필드 텍스처를 만들 수 있습니다. 직접 만들어야 합니다.
문서의 SDF 섹션에서 이를 만드는 방법을 설명하는 기사를 링크했습니다. 이를 수행할 수 있는 플러그인도 있습니다.

But, basically, in this case, it's not signed because it's a texture. So you can't have a negative value on a texture.
But they do share many of the same properties.

하지만 기본적으로 이 경우 텍스처이기 때문에 부호가 없습니다. 따라서 텍스처에 음수 값을 가질 수 없습니다.
그러나 많은 동일한 속성을 공유합니다.

 

 

So this is what the distance field texture might look like.
And like we do with the signed distance fields, you can use a smooth step and just control the glow min and glow max
to change the sharpness of the shape. And it can share the same properties like during an outline,
or having it-- making a glow, or a cool blending, or even morphing between them.
So it's not necessarily that you have to replace all the textures with distance fields. You can also have distance field textures. And they have the added bonus that you can make them smaller.
Because of the way you can sharpen them, you can actually get them a lot bigger than the texture actually is.
So that's very interesting.

 

이것이 거리 필드 텍스처의 모습일 수 있습니다.
그리고 서명된 거리 필드와 마찬가지로 스무스 스텝을 사용하여 글로우 최소값과 최대값을 조절하여
형태의 선명도를 변경할 수 있습니다. 그리고 윤곽선 동안 같은 속성을 공유할 수 있으며,
빛 효과를 만들거나 멋진 블렌딩을 하거나 심지어 이들 사이를 변형할 수도 있습니다.
모든 텍스처를 거리 필드로 대체할 필요는 없습니다. 거리 필드 텍스처도 가질 수 있습니다.

그리고 작게 만들 수 있는 추가 보너스가 있습니다.
이를 선명하게 할 수 있는 방법 덕분에 실제 텍스처보다 훨씬 크게 만들 수 있습니다. 이게 바로 흥미로운 점입니다.

 

 

 

 

 

Masks and Tiling

Then we have the mask section.
I mean, masks, I really just invite you to just try them out. They have so many different usages.
Read the segments is very useful in combination with the circle outline because you can get this segmented progress bar.
And checkers is very useful if you combine it, for example, with grid tiling, because then you can
alternate what you show on the different cells of a grid, which we can see here.
I don't know if it's very visible in the stream. But we're basically tiling in a grid hearts and diamonds.
And we're alternating when we're showing hearts and diamond. So in this case, we combine the grid tiling with the checkers
to determine what to show. And speaking of tiling, we also have hexagonal tiling, which
also outputs hexagonal pattern. And then we have also different types of patterns.
Half-tone is basically a grid tiling where in each cell there is a dot.
You could actually put anything in there. You could put squares. You can even put little OXO faces.
You could definitely do that. And it works with any input gradient.
So if you see third example, the one with the OXO picture, where the gradient is darker your dot is smaller.
And when the gradient is brighter, your dot is bigger. So it's a very easy way to stylize something with a half-tone look.

그런 다음 마스크 섹션이 있습니다.
마스크, 정말로 시도해 보시길 권장합니다. 사용 용도가 너무 많습니다.
세그먼트를 읽는 것은 원 윤곽선과 결합할 때 매우 유용합니다. 이렇게 하면 분할된 진행 표시줄을 얻을 수 있습니다.
체커는 그리드 타일링과 결합할 때 매우 유용합니다. 예를 들어, 그리드의 다른 셀에 무엇을 표시할지 번갈아 가며
결정할 수 있습니다. 여기에서 볼 수 있습니다.
스트림에서 매우 잘 보이는지 모르겠습니다. 하지만 기본적으로 그리드에서 하트와 다이아몬드를 타일링하고 있습니다.
하트와 다이아몬드를 번갈아 가며 표시하고 있습니다. 이 경우, 그리드 타일링과 체커를 결합하여
무엇을 표시할지 결정합니다. 타일링에 대해 이야기하자면, 육각형 타일링도 있습니다.
육각형 패턴을 출력합니다. 그리고 다양한 유형의 패턴도 있습니다.
하프톤은 기본적으로 각 셀에 점이 있는 그리드 타일링입니다.
사실 그 안에 무엇이든 넣을 수 있습니다. 사각형을 넣을 수도 있습니다. 작은 OXO 얼굴을 넣을 수도 있습니다.
확실히 할 수 있습니다. 그리고 이는 모든 입력 그라디언트와 함께 작동합니다.
세 번째 예제, OXO 사진이 있는 예제를 보면, 그라디언트가 어두운 곳에서는 점이 작습니다.
그라디언트가 밝은 곳에서는 점이 큽니다. 그래서 하프톤 룩으로 무언가를 스타일화하는 매우 쉬운 방법입니다.

 

 

And then we have a tab for distortions. Slant skew , wave warp is very cool because you can just

distort the UVs with a sine wave. And then we have polar coordinates.

So polar coordinates are interesting because we are used to expressing the position of a point

with Cartesian coordinates, so the point as to values. And these values are the distances from the two axes that we decide,

so the y-axis and the x-axis. But that's not the only coordinate system that we can have.

We can have radial coordinates. And what the polar coordinates function does

is ti translatees from one space, from the Cartesian to the polar

So what visually it looks like is it's like you were wrapping your polar coordinates, or sorry,

your square coordinates onto a globe, and just looking at them from the top.

Something really interesting about this is whenever you have a horizontal or a vertical translation,

they become something different in polar coordinates. And so, you can see, for example, the green line here,

vertical tessellation becomes an expansion around the pole.

And the red line, which is the horizontal translation, when it is in polar coordinates, it becomes a rotation around the pole.

So that's how we made super quickly this render. It's just a grid with two lines that are moving. And then you put it in polar coordinates,

it becomes some sort of radar. So that's also cool.

 

 

 

 

And then we have a tab that is utilities, which are functions

that, on their own, maybe they don't do a lot, but you probably will use them a lot in combination

with others, which my favorite is ping pong. So ping pong takes a gradient that goes from zero to one

and makes it go from zero to one and back to zero as many times as you want. So it's very useful for repeating gradients and for everything

that you want to repeat actually. And, finally, the applications tab, which is where we have all our widgets.

So if you, for example, if you're looking for a base widget, I don't know, you want to check out--

there's lots of examples. These are some inventory slots that can have an active state.

And they also have a hover state. And you can active. I don't know, maybe you want to, I don't know,

equip an ax and a shield or something.

And these are the objective markers that we saw in the example. Progress bars that use SDFs, small stat indicators that also

have these tiny bubbles that go up. I mean, there's lots of examples. And I invite you to just take a look and just see

if something inspires you. And I think we are done with the walkthrough.

And, yes, it is demo time. So now I would like to show you something.

 

 

원문링크: https://www.youtube.com/live/WaHlhkmVDoI?feature=shared