메테리얼 데이터 타입

• Constant(1 float)
  상수 하나로 이루어진 데이터 타입

• Constant2 Vector(2 float)
  실수 두개로 이루어진 데이터 타입. R과 G로 표기하며 보통 2차원 위치 정보를 저장하는 데 사용한다.

• Constant3 Vector(3 float)
  실수 세개로 이루어진 데이터 타입. R,G,B로 표기한다. 베이스 컬러에 주로 사용된다.

• Constant3 Vector(3 float)
  실수 sp개로 이루어진 데이터 타입. R,G,B,A로 표기한다. RGB 채널에 투명도인 A가 추가된다.

---

메테리얼의 데이터 타입은 무슨 소스를 연결하느냐에 따라 쓰임새가 달라진다. 만약 vector3에 베이스 컬러를 연결하면 각 채널은 R,G,B를 의미할 것이고, 위치 정보를 연결하면 X,Y,Z를 의미하는 데 사용된다.

메인 메테리얼 노드의 각 채널은 각각의 데이터 타입이 정해져 있다. 예를 들어 BaseColor은 3채널 벡터를, 메탈릭이나 러프니스는 1채널 스칼라 값을 받는다. 각 채널에 올바른 타입을 연결해 주는 것이 중요하다.

메인 메테리얼 노드의 각 채널에, 맞지 않는 데이터 타입을 연결해도 오류가 나지 않는다.
이는 엔진에서 자동으로 해당 문제를 적절히 처리하기 때문인데, 만약 3채널을 받는 BaseColor에 1채널 스칼라(1)을 연결한다면, (1,1,1) 3채널 벡터로 자동 변환하여 연결한다. 만약 2채널 벡터(1,1)을 연결한다면, (1,1,0)으로 변환해준다.
하지만 모든 상황을 다 처리해주지는 않으므로, 오류가 발생하면 직접 올바른 타입으로 고쳐주어야 한다.

러프니스

러프니스는 0과 1 사이의 1 float를 취하는 입력채널로, 표면이 얼마나 거친지(반사 되는 지) 결정한다.
0이면 거울처럼 반사되고, 1이면 완전 무광이다.

Roughness (러프니스) 입력은 말 그대로 머티리얼 표면의 거칠고 부드러운 정도를 제어합니다. 거친 재질에 반사된 빛은 부드러운 재질보다 여러 방향으로 퍼지므로, 리플렉션이 얼마나 희미하거나 선명한지, 아니면 스페큘러 하이라이트가 얼마나 퍼져있는지 모여있는지로 확인됩니다. 러프니스가 0 인(부드러운) 경우 거울 반사이며, 1 인(거친) 경우 완전히 무광 또는 난반사(diffuse) 입니다.
러프니스라는 프로퍼티는 흔히 오브젝트에 매핑시켜 표면에 대부분 물리적 베리에이션을 더합니다

Lerp

LinearInterpolate 표현식은 세 번째 입력값을 마스크로 사용해 두 입력값을 블렌딩합니다. 포토샵의 레이어 마스크처럼 두 텍스처 사이의 전환을 정의하는 마스크라고 생각하면 됩니다. 마스크의 강도 알파는 두 입력값에서 취할 색 비율을 결정합니다. 알파가 0.0이면 첫 번째 입력이 사용됩니다. 알파가 1.0이면 두 번째 입력이 사용됩니다. 알파가 0.0~1.0이면 출력은 두 입력의 블렌드가 됩니다. 블렌드는 채널별로 일어난다는 점을 명심하세요. 따라서 알파가 RGB 색이라면 알파의 빨간색 채널 값이 A와 B의 빨간색 채널 간의 블렌드를 알파의 녹색 채널과는 독립적으로 정의합니다. 알파의 녹색 채널은 A와 B의 녹색 채널 블렌딩을 정의합니다.

Lerp의 알파값에 이 텍스처를 넣으면 어떻게 될까?
이 텍스처는 노이즈 텍스처로, 각 픽셀마다 0~1 사이의 랜덤 값이 부여된 텍스처다.
랜덤성을 부여하고 싶을 때 주로 사용하며, R,G,B 모두 같은 값을 가지고 있다.

언리얼 엔진의 스타터 콘텐츠에 포함되어 있는 텍스처입니다.

노이즈 텍스처와 러프를 사용하여 러프니스를 얼룩덜룩하게 만들어 주었다. 위 노이즈 텍스처의 검은 부분은 값이 0이므로 반사가 잘 일어나고, 하얀 부분은 반사가 일어나지 않는다.
이 텍스처는 R,G,B 모두 같은 값을 가지고 있으므로, R채널을 연결하든 G,B채널을 연결하든 같은 결과물을 출력한다.

물론 베이스 컬러에도 사용 가능하다.

---

주의 깊게 살펴볼 점은, 블렌드는 채널별로 일어난다는 점이다.
알파 채널에 RGB 세 실수를 가진 Vector3를 연결하면, 알파의 R채널값은 A와 B의 R채널간의 블렌드를 정의하는 데 사용되며, 다른 채널도 마찬가지이다.

UV

UV 매핑이란 2D 이미지를 3D 모델의 표면에 투사하는 과정을 말한다.
3D 모델의 전개도를 만들어 평면에 펼치고, 해당 평면에 그리고자 하는 텍스처를 칠한 뒤, 다시 조립하여 3D 모델에 색과 모양을 입히게 된다.

UV의 채널에서 가로축은 U, 세로축은 V로 표기한다. 해당 좌표계의 원점은 왼쪽 위 꼭지점이다

(X,Y는 이미 3D공간을 정의하는데 사용되므로 U와 V를 사용한다고 한다.)

노이즈 텍스처에 TextureCoordinate 노드를 사용하여 UV 타일링을 조절해주었다.
값이 커지니 타일링 되는 횟수가 늘어 더 작고 촘촘하게 반복되도록 보이게 된다.

값이 1보다 작아지면, 왼쪽 위부터 그리게 되며, 나머지 부분은 잘리게 된다.
위 사진은 0.5(앞에 작은거)와 1(뒤에 큰거)로 UV값을 조절해본 것, 뒤와 앞의 패턴이 겹치는 부분에서 정확히 일치한다

https://docs.unrealengine.com/4.27/ko/RenderingAndGraphics/Materials/ExpressionReference/Coordinates/
TextureCoordinate 는 2채널 벡터값 형태로 UV 텍스처 좌표를 출력하여, 머티리얼에 다른 UV 채널을 사용하거나 타일링을 지정하거나 메시 UV 에 다른 작업을 하거나 할 수 있는 표현식입니다.

TextCoor자체는 파라미터로 뺄 수 없어, 다음과 같이 UV채널 값을 파라미터화한다.

ComponentMask

하지만 이 방법으로 하면 U와 V를 개별적으로 타일링할 수 없다. 이를 위해 ComponentMask라는 것을 사용한다.

ComponentMask 표현식을 사용하면 입력에서 (R, G, B, A 중 하나 이상의) 채널 부분 집합을 선택하여 출력으로 통과시킬 수 있습니다. 입력에 존재하지 않는 채널을 통과시키려고 시도할 경우, 입력이 단일한 상수값이 아닌 이상 오류가 발생합니다. 입력이 단일 상수값인 경우는 해당 값을 각 채널로 통과시킵니다. 현재 통과되도록 선택한 채널은 표현식의 타이틀 바에 표시됩니다

해당 노드는 입력값에 뭘 연결해 주느냐에 따라 출력값이 정해진다. ComponentMask에 3채널 벡터를 입력하고, R채널만 선택하면, 단일 R채널 스칼라 값이 출력으로 나오게 되며, R와 G를 선택하면 2채널 Vector2가 출력되게 된다.

다음과 같이 TexCoord 노드에서 나온 Vector2를 분리하고, 각각에 파라미터를 곱해준 뒤 Append로 다시 합쳐 UV채널에 연결해주었다.

Append는 두 데이터 타입을 합쳐 하나의 더 큰 데이터 타입을 리턴한다. 예를 들어 스칼라 두개를 합치면 2채널 벡터가 생성된다.

움직이는 화살표 만들기

움직이는 화살표 메테리얼을 만들어 보자. 그러기 위해 화살표 텍스처 하나를 준비했다.

해당 텍스처로 메테리얼을 만들어보면 다음과 같이 표시된다. 검은 부분을 투명으로 날리고 싶으니, 블렌드 모드를 반투명(Translucent)로 바꿔준다. 이제 메인 메테리얼 노드의 Opacity에 무엇을 연결해주느냐가 문제인데,

화살표 텍스처의 R,G,B를 확인해 보면 각 채널 모두 똑같이 검은 배경에 하얀 화살표임을 볼 수 있다.
검은건 0, 하얀건 1이고, 완전히 투명은 0, 완전히 보이는건 1이므로, 해당 값을 사용할 수 있다.

R,G,B 채널 중 아무거나 오파시티에 연결하면 다음과 같이 투명 부분만 남게 된다.

텍스처 움직이게 하기

텍스처를 움직이게 하고 싶다면 UV값을 조작하면 된다.

UV조작

텍스처를 움직여 화살표를 움직여야 하므로, UV를 조작해 보자.

화살표의 방향이 가로 방향이므로, U 값을 조작하면 될 것이다.

다음과 같이 구성하여 화살표를 움직이게 해주었다.
Time 노드라는 것을 사용하였는데, 시간의 흐름에 따라 계속 커지는 값을 리턴한다.

Time노드는 다음과 같은 파라미터가 존재한다.

https://docs.unrealengine.com/5.3/ko/constant-material-expressions-in-unreal-engine/?utm_source=editor&utm_medium=docs&utm_campaign=rich_tooltips#time
Time 노드는 Panner, Cosine 이나 다른 시간 의존 연산을 하는 머티리얼에 시간의 흐름을 더하는 데 사용됩니다.
Time 노드는 0에서 시작하여 지나간 시간에 따라 커지며, 일정 주기에 맞춰 0으로 초기화된다.
대부분의 경우 별 문제 없지만, 필요에 따라 클램핑하거나 조절하여 예상치 못한 문제를 방지하자.

즉 Time * Speed를 수행하여 계속 커지는 값을 U채널에 더해주어 텍스처가 움직이도록 만들어주었다.

패널

https://docs.unrealengine.com/4.27/ko/RenderingAndGraphics/Materials/HowTo/AnimatingUVCoords/

텍스처를 움직이게 하는 또다른 방법이다. 해당 노드는 두개의 float와 한개의 Vector2를 받아 Vector2를 리턴한다.

기존 버전의 복잡한 계산식을 사용할 필요 없이, 노드 하나로 같은 효과를 볼 수 있다.

TextCoor과 Time * Speed 등을 연결하여 UV타일링을 조절하거나, 속도를 조절해줄 수 있다.

불 메테리얼 만들기

다음과 같이 불 텍스처 두장을 곱해서 베이스 컬러로 사용하였다. 그리고 각각의 텍스처는 Panner로 서로 다른 방향으로 움직이게 하여 두개의 불 층이 서로 다른 방향으로 움직이는 효과를 줄 수 있었다.

Sin

이미시브 컬러가 깜빡깜빡 하면서 밝아졌다 어두워졌다를 구현하기 위해 Sin을 사용한다.
Sin은 입력값에 따라 -1~1 사이를 왕복하는데, 값에 음의 실수가 들어가면 좋지 않으므로, Saturate로 0와 1사이의 값으로 Clamp해주었다.

그래프를 보면 Sin값을 베이스 컬러에도 곱하여 사용하는데, 이때 sin값이 0이 되어 버리면 베이스 컬러가 모두 검은색이 되게 된다. 이를 방지하고자 Lerp를 사용하여, Sin값이 0이 되면 0.1을, 1이면 1을 출력하도록 하여 이를 방지하였다.

Sin_Remapped

이러한 일련의 과정을 한번에 제공하는 노드가 있는데, Sine_Remapped라고 한다.

메쉬 움직이기

WorldPositionOffset

흔들리는 나뭇잎 등, 오브젝트 자체를 움직이고 싶다면 WorldPositionOffset 입력값을 조작한다.
데이터를 이용하여 버텍스의 포지션을 변화시켜 바람, 나무, 풀 등을 움직이게 한다.
WorldPositionOffset은 X,Y,Z값을 사용하므로 Vector3값을 받는다.

0,0,100을 전달하여 Z축으로 100만큼 뜬 모습니다.

물에 뜨는 바위 만들기

월드 포지션 오프셋과 Time, Sin을 이용하여 위아래로 반복하여 움직이도록 하였다.

콜리전은 함께 움직이지 않는 점에 주의

랜덤성 추가하기

현재는 Sin파를 따라 움직이므로, 주기가 항상 일정하다. 여기에 약간의 무작위성을 추가해보자.

파랑과 초록, 주기가 다른 두 사인 그래프의 값을 더하여 빨간 그래프를 만들었다.
이렇게 하면 일정한 주기를 따라 반복되면서도 약간의 무작위성이 가미된 그래프를 만들 수 있다.

다음과 같이 구성하여 두 그래프를 합쳐 하나의 그래프를 만들었다. 그래프는 원하는만큼 추가해도 사용하여도 좋다.

디졸브

메테리얼을 만드려면, 메인 메테리얼 소켓 중 어떤 소켓을 사용할 지 확실히 정해야 한다. 디졸브 메테리얼을 만드려면, 일단 불투명도를 조절해야 함을 예상할 수 있다.

투명도를 사용해야 하므로 블렌드 모드를 Translucent로 바꾸고, 불에 타는것처럼 구멍나고, 찢어지는 것처럼 만들기 위해 펄린 노이즈 텍스처를 오파시티에 넣어주었다.(이 텍스처는 RGB 모두 같은값이라 아무 채널이나 연결해도 된다.)

노이즈 텍스처의 각 픽셀은 0~1사이의 랜덤한 값을 가지므로, 인접한 픽셀간의 작은 값 차이로 인해 블러처럼 보이는데, CheapContrast 노드를 사용하여 대비를 높여준다.
Contrast(S) 값에 스칼라를 연결해주면 대비 정도를 조절할 수 있다. 값이 커질수록 대비가 강해진다.

https://docs.unrealengine.com/4.27/ko/RenderingAndGraphics/Materials/Functions/Reference/ImageAdjustment/
CheapContrast
입력에서 히스토그램의 높은 쪽은 낮은 값으로, 낮은 쪽은 높은 값으로 리매핑하여 대비를 증폭시키는 함수입니다. 포토샵의 Levels adjustment 적용과 비슷하며, 흑백 플래그를 끌어들이는 것입니다. 대비 증폭 정도는 사용자가 조절할 수 있습니다.

---

이제 시간에 따라 녹아 내리는 것처럼 없어지는 효과를 만들자.
오파시티 값에 0을 전달하면 완전 투명, 1이면 완전 불투명이 된다. 우리가 오파시티에 전달한 펄린 노이즈는 0~1사이의 값이 모든 픽셀에 랜덤으로 부여된 텍스처이다. 즉 모든 픽셀이 0~1사이의 값이라는 뜻인데, 이 값들에 -1을 더하면 모든 픽셀의 값이 0이하가 되므로 모든 픽셀이 투명하게 될 것이다. 만약 1을 더하면 모든 픽셀의 값이 1 이상이 되므로 완전 불투명하게 될 것이다.

즉 시간이 지날수록 사라지도록 하고 싶다면 시간이 지날수록 점점 작아지는 값(-1에 수렴)하는 값을 더해주면 될 것이고, 보이게 하고싶다면 점점 커지는 값(~1)을 더해주면 될 것이다.

Sine_Remapped 노드를 사용하여 -1~1 사이의 값을 전달하도록 하여 디졸브를 구현하였다. 만약 0인 픽셀에 -1을 더하면 값이 음수가 되므로 Saturate 노드를 사용하여 값을 0~1 사이의 값으로 clamp해준다.(값이 음수가 되면 좋지 않다.)

가장자리 빛나게 하기