실감
실감 공통편 지형효과 제작
안녕하세요 박현상 입니다
이번 Shader VFX 강의에서는
언리얼 머티리얼 에디터를 다루게 됩니다
Shader와 VFX의 영역은 서로 떨어질 수 없는
시각 효과를 위해서는 필수 요소라고 할 수 있습니다
이번에 다루게 되는 수업 예제들은
의도적으로 앞서 Unreal VFX 과정에서 했던
내용과 반복 학습이 되도록
연속되는 형태로 학습을
효율적으로 이어나갈 수 있게 설계되었습니다
보시는 분들에 따라서는 중복되는 느낌을 받으실 수 있겠지만
동일한 데이터를 각기 다른 효과로 사용되는 방법에 집중하시길 바랍니다
첫 번째 강의는
메마른 땅에서 물이 차오르는 바닥을 묘사해 볼 겁니다
우리가 젖어있다라는 표현을
시각적인 표현에 대해서
쉐이더 프로그래밍에서 어떻게 표현할 수 있는지를 알아볼 것이구요
또한 메마른 땅에서 젖어있는 땅으로
자연스럽게 밑에서부터 물이 차오르는 느낌을 표현하기 위해서
어떠한 데이터들이 사용되고 응용될 수 있는지에 대해서도
실습해 보겠습니다
WetFloor 머티리얼 생성
이번 강의를 시작하기에 앞서서
어떠한 조건에서 프로젝트를 진행하는 지부터 설명을 하겠습니다
우선은 언리얼버전은 5.4.4구요
여기에서 프로젝트를 생성을 할 겁니다
우선 에디터를 먼저 실행을 하고요
이번 시간에는 머티리얼뿐만 아니라
단순히 쉐이더를 작성한다
내지는 이펙트를 만든다 뿐만 아니라
쉐이더나 이펙트와 연계되서 어떻게 사용하는지
이런 것들에 대한 내용들도 포함되어 있기 때문에
기본적으로는 이 프로젝트의 GAMES 템플릿에서
Third Person을 선택하고요
BLUEPRINT의 Desktop,Maximum,Starter Content가 포함된 상태로
SHADERnVFX라고 쉐이더를 대문자로 쓸게요
SHADER와 VFX에 관한 프로젝트를 생성하겠습니다
Create 버튼을 눌러줍니다
프로젝트 생성이 완료가 되었습니다
그럼 여기에서 첫번째 Content 폴더에다가
폴더를 하나 만들어서
WetFlow라고 예제의 이름을 지어 주겠습니다
우선은 머티리얼을 먼저 생성하신 후에
M_WetFloor 젖어있는 바닥이란 뜻이죠
머티리얼을 열도록 하겠습니다
여기에서 우리가 할 것은
기본적으로 타일 맵을 응용하는 것과 함께
컬러를 믹싱한다는 여러가지 개념들에 대해서 알아볼 건데요
이것을 위해서 먼저 Texture Sample 노드를 생성하신 후에
Cobblestone 텍스처를 우선 diffuse
기본 색상만 가져오도록 하겠습니다
이것을 베이스 컬러에다가 연결을 해볼건데요
이렇게 평면적으로 봤을 때
이미지가 가지고 있는 것을 그대로 우리가 볼 수가 있죠
여기에서 우리가 흔히 쉐이더에서 가장 많이 사용하는
Multiply적용해 볼 겁니다
우리가 흔히 젖어있다
물에 젖어있다고 하면
이런 식으로 단순하게 색이 조금 진해진다는 인상을 받죠
일반적으로 우리가 현실에서 보이는
오브젝트들이 물에 젖었다고 하면
보통 색이 진해집니다
그 색이 진해지는 이유가
우리가 이런 돌의 표면을 간단하게 단면으로 그려 보겠습니다
바닥면이 있고
여기에 돌들이 이런 식으로 이렇게 박혀 있는 형상으로
이렇게 되어 있죠
그리고 이 돌들의 표면을 보면
굉장히 오돌도돌한 표면을 가진걸 볼 수가 있습니다
그리고 이러한 오돌도돌한 표면은 빛이 부딪혔을 때
표면에 부딪혔을 때 사방으로 분산이 되죠
흔히 난반사가 일어난다고 얘기를 합니다
이러한 난반사를 지칭하는 용어가 디퓨즈죠
우리는 그 디퓨즈의 D를 따서
여기 있는 Cobblestone_D 텍스처를 사용한 것이죠
이름을 짓는 데 많이 사용을 합니다
근데 여기에 파란색으로 그리도록 하겠습니다
물이 젖게 되면
여기 얇은 물의 층 같은 게 생기면서
난반사를 상대적으로 적게 합니다
대부분은 그대로 흡수시키거나 추가시키는 거죠
그러다 보니 평소보다 반사되는 빛의 양이 줄어들다 보니까
훨씬 어둡게 느끼는 겁니다
원래대로면 이렇게 난반사된 빛들이 우리 눈에 들어와야
우리가 색을 인지하는데
들어오는 빛의 양이 적어지게 되면
문자 그대로 빛이 줄어드니까 어두워지는 거죠
이러한 원리에서 Multiply를 해주게 되면
상대적으로 젖은 것 같다는 느낌의 텍스처를 볼 수가 있습니다
Multiply를 해준다는 것을 조금만 풀어서 생각을 해보면
우선은 임의의 값으로 Red, Green, Blue 채널에서
각각의 값이 0.5, 0.2, 0.1 만큼 있다고 하겠습니다
이것을 그대로 0.5, 0.2, 0.1로
각각을 곱해 주게 되면 어떻게 될까요
Red 채널의 결과는 0.25가 될 것이고
Green 채널은 0.04
그리고 Blue 채널은 0.01이 되면서 값이 줄어들게 되는데요
이것을 이렇게 해석할 수도 있을 겁니다
Red 채널의 값이
원래 오리지널 값이
이게 A의 값이라고 하고 B라고 할게요
여기 A, B로 연결해 놨으니까
그러면 A의 값이 0.5
즉 50%다
A, Green 채널의 값이 얼마가 됐든 동일한 것만큼 줄어드니까
현재 이 계산상으로는 20%겠죠
그리고 Blue 채널은 10%만 될 겁니다
결과적으로 값이 줄어드는 폭이 낮으면 낮을수록
훨씬 더 많이 줄어드는 효과가 나오게 됩니다
원래대로면 Red, Green, Blue가 1, 1일 때가 White죠
점점 어떻게 돼요
0에 가까워지고 있죠
0에 가까워진다는 얘기는 Black에 가까워지고 있다는 얘기입니다
그런데 Red 채널은 조금 줄어들고
Blue 채널은 많이 줄어들다 보니 어떤 일이 생기냐면
이런 식으로 붉은색 돌들이 훨씬 더 진하게 느껴지게 됩니다
색은 훨씬 채도가 올라간 것처럼 느껴지죠
같은 맥락으로 만약에 Blue 채널의 값이
Red, Green, Blue 중에 Blue 채널의 값이 가장 컸다면
Blue 채널의 값이 훨씬 더 진해졌다는 느낌을 받으실 겁니다
이게 우리가 흔히 사용하는 Multiply의 효과입니다
그래서 때로는 흑백에 사용할 땐 또 다른 의미로 사용될 수 있지만
컬러 값에 동일한 값을 Multiply를 해주게 되면
제곱한 거랑 똑같죠
그렇게 되면 색이 어둡고
컬러가 상대적으로 진하다는 느낌을 받으면서
마치 젖어있다는 인상을 받게 되는 겁니다
이번에는 오리지널의
쉽게 얘기해서 메마른 땅이라고 하겠습니다
그래서 메마른 땅은 A라고 해서 Dry라고 적어 놓고요
젖어있는 땅은 B라고 해서 Wet이라고 표시해 놓겠습니다
여러분들도 헷갈리지 않으시겠죠
이 두 가지가 공존하는 질감을 만들어 볼 겁니다
우리는 부분적으로는 A도 보여줬다가
젖어있는 B도 보여주는
이 두 가지를 공존하는 걸 할 건데요
우리가 이럴 때 많이 사용하는 게
Linear Interpolate라고 하는
흔히 줄여서 Lerp라고 많이 얘기를 하는 노드입니다
여기에 A는 그대로 Dry
B에는 젖어있는 Wet 이걸 넣어주고
그대로 만약에 베이스 컬러에 넣는다면
뭔가 크게 바뀌는 게 없죠
여기에서 여러분들이 조금 더 이해가기 쉽게
텍스처 하나를 더 불러오도록 하겠습니다
우선 Texture Sample이라고 하나를 불러오고
여기에서 Noise Texture를 하나 불러오겠습니다
Noise_01이라고 이렇게 있네요
이런 노이즈 텍스쳐가 있는데
여기에서 이 Red, Green, Blue 어떤 걸 써도 흑백의 이미지니까
Red, Green, Blue 값이 모두 다 동일해서
가장 가까이 있는 Red 값을 우선 가지고 와 보겠습니다
이렇게 보면 뭔가가 얼룩덜룩해 보이는데
느낌이 잘 안 오죠
그래서 노이즈 이미지의 Step 이라는 노드를 이용해서
Red 값을 X 에다가 연결하고
Y에 연결되어 있는 걸 Alt 를 눌러서
Y 값을 연결된 걸 뺀 후에
값은 0.5 로 입력하겠습니다
그러면 0에서 1 까지 Black & White 에서
지금 보시는 것처럼 중간에 그레이 톤을 0.5 보다 작으면 블랙으로
0.5 보다 크다면 화이트로 해가지고
이렇게 Black & White
2분할된 이미지로 만들게 됩니다
이것을 연결해 보면 이렇게 얼룩이 남아 있죠
여기서 여러분들이 블랙의 성분을 더 많이 표현하고 싶다면
0.3 정도로 값을 낮춰 주시면
이런 식으로 30% 이하의 그레인은 블랙으로
그 이상 되는 것은 화이트로 되게끔 하면
면적이 조금 늘어나죠
여기서 0.25 이런 식으로 하면
블랙의 영역이 점점 늘어나는 걸 확인하실 수가 있습니다
여러분들이 노이즈를 바꿔 보셔도 됩니다
이러한 노이즈는 여러분들이 나중에
펄린 마스크라던가 펄린 노이즈 이런 걸 통해서
임의로 바꿔 보셔도 되고
다만 바꾸실 때는 Step 값의 범위를 조절하실 필요가 있겠죠
이런 식으로 바꾸시면 됩니다
이렇게 Lerp를 이용해서 색상을 혼합해 봤는데요
가장 단순하게 Lerp가 하는 일은
이 알파에 따라서 블랙에는 A를
화이트에는 B를 보충해서 표현하는 겁니다
그래서 전체 색을 표현할 수 있는
이 컬러를 담을 수 있는
만약에 컵이 있다고 가정해 보면
여기에다가 먼저 A를
이렇게 A만큼을 쌓고
이만큼이 비어 있죠
비어 있는 이 영역에다가는 알아서 B를 보충하는 겁니다
그래서 우리는 이것을 선형 보관이라고 얘기를 합니다
0부터 1까지의 수치에 따라서
그래서 이 알파 값을 잠시 연결을 빼고
0.3으로 입력을 하면
그리고 0으로 입력하면 A에 가까운 숫자가 나오죠
그리고 이걸 1로 입력하면 B의 이미지가 나옵니다
당연히 0.7과 같이 B에 가까운 숫자라면
조금 더 B의 성분을 많이 섞겠죠
그렇기 때문에 여러분들이 이 알파에 대한 값을 생각하실 때는
B의 비율이라고 생각하셔도 크게 다르진 않습니다
전체 중에 B가 몇 퍼센트 포함되어 있느냐
그래서 0.7은 70%죠
이것을 이미지화 시키면
1은 화이트고 0은 블랙이니까
그것을 단순히 단일 숫자값이 아닌
이렇게 이미지화 시켜서 집어 넣게 되면
이렇게 이미지의 블랙 영역, 화이트 영역에 따라서
서로 다른 이미지를 보여주게 되는 겁니다
그대로 Step의 값을 Alpha에 연결해 주도록 하겠습니다
비슷한 맥락으로 이 Lerp를 그대로 Ctrl-C, Ctrl-V 해서
알파 값은 유지한 상태로
만약에 돌이 메마른 상태라면
Roughness 값이 1이겠죠
1, 매우 거친 상태
이것은 구체로, 미리 보기 부분을 바꿔서
빛의 쉐이딩을 보면서 설명드리겠습니다
Roughness 값이 1이라는 얘기는
상대적으로 빛을 많이 반사하지 않는
굉장히 거친 질감이라는 얘기고
Roughness값이 0이라는 얘기는
아주 매끈매끈해서 주변을 반사시켜서 보일 수 있을 만큼
매끈매끈한 재질이라는 뜻인데
그래서 여기서 여러분들이 헷갈릴 수 있는데
Roughness값 A는 메말라 있기 때문에 굉장히 드라이한
한마디로 Roughness값이 1에 가까울 거고요
반대로 젖어있는 땅이라면 Roughness값이 0인
굉장히 매끈매끈한 상태일 겁니다
이것을 그대로 기존의 알파를 그대로 사용해서
Roughness에 연결을 해주면
지금 보시는 것처럼 젖어있어서 색이 어두운 부분에만
반사도가 굉장히 높아지면서
이런 식으로 주변 환경을
어두운 영역만 반사시키는 걸 확인하실 수가 있죠
물이 차오르는 연출을 위한 효과
이번에는 Cobble Texture가 가지고 있는 노멀맵을 가지고 오겠습니다
Texture Samlpe 노드를 하나 만들어 주고요
이 Texture Samlpe 노드에는 Cobble
그리고 여기 있는 노멀맵을 가지고 올 겁니다
기본 값만 연결한다면
RGB를 Normal에 연결한다면 마치 입체감이 있는 것처럼
이렇게 표현이 되겠죠
지금 보시는 것처럼 멀리서 이렇게 보고
만약에 L킬이랑 마우스 왼쪽 클릭을 같이 해서
빛의 방향을 여러분들이 이렇게 바꿔보시면
지금 보는 것처럼 돌이 마치 입체적으로 이루어진 것처럼 보이겠죠
여기서 여러분들에게 조금 재밌는 설정을 하나 부여를 해 보겠습니다
우선 물이 아래에서부터 위로
서서히 차오른다고 한 번 생각을 해 보겠습니다
앞서서 돌의 단면을 다시 한 번 그려보면
이렇게 평평한 바닥에 자갈들이 깔려 있다고 가정을 하고요
그리고 여기에 물이 서서히 낮은 곳에서부터
이 위에까지 차올랐다고 가정을 해보겠습니다
낮았을 때, 중간 단계, 높았을 때 이런 식으로
그러면은 물론 물의 속성을 조금 더 정밀하게 표현하려면
여러 가지 복잡한 계산이 따르겠지만
단순히 빛이 반사되거나 투과되는 정도를 따져봤을 때
물은 상대적으로 반사를 잘 시키는 재질 중에 하나죠
물론 각도에 따라 좀 달라지긴 합니다만
이런 식으로 빛이 오면
물은 기본적으로 정반사 시킨다고 하죠
들어온 방향 그대로 반사를 시키죠
그래서 원래 있던 표면보다는 조금 더 높은 위치에서 반사를 시키게 될 겁니다
마찬가지 맥락으로 물이 조금 더 차올랐다면
마치 표면이 여기 있는 주황색 위치가 표면으로 인식이 될 거고요
물이 더 차올랐다면
당연히 더 차오른 만큼 이렇게
그리고 어느 순간부터는 물이
돌 위에까지 가득 차서 평평한 상태가 될 겁니다
그래서 어느 순간부터는 더 이상 빛이 돌에 부딪치지 않고
물 표면 위에서 그냥 바로 반사가 일어나서
이런 식으로 입체감이 거의 안 느껴지다시피 하게끔
노멀 맵이 이런 식으로 서로 다르게 작동하게 될건데요
이런 효과를 만들기 위해서는
우리가 단순히 노멀 맵을 한 장만 쓰는 게 아니고
노멀의 효과를 좀 더 믹싱을 해 줘야 됩니다
섞어 줘야 되는 거죠
위에 이렇게 섞어 줬던 것처럼
그래서 우선 평평한 노멀을 만들어 보겠습니다
평평한 노멀부터 만들어 보겠습니다
일반적으로 노멀 맵이라고 하는 건
면의 기울기 정보만 나타낸 것이기 때문에 높낮이 값은 없습니다
기울기 값만 있기 때문에
그래서 Constant3Vector를 이용해서
블루 채널의 1이라는 값을 입력해 주겠습니다
실제로 Vector3의 값이 x, y, 0이고
z만 1인 것은 실제 노멀 값의 가장 기본 값입니다
이런 식으로 노멀의 가장 기본 값
그래서 우리가 이 표면이 있다고 하면
주황색의 표면이 있다라고 하면
완전히 평평한 상태의 노멀 값은
블루가 1인 상황입니다
이 Vector의 길이는 기본적으로 단위 유닛을 사용하는
1 유닛짜리 Vector겠죠
여기에서 만약에 면이 어느 방향으로든 기울어졌다면
블루의 성분은 살짝 줄어들고
x, y의 성분이 늘어나면서
기울어진 정도의 Vector의 길이가 늘어나면서
이런 식으로 기울어졌다는
면에는 여전히 수직이겠죠
이러한 Vector의 크기가 나오게 될 겁니다
당연히 길이는 1이고요
노멀 맵이라고 하는 건 기본적으로
블루가 1인 상태에서 블루 값을 낮추면서
레드든 그린이든
레드에는 좌우의 기울기
그린에는 위, 아래의 기울기를 묘사를 해서
마치 입체적인 것처럼 나타내죠
그래서 결과적으로는 기울어진 면이라고 하는 것은
상대적으로 왼쪽처럼 조금 더 알록달록한 형태를 띄게 될 거고요
평평하다는 것은 단일의 블루 값을 가진 이미지를 보여주게 될 겁니다
이제는 원래 Cobblestone이 갖고 있는
노멀 맵을 Dry한 상태로
그리고 우리가 임의로 만들어 준 파란색 Vector를 B에
젖어있는 상태로 정하고요
이 두 가지를 믹싱을 해 보겠습니다
노멀 맵을 믹싱할 때는 여러분들이 하나 주의하셔야 될 게
숫자가 아닌 기울기로 생각하시는 게 조금 더 이해하시기가 편합니다
무슨 얘기냐면
기본적으로 이 안에 담겨 있는 데이터들은
원래 수직으로 뻗어 올라간 것들은
기울어져서 뽑아 올라간 것들은
결국에는 기울기를 나타내고 있는데요
그래서 3D 폴리곤으로 이 기울기를 표현하려고 하면
원래는 굉장히 많은 수의 Vertex들을 이용해 가지고
점점점 이렇게 찍어 가지고 연결해서 표면을 묘사해 줘야겠죠
하지만 우리가 현재 사용하고 있는 기본 메시들은
평면 메시를 기준으로 볼게요
기본 메시들은 굉장히 평평한 상태의 메시입니다
그래서 각각의 기울어진 정보들을 전부 다 이런 식으로
픽셀에다가 Vector 값을 저장을 해가지고
이런 식으로 이미지화 시켜서 만든 게 노멀 맵이거든요
그래서 현재 우리는 텍스처를 이용한 RGB 데이터를 이용하고 있지만
현재 좌표 값으로 쓰이고 있다
좌표는 X, Y, Z로 이루어진 좌표 값으로 쓰이고 있다고
이해하고 계시면 됩니다
일반적인 노멀 맵에서의 믹싱은 좌표값 중에
Red채널 좌우의 기울기
Green채널 위아래의 기울기
평면을 기준으로 했을 때
이런 기울기 값에 대한 정보를 가지고 있고
Blue채널은 통상적으로 쓰이지는 않습니다
실제 노멀 맵을 Shader 단에서 계산할 때 쓰이지는 않지만
현재 저장되어 있는 건 Vector 데이터를 기준으로 하기 때문에
이 Vector의 길이를 1로 만들기 위해서
Red그림만 가지고는 안 돼서
블루에는 일반적으로 나머지 길이를 1로 만들기 위한
나머지 Vector 값이 블루 채널에 들어가 있게 되는데요
우리가 표현하고자 하는 대상은
물이 서서히 높게 차오르기는 하지만
실제 높이가 변하는 건 아닙니다
평면 상에서 이렇게 기울기 값이 있던 것을
물이 차올랐을 때의 Vector 값처럼
이렇게 기울어져 있는 것을
서서히 면에 수직이 되게끔 세우는 방향 쪽으로 흘러가게 될 겁니다
그러다 보니 현재 우리에게 필요한 값은
기울어진 값들에 대해서 Red Green 채널이 되겠죠
기울어진 값들에 대한 정보만 담고 있는건
이 정보에 대한 것만 믹싱을 해서 표현을 하는 것이 일반적입니다
그래서 Red,Green,Blue에서 Red Green 값만 가지고 올 수 있게
Component Mask라고 검색을 해보시면
Component Mask가 나오고
기본적으로 Red,Green 값만 뽑아올 수 있게끔 활성화 되어 있죠
실제로 리얼타임 쉐이딩에서
굉장히 많이 Red,Green값만 갖고 오는 경우들이 있어서
이게 기본 값으로 설정이 되어 있는 겁니다
이것을 두 가지 벡터 모두에게
Red,Green값만 가지고 올 수 있게끔 해주고요
이것을 가장 단순하게 섞는 방법 중에는
Multiply가 있습니다
곱해 주는 거죠
하지만 지금 우리가 갖고 있는 Vector 같은 경우에는 0.0.0 이기 때문에
사실상 곱해 주는 것은 의미는 없습니다
만약에 이걸 여러분들이 곱한다고 하면
여기 있는 기본 노멀에다가
자잘자잘한 이런 질감 같은 것들을 섞어 주기 위해서
0.0.0 벡터 대신에 이것을 약간 옆으로 치우겠습니다
이것의 효과를 실제로 언리얼에서 어떻게 믹싱이 되는지
결과를 보여드리기 위한 거니까
Multiply를 하고요
나중에 Append Vector를 해 가지고
현재 Red,Green 성분만 있으니까
이것은 Vector2겠죠
Multiply된 결과도 Vector2입니다
그런데 우리가 노멀 맵에는
X, Y, Z로 된 Vector3가 필요하기 때문에
여기에서 Blue값을
오리지널 데이터를 가지고 오게 되는 겁니다
그래서 Blue값을 가지고 오고
여기에 Multiply 되거나
혹은 Add 되거나 했을 때
이건 섞어 주는 방식들이 여러 가지 공식들이 있습니다
Add 가 되건, Multiply가 되건
이 두 개의 값이 섞이게 되는 거고
거기에 Bue성분을 섞게 되면
길이가 1보다 줄어들거나 커지거나 할 수가 있기 때문에
여기에서 노멀라이즈를 해 가지고
길이를 1로 정리를 해주는 과정을 거쳐야 됩니다
이렇게 정리가 된 Vector를 노멀에 끼워 넣으면
이런 식으로 기본 질감 위에 더 디테일한
자글자글한
돌의 아래쪽에 집어넣은 돌의 느낌이
추가된 것을 확인할 수가 있습니다
이런 식으로 표면이 상당히 다르죠
그냥 노멀만 꼈을 때랑 한 번 비교해 보겠습니다
이렇게 매끈했던 돌에서 자글자글한 돌로 바뀌죠
이런 식으로 일반적으로 믹싱을 합니다
그래서 경우에 따라서는 Add를 써 가지고
더 강하게 표현해 줄 수도 있고요
이 베이스로 쌓는 것들을 보통
형태 노멀 혹은 베이스 노멀이라고 하고
베이스 혹은 기본 형태를 가지고 있다고 하고
추가로 섞이는 것들은 디테일 노멀이라고 많이 표현을 합니다
베이스에다가 디테일을 얹는 구조인 거죠
그래서 이 베이스와 디테일의 차이는
Blue채널의 값을 어디에서 갖고 오느냐
여기에 따라서 바뀐다고 보시면 됩니다
이런 식으로 일반적으로는 이미지와 이미지끼리 섞어 주는데
현재 우리가 만약에 하게 된다면
Multiply를 하면 0이기 때문에
Multiply를 하는 의미가 없죠
그래서 만약에 기본 Vector값을 가지고 활용을 한다면
Add를 시켜 주는 게 훨씬 더 맞을 겁니다
혹은 아예 처음부터 Component Mask에서
애초부터 Lerp를 시켜 버리는 거죠
그래서 컬러를 믹싱 할 때는 실제로 가장 많이 쓰이는 노드들이
바로 이 Multiply
가장 빈도가 높고요
그 다음에 Add
마지막으로 Lerp가 됩니다
그 중에서도 우리는 이 Lerp에 조금 더 집중해서 표현을 하는 거고요
여기에서 Alpha값만 가지고 와서
Append Vector의 A에 다시 넣어 줍니다
다시 한 번 말씀드리지만
이 Lerp가 될 때까지 혹은 Multiply든 Add가 될 때까지는
기본적으로 Vertor2의 상태다
그리고 Append에서 Vertor3로 만들어서
길이를 1로 만드는 단위 Vertor로 만드는 과정을 거치게 된다
여기까지 여러분들이 기억해 두시면 됩니다
이제 우리가 믹싱이 되는 결과를 눈으로 보려고 하는 건데
여기에서 Lerp에 들어가는 값 자체를
우리가 계속해서 0.1, 0.2 이런 식으로 하면
잠깐 잠깐 체크무늬가 나오면서
바로바로 눈으로 확인하기가 힘들어지죠
그래서 여러분들이
값이 스무스하게 바뀌는 것들을 확인하고 싶으시다면
이런 것들을 머티리얼에서 확인하지 마시고
머티리얼 인스턴스를 만들어서 확인하시는 게 좋은데
여기에다가 Scalar Parameter라는 노드를 하나 만들어 가지고요
이 Parameter의 이름은 LerpVal라고
이렇게 간단하게만 짓겠습니다
기본 값이 0이라고 되어 있으면
0 이하는 Black, 0 이상은 White니까
전부 다 White겠죠, 0 이상인 값
여긴 어쨌든 어떠한 데이터든 들어가 있으니까
그래서 기본 값을 일단 0.5로 두고요
Save를 합니다
Apply and Save를 먼저 눌러 주시고
컨텐츠 브라우저 창으로 가서
이 WetFloor을 선택한 다음에
WetFloor 오른쪽 클릭해 가지고
Material Instance를 생성해 줍니다
더블 클릭해서 열도록 하겠습니다
이런 식으로 기본 Step값이 0.5인 상태에서
적용이 되어 있는 머티리얼을 보실 수가 있는데요
여기 글로벌 Scalar Parameter 항목에서 열어
LerpValue를 체크해 주시고 값을 바꿔보시면
이제는 자연스럽게 연속적으로 값이 바뀌면서
어떻게 적용되는지를 쉽게 눈으로 보실 수가 있습니다
변화되는 것이 지금 보시는 것처럼
0에서부터 1까지로 서서히 바뀌는 것이 보이죠
이런 식으로 여러분들이 연속되는 결과물을 보고 싶다면
변화들을 보고 싶다면
머티리얼 상태에서 바꾸실 게 아니고
이런 식의 머티리얼 인스턴스를 하나 만들어서
값을 변화시키면서 체크해 보셔야 되고
기본적으로 여러분들이 머티리얼과
머티리얼 인스턴스의 관계에 대해서 아셔야 되는데요
머티리얼이라고 하는 건 다른 프로그램을 기준으로 하자면
사실 셰이더에 가깝습니다
색을 어떻게 표현할지 프로그래밍하는 셰이더에 가깝고요
그리고 셰이더를 바탕으로 만들어진 머티리얼을
머티리얼 인스턴스라고 생각하시는 게 조금 더
여러분들이 이 값의 변화를 바꿔가면서 확인하는 게
이해가 되실 텐데요
셰이더라는 걸 계속해서 프로그래밍을 하면
결국에는 컴퓨터는 이걸 인식하기 위해서
컴파일이라는 과정을 거치게 됩니다
그래서 우리가 숫자를 조금만 바꾸더라도
컴파일을 다시 걸어줘야 되고
다시 걸어줘야 되고
그러다 보니까 값이 연속해서 보이지 않는 거죠
반면에 머티리얼 인스턴스를 만들었다는 얘기는
이미 우리가 짜놓은 머티리얼이 컴파일이 전부 다 끝났다
끝났기 때문에 우리는 계속해서
결과값만 바로바로 업데이트하면 되기 때문에
셰이더 컴파일하는 과정이 생략되면서
머티리얼 인스턴스는 결과값을 바로바로 볼 수 있는 것이죠
실제로 셰이더 컴파일하는 과정 중에 컴퓨터가 굉장히 느려질 수가 있는데요
여러분들의 컴퓨터가 고사양이 아니라고 한다면
이것보다 조금만 더 복잡한 머티리얼을 짜시려고 하면
Parameter 하나 바꾸고 갑자기 1분 정도 기다리거나
한 2분 3분 기다리거나
이런 일들이 발생을 합니다
현재 제가 사용하는 컴퓨터는 i9-3080을 사용하고 있습니다
64GB의 컴퓨터입니다
일반적으로는 그래픽카드가 고성능일수록 컴파일 과정이 굉장히 짧아져서
머티리얼상으로도 값의 변화를 바로 확인할 수가 있는 편인데요
그래도 방금 전에 확인하신 것처럼
머티리얼 에디터 상에서 값을 바꾸게 되면
약간의 체크무늬 패턴이 보이면서
바로 연속해서 보기는 좀 어려웠죠
그래서 이런 식으로 여러분들이 가능하다면
중간중간 값을 체크하실 때
표현이 제대로 올바르게 믹싱이 되고 있는지 아닌지를 보실 때는
머티리얼 인스턴스를 사용해 주시는 것이 좋습니다
이제 평면으로 봐서 노멀 맵의 변화도 한 번 보겠습니다
지금은 반사되는 이미지가 많은 상태죠
그래서 이 Parameter 값을 높이게 되면
평평할 때 L 누르고 왼쪽 클릭해서 빛의 변화를 보게 되면
빛이 굉장히 평면적으로
이렇게 하이라이트 되는 부분을 보면
평면적으로 흘러간다는 걸 알 수가 있습니다
반면에 값을 조금 높여서
돌이 좀 드러나게 된다면
상대적으로 이 빛이 흘러가는 부분이
Roughness 때문에 약해지면서 가려지죠
그리고 실제로 밝고 어두운 영역이
이렇게 음영이 더 또렷해지는 것을 확인하실 수가 있습니다
그래서 물이 더 내려간다면
이런 식으로 음영 자체가 훨씬 더 또렷해지는 것을 확인하실 수가 있죠
여기서 음영이 진다고 해서
실제로 평면에 굴곡의 변화가 생긴 건 아닙니다
평면은 아직도 평면 그 자체지만
이런 식으로 왔다 갔다 하면서
여러분들이 빛의 변화를
Lerp Value의 변화와 함께 확인해 보시면 됩니다
마무리하는 과정에서
한번 이 효과를 조금 더 그럴듯하게 바꿔 보겠습니다
우선 현재 상태에 문제점을 살펴보면
어느 정도 이렇게 물이 차있다고 가정을 해 보면요
돌의 단면들 중에
이런식으로 아직 충분히 물이 높게 올라오지 않은 것 같은데
이렇게 중간중간 마치 물에 찬 것처럼
뜬금없이 물이 고인 것 같이 보이는 이런 경우가 있습니다
만약에 정상적으로 이렇게 돌들이 있다 라고 가정을 해보면
이게 물이 서서히 올라와야 되는 거잖아요
그렇죠
이런 식으로 서서히 물이 차올라서
위에까지 가득 차야 되는데
지금은 어떤 상황이냐면
이렇게 돌들이 있다고 가정을 했을 때
물이 이렇게 차다가 여기도 차다가
여기도 차고 여기도 차고
높낮이가 서로 다른 데도 이렇게 차오르는 것 같은 이유는
기본적으로 컬러가 믹싱이 될 때 높낮이가 고려되지 않은 상태에서
단순히 노이즈 맵의 패턴에 의해서만 차오르기 때문인데요
이것을 조금 그럴듯하게 바꿔 보겠습니다
우선 노이즈 텍스처를 뒤로 빼고요
여러분들이 Cobblestone이 있는 Start Content의
텍스처 폴더로 가보시면
원래 이런 목적의 텍스처는 아닌데
메탈릭에 사용하라고 있는
Cobblestone_M 이라고 하는 텍스처가 있습니다
이것을 실제로 더블 클릭해서 보면
이런 식으로 굉장히 뿌옇게 보이죠
이렇게 보이는데 이 맵에서 조금 재밌는 특징이 있습니다
이 단면을 그려 보도록 할게요
화이트를 높다고 가정을 하고
블랙을 낮다고 가정을 하고 보겠습니다
어두울수록 낮은 거예요
그럼 중간 톤보다 조금 어두운 회색은
블랙과 가까운 중간쯤에 높이가 있을 거고
시작을 A에서 B 까지라고 가정했을 때
흰색으로 갈수록 점점 화이트가 되겠죠
다시 낮아졌다가
지금 이렇게 온 겁니다
낮아졌다가 다시 높아졌다가
낮아졌다가 높아졌다가 낮아졌다가
그래서 중간에 있는 회색들은 대체로 다 톤이 비슷하니까
높이가 어느 정도 일정할 거고요
화이트로 갈수록 높아졌다가 낮아지는
높아졌다가 낮아지는
이런 식의 형태를 시각화해 볼 수 있을 겁니다
그래서 사실 이러한 목적을 가진 텍스처는
Height Map 이라고 해서
높이 값을 나타내는 텍스처가 있을 때도 있고요
없을 때도 있습니다
원래는 블랙과 화이트로 높낮이 값을 나타내는
Height Map이라는 텍스처가 있는데
현재 우리는 Height Map을 가지고 있지 않으니까
대체할 수 있는 다른 방법을 찾아보는 거죠
그러면 여기에서 중간에 그레이로 보이는 것을
이것을 블랙 혹은 화이트로 컬러 톤을 맞출 수만 있다면
조금 더 그럴듯한
차오르는 듯한 효과를 만들어낼 수가 있을 겁니다
Cobblestone_M 을
얘도 마찬가지로 Red채널에서 가지고 올 겁니다
이 두 가지를 Multiply 시킵니다
이걸로는 사실 부족한데 그냥 그대로 꽂아서 연결을 해 보죠
이렇게 0.5일 때 하얀 부분들만 먼저 드러나 있죠
그리고 0.1이 되면 화이트가 되고요
0.9가 되면 거의 블랙에 가까운 상태
0.2가 되면 조금 더 화이트가 잘 드러나게 되는데
여기에서 이 중간의 톤이 너무 밋밋하다 보니까
음영의 변화를 Multiply를 이용해서
베이스 컬러에 해줬던 것과 똑같이 Multiply를 같은 걸로 해 줬죠
이렇게 한번 해 줘 보겠습니다
그리고 나서 이걸 연결을 해 보면
조금 더 그 차이가 명확하게 드러나죠
다만 현재 보면 0.2에서 0.5로 가고
다시 0.3, 0.1 이런 식으로 되면
틈새보다도 오히려 위에 표면이 더 빨리 차오르는 걸 볼 수가 있습니다
한마디로 값을 뒤집어줘야겠죠
그래서 OneMinus 노드를 이용해서
노드는 OneMinus라고 검색을 하시면
이렇게 1-x 라고 되어 있는 노드가 나옵니다
이걸 이렇게 꽂아 주게 되면
한 번 인스턴스에서 확인해 보겠습니다
LerpValue가 0 이라는 얘기는
좀 더 정확하게는 LerpValue가 아니라
Step의 값이 0 이상은 무조건 화이트로 해라
그 기준값을 정해 주는 게 우리가 파라미터로 정한 거였죠
그래서 0일 때는 0 이상이 전부 다 화이트가 되라니까
물이 차오른 거고요
여기서 서서히 물을 한 번 빼보겠습니다
천천히 한 번 빼 볼게요
돌의 높은 부분들이 먼저 드러나고 있죠
서서히 높은 부분들 위주로 드러나다가
점점 값이 더해질수록 바닥을 향해서
이렇게 마치 물이 빠지는 것처럼
다시 차오르게 만들려면
이런 식으로 쓱 하고 줄이면
정확하진 않지만
상대적으로 틈새들 위주로 먼저 차오르기 시작해서
점점 위로 돌 중앙부를 향해서 올라오는 것들을 볼 수가 있죠
이런 식으로 정확하진 않지만
비슷하게 흉내 내는 정도의 효과는 만들어 볼 수가 있을 겁니다
이 상태에서 LerpValue가
우리가 앞서서 Lerp에 대해서 배울 때
밸류 값이 1이면 b의 성분이 100%고
밸류 값이 0.7이면 b의 성분이 70%다
이런 식으로 얘기를 했는데
실제로 b를 100% 보여주고 싶으면
현재 파라미터를 Step에서 0 이상은 무조건 white로 해라
이렇게 되어 있죠
한마디로 Alpha에 들어가야 되는 값과
우리가 정해줘야 되는 밸류 값이
파라미터 값이 반대 관계가 있죠
그래서 이것을 마찬가지 맥락으로
OneMinus 노드를 이용해서 연결을 해주게 되면
앞서서 우리가 여기 썼었죠
그대로 한 번 Apply 해보겠습니다
그러면 이제 1이 됐을 때
LerpValue가 1이 됐을 때는 b의 이미지가 Lerp값 그대로
Alpha값이 1일 때와 똑같은 상황을 만들어 줄 수가 있고요
0.7일 때는 b가 70%
0.5, 0.3, 마지막 0까지
Lerp값이 0일 때는 a의 이미지
드라이한 이미지가 보여지게 되는 거죠
OneMinus 노드라는 게 기본적으로 1 빼기 X라는 얘기인데
이 X에 우리가 값을 정해주는 겁니다
그러면 만약에 이것을 그대로
0, 0.3, 0.7, 1을 넣었다고
이 X에 값을 넣었을 때 어떻게 되겠어요
1 빼기 0이 되니까
결과 값은 1이 나오겠죠
1 빼기 0.3이 되니까 0.7이 될 거고요
1 빼기 0.7
결과는 0.3
1 빼기 1은 0이 되겠죠
그러면서 자연스럽게 이 값이 반전이 일어난 것을 볼 수가 있습니다
그래서 OneMinus 노드도 마찬가지로
컬러 믹싱을 하거나
여러 가지 쉐이더를 짜는 상황에서
굉장히 빈번하게 쓰이는 노드 중에 하나입니다
이런 식으로 기본적인 질감에 대한 표현을 해봤고요
이번엔 조금 더 다른 방식으로
이 텍스쳐들이 지금은 딱 이렇게 한 세트가
한 장의 이미지만 보여지고 있는데
여기에서 Texture Coordinate라고 하는 노드를 이용해서
텍스쳐가 반복되는 횟수를 이런식으로
여기 보면 U 타일링, V 타일링으로 되어있는데
U 타일링의 수치를 높여주게 되면
좌우의 이미지가 반복되는 횟수가 늘어나게 됩니다
그래서 이 UV라고
우리가 흔히 텍스쳐에서 얘기하는 게 X,Y축이기 때문에
X는 좌우, Y는 위아래죠
그러다 보니까 U 타일링의 수치를 높이면
3D 메시가 지금 평면으로 있죠
여기에 원래는 한 장을 보여주는 게 기본 값인데
여기에 3이 되면서
총 가로로만 세 장의 이미지를
하나, 둘, 세 장의 이미지를 보여주는 상태가 된 겁니다
그래서 이러한 성질을 이용해서
Texture Coord에다가 Multiply를 해 줘 가지고요
여기에 B에다 곱해지는 값을
Scalar Parameter로 해서
Parameter의 값의 이름은 tilling이라고 지어 주겠습니다
기본 값은 1이 될 거고요
Texture Coordinate에서의 U 타일링 값도
1로 다시 원상복구 해놓도록 하겠습니다
이런 식으로 연결해 주면
이제는 Texture Coordinate에 있는 값을 수정하지 않고도
반복되는 횟수를 우리가 임의로 정할 수가 있죠
다만 이렇게 Texture Coordinate를 정할 때에는
우리가 사용하는 텍스쳐들 중에서도
같은 질감을 가지고 있는 Cobblestone_M
그리고 노멀맵
여기에도 모두 동일하게 적용이 되어야
노멀맵까지 어긋나지 않게 깔끔하게 정리돼서 표현이 되죠
만약에 이걸 빼버리면
지금 보는 것처럼 노멀맵은 한 장만
기본 값인 한 장만 반복되고 있는데
베이스 컬러가 두 장 혹은 세 장씩 반복되면 이상하겠죠
그래서 이런 식으로 하는 거고요
노이즈 같은 경우에는 일부러 패턴을 얼기설기 보여주기 위해서
일부러 tilling 값을 다르게 가지고 가는 경우들이 있습니다
경우에 따라서는 tilling 값이 몇이든
그거의 절반만 tilling 값에다가
Multiply 같은 것들을 해서
만약에 내가 세 장을 반복하는 것의 절반만 따라 하게 하고 싶다면
Multiply를 0.5로 곱해 주게 되면
3 곱하기 0.5가 되면서
1.5회만 반복하게끔 만든다던가
혹은 0.3333 해서
3분의 1만 반복하게 한다던가 하는 식으로
별도의 Multiply 되는 수치를 조절할 수가 있겠죠
당연히 이것도 당장 꽂으면 되는 게 아니라
Texture Coordinate랑 Multiply를 하고 나서 그 결과를 꽂아 줘야겠죠
그래서 적용을 해 보면
실제 머티리얼 인스턴스에서
tilling 숫자도 놓겠습니다
서서히 물이 군데군데 차오르는 정도를 표현할 수가 있고
tilling되는 횟수에 따라서 텍스쳐도 일정하게 적용되는 걸 확인할 수가 있죠
그래서 여러분들이 이런 식으로 기본적인
우리가 현재 사용한 건
Lerp라는 Node도 사실상
그 안에 내부적으로 보면 다 곱하기하고 덧셈이고
Multiply 혹은 Add를 이용해서
우리가 조금 더 원하는 표현들을 복잡한 수식 없이
곱셈과 덧셈 같은 단순한 수식들만을 이용해 가지고 표현해 봤습니다
이번 시간에는 Multiply와 Lerp를 활용해서
메마른 땅에서 젖어있는 땅으로 서서히 물이 차오르게끔
표현해 보았습니다
덧셈과 곱셈 같은 단순한 수식만으로도 변화를 만들어
자연스러운 시각 효과를 만들 수 있었습니다
그럼 이번 시간 학습한 내용을 정리하면서 마무리하겠습니다
감사합니다
WetFloor 머티리얼 생성
머티리얼 생성 Content 폴더에 WetFloor 폴더 만든 후 M_WetFloor 머티리얼 생성
Texture Sample 노드 생성 후 T_CobbleStone_Pebble_D 텍스쳐연결 RGB에서 핀을 뽑아 Multiply 노드 생성
Multiply A,B 모두 RGB에서 연결 (젖은 표면)
마른 땅과 젖은 땅이 공존하는 질감 제작 Lerp (Linear Interpolate)노드 생성 Lerp A에 텍스쳐 (마른 땅), Lerp B에 Multiply(젖은 땅) 연결
텍스쳐 샘플 생성 후 T_Perlin_Noise_M 선택 노이즈 텍스쳐 R채널과 Lerp Alpha 연결 Lerp A에 1, Lerp B에 0 입력 후 Roughness에 연결
물이 차오르는 연출을 위한 효과 노멀 맵 연결 및 노멀 믹싱 Texture Sample 생성 후 T_CobbleStone_Pebble_N을연결
T_CobbleStone_Pebble_N의 RGB채널을 Component Mask에 연결 (Component Mask는 RG)
Constnat3Vector 노드 생성 후 (0,0,1)입력 Component Mask(R,G)에 연결 Lerp A 텍스쳐에 연결된 컴포넌트 마스크
Lerp B Constnat3Vector에 연결된 컴포넌트 마스크 Lerp Alpha Step 아웃풋
Append Vector 노드 생성 후 R,G채널만 사용하는 Lerp 데이터를 RGB형태로 확장 Append A Lerp 아웃풋 /Append B 노멀 텍스쳐의 블루 채널
Nomalize한 결과를 마스터노드의 Normal에 연결
머티리얼 인스턴스 생성 ScalarParameter 노드 생성 후 LerpVal로 이름 설정
M_WetFloor 마우스 우클릭해 Create Material Instance 생성 후 열기
Global Scalar Parameter Values항목 LerpVal 체크 시 결과값에 대한 연속적 변화를 확인할 수 있음
Height Map효과 제작 T_Cobblestone_Pebble_M 텍스쳐 가져온 후 R채널을 Multiply하여 대비를 강하게 함
OneMinus 노드를 사용하여 Black과 White값을 뒤집어 줌 노이즈 텍스쳐와 멀티플라이한 결과를 Step노드에 연결
T_Cobblestone_Pebble_M 텍스쳐 가져온 후 R채널을 Multiply하여 대비를 강하게 함 OneMinus 노드를 사용하여 Black과 White값을 뒤집어 줌
노이즈 텍스쳐와 멀티플라이한 결과를 Step노드에 연결
물이 차오르는 연출을 위한 효과 타일맵 제작 Texture Coordinate 노드 생성 ScalarParameter 노드 생성(tilling)
두 노드를 멀티 플라이로 연산한 결과를 각 텍스쳐 UV노드에 연결 (베이스 컬러,노멀)
Tilling 파라미터에 Multiply를 추가해서 다시 한 번 위에서 Multiply한 결과와 연산함 노이즈 텍스쳐 UV에 연결