2024 언리얼 엔진을 활용한 애니메이션 실무기반 교육과정 3일차

<<언리얼 머티리얼 1주차>>

김범수 강사님

 

다양한 머티리얼을 만들게된다.

머티리얼을 가져와서 뜯어보고 원하는데로 고쳐볼 수있는 

PBR 머티리얼.이 개발이되며 현실 물리에 입각한 재질을 구현을 할 수 가 있게 되었다. 굉장히 빠르고재질들을 구현 할 수 있게되었다. 각 재질에 필요한 실제로 측정한 수치들이 존재한다. 실제랑 맞추려면 직접하는 것이 좋다. 

언리얼 머트리얼에는 2가지 테크트리가 있다.

1. 개체 묘사를 위한 머티리얼, 실제의 재현

2. 이펙트를 위한 머티리얼 

 

이번에는 1번의 개체 묘사를 위한 머티리얼 을 중점으로 하는 수업들이 있을 것이다. vfx는 맛만 보는 시간을 가질 것입니다.

6가지 가 있고 1. 머티리얼 에디터, 머티리얼 에디터, 머티리얼 인스턴스, 머티리얼 평션, 머티리얼 파라미터 콜렉션, HLSL로 이루어짐. 

l누르면 lerp라는 것이 뜨는데 a와 b 값을 알파를 기준으로 합친다라고 보면된다. 

t누르고 클릭하면 기본적으로 텍스처 샘플을 가져올 때 가능 하다. 빨간색 저 텍스처 파일 이 예시'

각자 채널에 들어있는게 다르다.

각 색상을 함치면

이런게 나오게 된다.

여기 부분 보면 이미지의 사이즈와 이미지의 파일의 크기등을 알 수 있다.

가져온 맵이 일반적인 컬러 맵이면 압축 세팅 (디프레싱 세팅)은 알아서 언리얼이 인식을 해주니 건드릴 일이 없을 것이다.

 

 

우리가 만든 것을 이렇게 큐브로 볼 수 있어요. 수학 그리고 디자인 툴에서 1과0 은 흰색과 검은 색을 의미합니다. 흰색이 1이고 검은색은 0이다. 그래서 분홍색이 0이고 노란색이 1값이라고 할 수 있다. 

알파값을 넣었더니 인식을 해서 러프의 B값은 1의 값이 들어가게된다. 

 

저 벽돌을 누르기 위해서는 콘텐츠 브라우저에서 의자를 누르고 눌러야지 볼 수 있게된다. 

R값은 gb랑 다르게 마스크 역할이 아니라 오쿨루전 효과를 하는 구나. 물체 경계 부분은 그림자를 좀 더 줌으로서 좀 더 입체적으로 보이게 만드는 것이 오쿨루전이다. 그런 속성을 말한다. 

베이킹을 해서 오쿨루전 텍스처로 쓰게 빛을 쏘지 않고도 텍스쳐 단계에서 입체적임을 넣을 수 있는 그런 식의 의미 이다. 

그래서 G 채널도 마스크의 역할을 하는

흑백 구성이다.

 

리니어 인터폴레이트 한번 더 넣어서 lerp 만들고 

a위에 b를 올린다 라고 생가하면 될 듯 그렇게 되면 기존에 쌓아놓은 것에 파란색을 올리려면 lerp에 a 값에 기존의 분홍과 노랑의 색을 연결을 하고 새로 만든 파란색을 b에다가 연결을 해줌으로 이제 파란색을 올리게 됩니다. 

 

이렇게 된다면 파란색을 

 

여기서 알파 값을 G로 넣은 이유는 해당 G값을 흰색은 1 검정은 0이기 때문에 A는 0이자 검정이고 B는 흰색이자 1이기 에 A는 바탕0 검정을 하기에 

 

 

0을 바탕으로 하는 A채널 값을 바탕으로 깔게된다. 이후 저 흰색 선에는 1이기 때문에 파란색을 얹게 된다.

 

 이제 그 M_chair을 가지고 인스턴스를 생성한다. 인스턴를 더블클릭해서 

 

이렇게 3가지를 활성화 시킨 다음에 해보면

 

베이스 컬러만 3가지 색상RgB 값에 따라 달라지지지만 러프니스 메탈릭 그런 것 들은 1과 0으로 조절이 가능하다. 

 

 

이렇게 metalic과 러프니스 를 한다.

 

 

모든 이미지들이 0과1 의 흑백으로 이루어져 잇다/. 파라미터,s 축약

 

이렇게 되는 이유는 그냥 R 값을 (흰색 이었음)_ 이걸 그냥 더해 버리니까 흰색이 되어버림/

 

 

이미시브 컬러에 벡터 3 연결해서 색상 지정해서 해야한다.  불빛 나게 하려면 x값 50 하면 된다. 

전등 색상(이미시브 컬러)와 전등 밑 판 윗 판 을 만들었다. 

파랑 보라 흰색 순인데 파랑은 윗 판 보라는 밑 판 흰색은 전등 색으로 나눠진다. 

 

1 누르고 크릭한건 콘스탄트 라고 한다,. 검색도 콘스탄라고 할수있음

2누르고 클릭한건 노드가 노란색이 되는데 이것은 벡터 (방향성)을 갖고 있다고 할 수 있다. 벡터는 평면 뿐만아니라

숫자 3개가 되면 입체로 돌아다닐 수 있게 된다. 공간을 가지게 된다.

4 벡터 포는 알파값을 집어 넣기 위해서 벡터 포를 쓰기도 하는 데 보통은 벡터 3를 씁니다. 

4번째 자리는 계륵 같은 느낌 이라고 합니다.  오른쪽 위에 화살표를 누르면 숫자에 해당하는 이미지를 볼 수 있습니다. 

 

이거는 r 값 일 뿐 R 에서는 이거는 흰색 임 1값 이니까.

흰색이라고 알고있으세요.

 

 

이렇게 각각 단축키를 통해서 불러올 수 있다. 

 

 

결과물을 뒤집어주는 1- 또는 one minus 무튼 반전 시키는 그리고 많이 쓰는 lerp (리니어 인터 폴 레이트) 선형보간 하는 것 더하는 것은 아니다. 

clamp는 제안 할 수 있다. 움직이는 값이 들어올 수 있다. 그 값을 0-과 1이라는 숫자로 그 안에 값에서 움직이더라도 그 안에 값에서 움직이게 제안을 해주는 것이다. 

제곱 하는 친구다. 값을 벙튀기 를 시켜주는 노드 노출 값 올린 것 처럼 값을 뛰게 해주는 친구다.

 

텍스쳐를 담는 통 빈 텍스쳐를 놓아도 언제든지 바꿀 수 있게 되어 있다. 텍스쳐 오브젝트

텍스쳐 샘플과 달리 in put 노드도 없고 output 노드만 있는데 이상하게 생겼는데 얘는 텍스쳐 샘플로 인식하지 못하는 작업들을 한다. 이 두개의 유형이 다르다. textur sample 이랑 texture object로 바꿀 수 있다. 

텍스쳐 위에 마우스 우클릭을하면 ㅋ(컴버트 투 텍스쳐 샘플, 텍스쳐 오브젝트 등 으로 바꿀 수 있다.)

 

버텍스 컬러 는 이 머터리얼이 적용되독 있는 오브젝트의 버텍스 컬러 데이터를 가져온다는 것이다. **빨간 색으로 되어 있는 데이터들은 많은 데 버텍스, 파티클 컬러 등이 있다. 

이펙트 할 때 굉장히 Vertex Color  가 많이 쓰인다. 

버텍스 컬러 

 

u 누르면 뜨는 텍스 콜디네이트는 이름 에도 알 수 있든 텍스쳐의 UV 값을 얘가 계산을 한다. 그러면 이제 이 사이에 들어오는 값들은 텍스쳐 UV의 값을 컨트롤 하겠다는 소리다. 

 

이렇게 쓰인다는 것이다. 

저 text coordinate 를 파라미터로 해서 밖으로 빼내면 이제 조절 가능하게 된다. 

 

Panner 이라는 애가 있는데 얘는 일정한 속도로 미는 애이다. 

 

막 이렇게 위로 움직이게 된다. 

 

슝슝슝슝 위로 움직이는 중

로테이터 rotator 친구는 이미지가 돌아간다. speed 나 그런 것들의 상세표에서 수정 할 수 있다. 

컴퐅넌트 마스크라는 친구를 검색을 하면 RGBA

이런 체크할 수 있는 곳이 뜬다. 뭘 추출 하고 잇는 지 보이게 된다.  이거는 특정 채널 만 쓰겠다라는 기능을 한다. 이것  왜 이런 걸로 따로 나눠서 하냐 텍스처를 따로 rgb에서 뽑아서 쓰면 되지 하지만 텍스처를 가지고 엄청 수식을 많이 햇는데 거기에 나오는 결과 핀에는 RgB 를 뽑아낼 수 없죠? 거기서 다시 뽑아내는 작업을 할 때 그때 Mask( )를 씁니다.

append vector 라는 친구가 있는 데 각 콘스탄트 값을 합쳐서 벡터를 만들어주는 기능이다. 텍스처 샘플을 보면 rgb 값이 각가 모여 있는데 각각 특정 숫자를 꼽게 되면 벡터 2가 된다. 그것들을 다시 또 붙이고 붙이면 벡터 4가 된다. 

 

대충 두개의 값을 살리면서 합쳐낸다라고 보면 된다. 그니 까 결국 

2 2              3 3       6 6 

2 2  곱하기  3 3 은  6 6 이라는 소리다. 행렬 더하기 행렬 더하기라고 생각하면 된다.

 

플

 

floor 정수로 만들기

ceil 도 정수로 만들기 (반올림해서)

frac 은 정수를 날리고 소수만 쓴다.

 

이렇게 해서 

--

오전 수업 끝

-

---

 

곱하기 해서 밝기 어둡게 만들고 싶다고 하면 멀티플라이를 써서 1 아래 숫자를 곱하면 어두워진다. 

소수가 곱해져서 어두워진다. 

1을 곱하면 하얗게 되는 이유. 텍스처를 가져오게 되면 이미지는 전부 이미지를 구성하고 있는 픽셀은 0과 1 사이의 구성이 되어 있다. 1 이상의 값이 더해지게 되면 흰색이 되어 버린다. 왜냐? 1 이상의 값이 되어 버리니까

 

 이렇게 곱하는 것과 밝아지는 것이 다르다. 한쪽은 더해서 밝게 빯갛게 된다. 옆은 0에 가까워지니 어두워진다. 

 

여기서 그냥 연결을 하게 되면 전부 값이 어떻게 되든 0과  0.25 사이에 들어가게 만들어라 하고 명령을 내린거다.

 

fresnel 는 반사되는 이미지의 각도를 말한다. 거울이나 매끈한 것에 반사되는 이미 말이다. 수면도 있겠다. 

이 Fresnel을 base 컬러에 연결을 하면 Exponenlin을 연결하면 원형의 경계가 달라진다. 늘리면 하얀색이 늘어나고 줄이면 줄어든다. 이걸 가지고 이펙트를 만들 수 있다. 가령 마우스를 가져다 대면 물체에서 하이라트가 나오는 것이 있죠. 이런 것을 주려해 같은 것(선택 되었습니다) 같은 효과를 줍니다.

이렇게 말입니다. 

이렇게 쓸 수도 있습니다.  

 

 

파워를 달면 멀티플라이랑 다릅니다. 

 

보시면다르죠

 

평균적인 값을 냈다면 파워는 각 픽셀이 갖고 있는 수치를 제곱을 해서 작은 소수 들과 큰 소수 들을 더욱 격차를 벌려요. 진한 것은 더 진해지고 밝은 것은 더 밝아지는결과가 생긴 겁니다. 

뭐 이렇게 도 만들 수도 있다,.

 

 

 

텍스쳐 코디네이트

 

 

텍스쳐를 4분의 1 크기로 확대가 된다. u와 v가 확대가 되기 때문이다. 특정수를 곱한다거나 더한다거나 하는 수식을 하면 따로 적용을 되는 것이 아닌 한꺼번에 적용이 된다. 

 

add를 더하면 비보셋을 변경한다.  벡터2를 입력을 해서 y값만 변화시키고 있다. 그래서 y값만 바뀌었다. 벡터인 데이터에 각각 접근을 하고 싶다면 벡터 2를 입력을 해줘야한다. 

 

x와 y를 따로따로 하고 싶다면 따로 연산을 해서 접근을 해줘야 한다. 

 

 

 

확대를 시키겠다.

 

 

uV의 위치별로 노이지가 흐르는 애니메이션이 나온다. 

 

0.5만큼 패널을 사용해서 y값으로 움직이고 그리고 그 값을 확대를 시켜주고 그리고 그 텍스쳐 코디네이트를 add로 연결한 값이 움직이는 노이즈 값이 uv의 위치에 영향을 주고 있는 겁니다. 지금. 

 

sine을 넣으면 깜빡이는 애니메이션을 볼 수 있다. time이라는 것은 앞으로 나아가는 시간이라는 갑이다. 

여기서 나오는 삼각함수 sine 인데요. 사인 그래프가 뭐냐면 파동과 같은 그래프예요. 1과 -1갑을 출렁이며 웨이브 치는 게 sine 웨이브 라고 합니다.  근데 흰색 표류 시간보다 검은 색 표류 시간이 깁니다. 왜 냐면 사인 그래프에서는 -1에서 1까지 가기 때문에 검정이 더 많다. 기이일어서 . 그래서 흰색이 보이는 시간보다 까만색이 보이는 시간이 2배이다. 검정색과 흰색이 같은 비율로 깜박였으면 좋을 때는

왜 이렇게 나오면 일단 0의 경우 0에서 1을 더하게 되고 거기다가 0.5를 곱하니까 반절이 된다. 

 

 

1과 0사이의 그래프가 형성이 되게 된다 

뭐 이런식으로 되니까 같은 깜빡임이 나온다. 

빨강 파랑 깜빡이기

 

여기서 이해가 가지 않았던 것이 있는데 먼저 Panner은 위로 올라가는 애니메이션이 맞다. 그리고 나서 이미지에다가  0.1을 곱해서 약간 채도를 낮추고 TextCoordinate 를 이용해서 uv 값을 건든다. 거기에 UV는 고정이라고 했으니까 위의 블럭은 고정이 된다. 

0.5만큼 왔다 갔다 한다. panner의 시간에다 연결을 하면 위 아래로 좌우로 왔다 갔다 하는 애니메 이션이 된다. 

텍스쳐 오브젝트로 만들어야 한다. 

1

이렇게 플립북이 만들어지게 된다.

 

수식으로 만들껀데 수학적으로 완전한 이미지가 필요할때 수식으로 이미지 만들기도 합니다.

왼쪽 위가 00 오른 쪽 위가 0.1 오른 쪽 아래가 1,0 왼쪼ㅓㄱ 아래는 무튼 그래서 ㅃ라간색과 y의 초록색이 합쳐지며 노란색이 된다. 합쳐진 값이 1,1이 된다. 중간에는 점점 퍼져나온다. 그라데이션이 여기서 y 값만 없앴습니다. g 값만 없앴다. Q빨간색의 0~1값 이것만 남게 되었다. 

power를 보면 밝은 곳 더 밝게 낮은 곳 더 낮게 여기서 4제곱 하면 더더 극단 적이게 된다.

 

네

여기를 보게되면 그라데이션은 왼쪽으로 다른 쪽은 그냥 밝은 빨강 이 괻나다. 

결과적으로 이렇게 됩니다. 반반 으로 됩니다. 

가로 같은 경우 해당 r 값 말고 G값을 선택해서 가로로 나눠지게 하는 것이 좋다. 

 

이렇게 하는 것이 왜 이렇게 되냐면 먼제 text coodinate 로 uv 값을 고정 시긴다. 그것을 가져오면 mask 를 통해서 R 채널 만 뽑아 왔더니 옆으로의 그라데이션이 만들어졌는데 그것을 더 강하게 제곱을 하면 더 극단적이게 변하게 되고 그리고 더더 극 단 적이게 두 개로 나눠지게 만들려면 floor 를 사용하여 내려버리면 (정수 로 만드는) 을 해버리면 반반이 된다. 

 

A에서 B를 빼는게 좋을 듯 싶은데 subtract는 a에서 b를 뺀다. 

 

 

 

A그래프에서 B그래프와 겨비는 부분을 뺏더니 저렇게 되는 것이다. 

 

수학적으로 완벽한 체커가 만들어졋다. 여기서 클램프가 있는 이유는 0과 1을 제안하는 노드 라고 했는데 clamp 없이 노드하면 아무것도 나오지 않는다. 왜 그러냐면 

왜 이렇게 되냐면 먼저 저기 있는 검정 네모 테두리는 검정 색이 아니기 대문이다. 

 

저기만 흰색인 것이다. 

제대로 영향을 받고 있는 것은 극단적으로 왼쪽 위와 오른 쪽 아래 밖에 없다는 것이다. 1이 1이 아니고 0이 0이 아니다. 

 

빨간 색은 1이 아니고 검정이라고 해서 0이 아니다 . 그래서 clamp를 통해서 흰색과 검정이 되어라 하고 정돈을 해준것이다. 

그래서 저렇게 하면 0과 1 값이 제대로 들어오게 되면 체스 판이 된다. 

 

앞으로는 이렇게 내리지 않고 상상만으로 할 줄 알아야한다. 

그라데이션 양쪽에서 집어 넣을 수도 있다. 곱하기로 그 한 쪽을 뒤집은 것을 곱한다면 양쪽에서 그라데이션이 오는 이미지를 만들 수있다. 

 

그라데이션을 곱하는 것과 더하는 것의 차이를 알 수 있고 ㄱ르 이외에 파워를 통하여 제곱을 할 수 있고 4를 곱하면 더 밝아지는 것을 볼 수 있다. 

이렇게 되는 것을 얻을 수 있다.

 

베이스 컬러에 넣으면 이렇게 된다.

 

숙제 : 드라이브에 테이블이라는 것을 올려두었음 노말과 그런 걸로 우리 배운 색을 다 써먹을 보세요.

'체크무늬가 있는 색 깜빡이는 색, 움직이는 색, 3가지를 적용을 해서 내라.

각각 깜빡 , 움직, 체크 이 3가지 색이 들어간 것 그런 재질이 한꺼번에 있는 테이블을 만들어 주세요. 

 

 

숙제를 위해 체크판 무늬를 한번 보자면, 먼저 text Coordinate로 마스크를 연결한다. 

 

 

uv채널을 xy로 두자면  RGBA도 그와 같다. 그래서 U 가로 채널은 R이 선택되게 되고 v 채널은 G가 선택되게 된다. RGBA 를 그렇게 R과 G를 선택하면 그라데이션이 가로와 세로로 나오게 된다. 

 

이렇게 되는데 여기서 중요한 것은 Floor을 통해서 정수값으로 만들어버리니까 극단적으로 두개로 나눠지는데 여기서 각각의 그래프를 빼도록 하면 저렇게 내모가 남는다. 

Multiply를 곱해서 텍스쳐 샘플을 확대한다. 

Texture sample에다가 0.1을 곱했는 이유가 더 채도를 낮게 하기위해서다. TextCoordinate 에 앞의 것을 더하는 이유는 add 해당 uv 값에 

뒤에 올 텍스쳐 타일에다가 앞의 텍스처를 움직이게 만들기 위해 text coordinate를 넣는다.

 

 깜빡이는 등 만들기는 하기 위해선 일단 Time 과 Sine 싸인을 사용해야 한다. 일단 여기 까지만 이어 놓아도 검정색 흰색의 파동을 일으키며 싸인 그래프가 깜빡인다 . 여기에 검정색이 더 깜빡이는 기간 중 시간이 길다 것을 깨달아서  이를 위한 해결책으로 ADD와 multiply 를 연결한다. 여기에 -1부터 1까지의 그래프를 0부터 1로 깜박이게 하려면 add 1을 더하여야한다. 그래서 0부터 2가 되고 이를 2분의 1 즉 0.5로 나누어야 0부터 1이 된다. 그렇게 깜박이는 시간이 비슷해진다. 그리고 추가적으로 빨강 파랑 같이 색상이 들어가고 싶다면 알파 값에 아까 검정 흰색 번갈아 나오는 값을 넣어야 한다. 

그리고 각각 A , B에 넣으면 색상이 나온다. 

 

플립북 만들기 가 재미있었는데 플립북 같은 경우 텍스쳐 오브젝트를 플리북이라는 애의 설명에 맞게 연결을 해야하고 숫자도 넣어야지 result 값이 제대로 나온다.