실감 공통편 포지션 디졸브
안녕하세요 박현상입니다
이번 시간에는 위치 값을 이용해서
시각화할 수 있는 방법에 대해서 다뤄볼 겁니다
위치 값이라고 얘기하는 것은 흔히
X, Y, Z 세 가지 축으로 이루어진
Vector3 데이터를 의미합니다
Vector3를 내적이라는 함수를 이용해서
블랙 앤 화이트로 이루어진 그레이 스케일 이미지로 바꿔서
우리가 원하는 방향으로
서서히 사라지거나 서서히 나타나게 할 수 있는
디졸브 효과를 만들 겁니다
수학에서 쓰이는 내적이라는 Vector의 곱셈이
어떻게 시각효과에 쓰이게 되는지 학습하게 될 것입니다
머티리얼 및 바운딩 박스 생성
폴더를 하나 새로 생성하면서 시작하겠습니다
뉴 폴더를 해주시고요
PositionDissolve라고 만들어 주도록 하겠습니다
그리고 머티리얼 M_PosDissolve
이렇게 하나 생성해서 에디터를 열어줄 거고요
이 머티리얼은 기본적으로 디졸브
사라지는 효과를 만들어내기 위한 거니까
Blend Mode를 Masked로 바꾸겠습니다
일반적으로 이 Masked는 스타터 콘텐츠에서 텍스처
Noise를 이렇게 집어넣었을 때
Opacity Mask에다가 집어넣어 보겠습니다
그러면 이렇게 흰색, 검은색을 기준으로 해서
흰색은 보이는 거, 검은색은 투명한 거
뚫려 보이게 이렇게 만들어 주는 게
Opacity Mask의 속성이고요
중간 값을 기준으로 하는데
Opacity Mask의 값이 0.5라고 해서 적용되는 건 아니고
0.4까지 한번 낮춰 보겠습니다
완전히 중간을 기준으로 하지 않고요
약 0.3 정도를 기준으로 해서
보이고 안 보이고를 결정하게 됩니다
정확하게 0.5를 기준으로 하지 않는다는 거 기억해 두시고요
우리가 앞으로 하게 될 것은
결과적으로 여기에다가 마스크 되는 영역을 Add를 해서
이 Add 되는 값을 -1로 해두면 아예 안 보이겠죠
0이어도 많이 보이지는 않을 겁니다
1이 되면 온전히 다 보일 텐데
이런 식으로 결국은 -1에서 -0.5, -0.1, 그냥 0.1
그리고 어느새 1로 딱 되면서 온전히 보이게끔
이렇게 보였다 안 보였다 하는 것을 만들어 볼 겁니다
다만 보였다 안 보였다의 기준이
텍스처를 기준으로 한다든가
노이즈 패턴을 기준으로 하는 게 아니고요
월드를 기준으로 내가 위에서부터 아래로 사라지게 한다든가
왼쪽에서 오른쪽으로 사라지게 한다든가
사라지는 방향 자체를
내가 임의로 정할 수 있게 해 볼 겁니다
현재는 텍스처의 패턴을 기준으로 사라지는 걸 보여드렸죠
이번에 메인이 되는 것은
이러한 포지션이라고 하는 값조차도
우리는 쉐이더에서 가져다가
어떠한 효과를 만드는 데 사용할 수 있다
이게 이번 강의의 핵심이 되겠습니다
이제 포지션 값 중에서도
이 오브젝트를 위에서든 아래에서든
서서히 한쪽 방향으로 사라지게 하기 위해서
꼭 필요한 노드를 하나 가지고 오겠습니다
우선 Opacity Mask에 연결되어 있던 것은 빼줘서
오브젝트가 온전히 보여야
나중에 그 값의 변화를 확인할 수가 있겠죠
잠시 아래로 치워두고요
여러분들은 오른쪽 클릭해서 바운드라고 검색하시면
여러 가지 바운드 관련된 것들이 나오는데
그중에서도 Coordinates 항목에
BoundingBoxBased_0-1_UVW 노드를 생성해 주시면 됩니다
우선은 이것을 Emissive Color에다가 연결을 해서
어떤 상태인지부터 설명을 드리겠습니다
굉장히 알록달록하게 나오죠
이것을 플레인 형태로 바꿔도
이 알록달록함이 유지되고 있고요
박스 형태로 바꿔도 마찬가지로 유지가 되고 있습니다
여기에서 여러분들이 주의하셔야 될 거
여기에서 보면 이렇게 컬러 값이
이 축하고 비교하면서 얘기를 하겠습니다
좌측 하단에 축의 방향이 이렇게 나오고 있죠
그래서 지금 보면 서서히 이렇게 가서
옐로우 계열의 색깔로 바뀌는 걸 볼 수가 있고요
이렇게 위로 올라갈수록 이쪽 끝에는
Cyan이라고 얘기하죠 청록색 같은 컬러
반대쪽으로 마젠타, 이쪽에는 블루 같은 이런 식으로
그리고 마지막 끝에는 화이트 컬러가 나오고 있는 것을
여러분들이 눈으로 확인하실 수가 있습니다
여기에서 우선 이 컬러들을 이용할 수 있다는 것은
우리는 컬러라고 하는 것은
숫자로 바꿀 수 있다고 배웠습니다
만약에 옐로우라고 한다면
RGB에서 레드와 그린이 1이고 블루가 0인 상태를
우리는 옐로우라고 얘기를 합니다
블루는 0, 0, 1이겠고요
마젠타 같은 경우에는 레드 1, 그린 0, 블루 1 이런 식으로
Cyan 같은 경우에는 0, 1, 1로
이런 식으로 좌표가 이루어져 있습니다
화이트는 당연히 1, 1, 1이겠죠
이 각각은 모두 레드, 그린, 블루로 대응도 되지만
X, Y, Z도 됩니다 좌표 상으로
그렇기 때문에 우측 하단에 기즈모를 기준으로 해서
X축으로 가고 있죠
이거는 색깔을 제가 다시 빨간색으로 그리도록 하겠습니다
이렇게 가고 있고 이대로 쭉 갈수록
Y의 성분이 0에서부터 1까지 증가하는 겁니다
블루도 마찬가지인데요
위로 올라갈수록 0에서부터 1까지 증가하는 거고요
Y도 마찬가지겠죠
이걸 생각해 본다면
그림까지 마저 그려놓고 설명해 보겠습니다
그림도 이쪽으로 갈수록 0에서부터 1까지 증가하는 거죠
그럼 이 끝에가 지금 제가 표시하고 있는 여기
화살표들이 시작했던 이 방향
기즈모랑 가장 가까운 모서리를 기준으로 설명을 하면
여기는 좌표 값으로 0, 1, 0일 겁니다
왜냐하면 그림 방향으로 끝자락이고
X축은 왼쪽에서부터 오른쪽이
X축의 0에서부터 1까지니까
여기는 X축은 0이겠고 높이도 당연히 0이겠죠
이런 식으로 각각의 컬러들은
좌표 값과 대응해서 사용할 수가 있습니다
그래서 우리는 보통 이렇게 오브젝트 자체의
전체적인 박스의 영역
우리가 구체라고 하더라도 이렇게 동그라미를 그려보면
이 동그라미의 가장 높은 부분이 있을 거고요
가장 낮은 부분이 있을 겁니다
이차원이니까 축으로 하자면 중간을 X축으로는 0.5
X축으로도 가장 끝 쪽이 있을 거고 가장 바깥쪽이 있겠죠
이 포인트를 굳이 좌표 값으로 표현해 보자면
1, 0.5일 겁니다
마찬가지로 가장자리 끝에도 0, 0.5겠죠 X, Y
이 아래쪽은 0.5, 1 위쪽은 0.5
여기가 0이고 여기가 1이겠네요
이런 식으로 오브젝트의 가장 높은 지점들을 표시를 해서
여기에 이렇게 선을 그대로 수직 수평하게 그려보면
하나의 박스가 나오죠
우리는 이런 것들을 바운딩 박스라고 부릅니다
이 오브젝트의 크기가 어떻든 가장 작은 건 0이고요
가장 큰 건 1인 겁니다
가장 작은 건 0, 가장 큰 건 1
물론 이거를 아예 Raw Data라고 보통 얘기를 하죠
지름이 5짜리라고 하면 전체 이렇게 봤을 때
여기가 이를테면 0이고
지름이 5짜리니까 여기가 5의 위치가 되겠죠
위에도 5고 아래는 0이고
2.5, 0이 됐고 2.5, 5가 되겠죠
Y축에 대한 가장 최소값과 최대값
높이상으로의 최소값과 최대값의 지점은
이거를 흔히 노멀라이즈 했다고 얘기를 하죠
Raw Data를 노멀라이즈한 데이터가
지금 우리가 보고 있는 바운딩 박스 0에서부터 1까지입니다
참고로 여기에 있는 UVW는
X, Y, Z의 또 다른 이름이고
당연히 RGB와 대응이 되겠죠
바운딩 박스의 값이 있다면
우리는 원하는 방향으로 그라데이션을 만들어낼 수 있습니다
여기에서 색이 변한다는 것은
숫자가 변한다는 것을 의미하는 거고요
흰색이 1이고 가장자리 끝에가 0에 가까운
색이 선명해지는 부분은
어떤 성분이든 0이 포함되어 있겠죠
뒤에도 마찬가지입니다 여기도 이렇게 보면
그래서 가장자리 끝에
흰색의 완전히 반대쪽에 해당하는 여기는 0, 0, 0입니다
여기는 모든 좌표값이 0, 0, 0
여기는 모든 좌표값이 1, 1, 1
그렇기 때문에 이렇게 보면 블루가 옆으로 가고 있죠
그린은 아래에서 위로 올라오고 이런 식으로
색이 서서히 바뀐다는 것은 그린의 성분이 변하든
블루의 성분이나 레드의 성분이 변하든
어쨌든 수치가 변하고 있다는 겁니다
우리가 이전에 노멀맵 블렌딩과 관련해서
각각의 성분을 따로 받아오는 것도 했었지만
여기는 이미 나누어져 있습니다
레드 값을 한번 비교해 보면요
이런 식으로 위에서 봤을 때
좌표 기준을 이렇게 잘 맞추실 필요가 있습니다 이런 식으로
그러면 여기 시작하는 지점이 0이고
끝으로 가서 가장자리가 1이 되는 겁니다
그래서 여기는 화이트이고
끝자락은 블랙처럼 안 보이지만
아주 얇은 영역만 블랙이기 때문에 블랙인 거죠
그러면 이것을 그대로
Opacity Mask에 끼워 본다면 어떻게 될까요?
이런 식으로 절반만 잘린 것처럼 나오죠
그럼 여기에다가 계속해서 Add를 이용해가지고
여기에다가 -0.5를 해서 꽂아주면 더 짧아지고
-0.7을 하면 아예 사라지죠
그리고 여기에다가 -0.1을 하면 다시 나오죠
Add가 0일 때, 그리고 0.2일 때, 0.3일 때
마지막으로 0.5일 때 비교를 해 보면
반대쪽까지 모두 다 메꿔져서
방향을 우리가 더하는 것으로
사라지고 생기고를 결정할 수 있습니다
더하는 값이 커질수록 잘 보이는 거고요
더하는 값이 낮아질수록 잘 안 보이는 거죠
그래서 인스턴스에서 확인하기 위해서
Scalar Parameter를 하나 생성해서요
이거는 VisibleVal라고 보이는 정도를
이렇게 하나 만들어서 연결해 놓겠습니다 저장을 하고요
우리가 만든 머티리얼을 인스턴스화 시켜서
지금 평면으로 비교해서 보고 있는데
VisibleVal 값을 이렇게 움직여 보시면 이런 식으로
박스도 마찬가지고요
구체도 마찬가지 이런 식으로
모든 오브젝트들이 내가 원하는 방향대로
좀 더 정확하게는 월드의 방향대로 되는데
이 방향대로 사라지는 걸 확인하기 위해서
Place Actors를 이용해서 여기 Shapes 항목이 있죠
거기에서 방향을 여러분들이 알 수 있게
큐브를 가지고 이렇게 배치를 하겠습니다
F를 눌러서 포커싱을 해주고요
그러고 나서 우리가 제작한
머티리얼 인스턴스를 적용해 보겠습니다
오브젝트가 배치된 X축
기즈모의 X축으로 VisibleVal 값을 조절하면
X축 방향대로 늘어났다 줄어들었다 하면서
눈으로 보이고 있죠
그럼 이게 회전을 한다면 어떨까요?
이렇게 회전을 한다면 월드 상의 X축의 방향은
바닥에 있는 그리드대로 이쪽으로 향하고 있습니다
이게 지금 X축을 의미하는 거예요
화살표 방향이 우리는 오브젝트를 회전해서
지금 바라보는 방향이 이렇게 바뀌었습니다
이때 VisibleVal 값이 변한다면
이런 식으로 월드 방향에 영향을 받는 것이 아니라
오브젝트가 가지고 있는 X, Y값에 대해서
영향을 받는 것이기 때문에
우리는 흔히 이러한 상태를
로컬 바운드라고 얘기를 합니다 이 좌표 값의
컴퓨터가 오브젝트를 인식하는 방법은
기본적으로 오브젝트의 Pivot이라고 하죠
기준점을 바탕으로 계산을 하는데
그걸 바탕으로 X축으로 가있느냐
Y축으로 가있느냐 Z축으로 가있느냐
이런 것들을 따지는 겁니다
오브젝트 자체의 기준점을 바탕으로
방향이라든가 좌표를 기준으로 삼는 것들을
우리는 흔히 로컬 스페이스라고 얘기를 하죠
그래서 로컬 스페이스 기준으로 한 바운드 최댓값과 최솟값
흔히 우리는 이걸 Min, Max 값이라고 얘기를 하죠
그래서 어느 방향으로 오브젝트를 틀어도
오브젝트가 자체적으로 가지고 있는 방향으로
보였다 안 보였다를 하게 되는 겁니다
이제 다시 머티리얼 창으로 돌아와서
이후에 생기는 일에 대해서 하나 문제점을 짚어 보겠습니다
지금 우리는 레드 채널
언리얼 기준으로는 레드는 곧 X축이니까
레드 채널을 기준으로 해서 보였다가 안 보였다가
왔다 갔다 하게 만들었죠 여기에서 문제는
그러면 내가 이 디졸브의 방향을 바꾸고 싶다면
어떻게 해야 될 것인가 하는 겁니다
내가 만약에 앞뒤로
프론트, 백으로 왔다 갔다 하는 게 아니고
탑과 다운을 이용해서 위아래로 왔다 갔다
보였다 안 보였다를 만들고 싶다거나
혹은 이 두 가지가 결합된 대각선 방향으로
보였다 안 보였다 만들게 하고 싶다면
지금과 같은 상태라면 레드 채널 그대로니까
각각의 방향마다 디졸브 머티리얼을 다 만들어줘야겠죠
근데 사실상 360도니까 다 할 수는 없겠죠
그래서 우리는 간단한 공식을 하나 만들어서 사용할 겁니다
내적을 활용한 방향 전환 및 다양한 효과 연출
노드를 약간 옆으로 빼고요
Alt를 눌러서 이 연결을 끊어주겠습니다
그러고 나서 우선 Vector Parameter를 하나 만들어서
이 파라미터의 이름은 Direction이라고 하겠습니다
앞서서 말씀드린 것처럼
여기에 들어가 있는 컬러 값은
프론트, 백, 라이트, 레프트, 탑, 다운과 같은 형식으로
RGB를 이용해서 방향을 알려주는 역할로 사용할 수 있습니다
그렇기 때문에 이 자체가 방향을 알려주는
이렇게 값을 이용해서 방향을 알려주는 것이고
우리는 이것을 내적이라고 하는
Dot 연산, Dot Product를 이용해서 알아볼 겁니다
그래서 기본 값은 프론트를 기준으로 할 수 있게
이렇게 Direction의 값을
레드 상태로 만들어 놓고 OK 하겠습니다
이것을 그대로 Emissive Color에 연결하고
잠시 Opacity Mask는 끄겠습니다
앞서 말한 것과 같이 지금 보시면
X축으로 보면 그라데이션이 똑같이
이렇게 X축의 방향대로
뻗어나간 방향대로 일치하는 것을 볼 수가 있죠
Dot 연산에 대한 구체적인 계산 방법 같은 것들은
나중에 여러분들이 따로 수학책 같은 것들을 참고하시면 되고
제가 여기서 설명드리고자 하는 Dot 연산의 활용 방법은
기본적으로 Dot 연산은
방향 비교할 때 쉐이더를 하면서 많이 사용하게 됩니다
어떤 원리냐면 A라는 기준을 바탕으로
우리한테 전달되는 Direction 값을 기준과
이걸 흔히 Direction이라고 얘기하겠습니다
Direction을 비교하는 겁니다
그래서 기준 벡터가 만약에 위로 솟아 있다고 가정하고
당연히 여기에서 단위는 기본적으로 1입니다
그리고 여기에 벡터가 대각선으로
이렇게 똑같이 1짜리가 있다고
45도로 기울어진 벡터가 있다고 하면
조금 길게 그려졌네요
이 방향을 그대로 기준에 갖다 붙이는 겁니다
이것을 이렇게 갖다 붙여서 비교하는 거죠
기준에서 너는 현재
몇 퍼센트의 위치에 있느냐고 물어보는 겁니다
실제 45도보다 좀 덜 누워서 지우고 다시 그리겠습니다
45도의 1짜리 벡터를 그려보면 대략 이렇게
이 기준을 1이라고 했을 때 이것을 그대로
비교 벡터의 방향을 이렇게 프로젝션 시킨다고도 얘기를 합니다
이것이 현재 벡터의 몇 퍼센트의 위치에 있느냐고 하면
기본적으로 45도 각도는
대략 위치가 0.717 정도 됩니다
그래서 약 70% 정도의 위치에 있다고
볼 수 있는 거죠 기준 대비
이것을 이렇게 방향이 서로 다른 것에 대해서
수치화시킬 수 있다는 얘기입니다
Dot 연산을 이용하면
마찬가지 맥락으로 여기에 그림 값을 포함한다면
이렇게 비교해 보겠습니다
X 1, Y 1이라고 하는 것은
X축으로도 1, Y축으로도 1
그렇기 때문에 이렇게 대각선의 벡터가 나오죠
그래서 그라데이션이 여기서부터 끝까지 해서
이렇게 그라데이션이 됩니다
한번 실제 인스턴스에서 확인해 보겠습니다
이 내용을 저장해 주시고요
머티리얼로 돌아가서 Global Vector Parameter에서
노드를 이전과 동일하게 만들어 주고
Apply 혹은 저장을 눌러서
머티리얼 인스턴스에서도 Direction이라는 파라미터와
VisibleVal에 대해서 수정할 수 있게끔 저장해 주시고요
이것을 인스턴스 화면으로 가서
여러분들이 방향을 알기 쉽게 박스로 두겠습니다
Direction을 활성화시키고요
여기에서 VisibleVal는 0으로 두겠습니다
이것을 지금 보시면 레드와 그린 각각이 1이고
VisibleVal에 따라서 높이면 당연히
0에다가 계속 1보다 큰 값이 점점 들어가면
그냥 흰색이 되겠죠
그래서 점점 줄여보면 그라데이션의 방향이 일정하게
대각선 방향으로 줄어드는 걸 보실 수가 있습니다 이런 식으로
당연히 이것을 Opacity Mask에 연결한다면
저장을 하고요
우리가 원하는 방향대로 사라지게 만들 수가 있겠죠
보이게도 하고요
이 방향을 애매한 각도로 그린 채널을 살짝 줄여본다면
방향이 틀어져서 줄어드는 방향이
약간 45도를 비껴난 방향이라는 것을 확인할 수가 있죠
그래서 이러한 성질을 바탕으로 해서
우리는 디졸브 효과를 만들 건데
지금은 경계가 너무 깔끔합니다
지금 보시는 것처럼
다시 머티리얼 에디터 화면으로 돌아왔어요
우선 Noise 노드를 생성하겠습니다
여기 있는 Noise 노드는
World Position 값을 기준으로 하는데
여기에서 World Position이라고 해서
여러분들이 검색해서 나오는 노드가 있을 겁니다
이 노드를 사용한다고 했을 때
한 가지 문제점이 생기는 것을 먼저 설명하고
마저 진행을 할 겁니다
우선 이것을 Emissive Color에 연결해 주겠습니다
그러면 지금 보시는 것처럼
아주 자잘한 노이즈가 생기는 것을 볼 수가 있는데요
이것을 조금 더 크게 패턴을 보이게 하기 위해서
Position에다가 Multiply를 해주고요 곱하기로
B에다가는 이렇게 출력을 뽑아서
Scalar Parameter로 Noise Scale이라고
이렇게 파라미터를 하나
0.03을 기본 값으로 하는 노드를 만들어 주겠습니다
이것을 World Position에 연결하면 지금 보시는 것처럼
패턴이 조금 더 커진 것을 확인하실 수가 있죠
이것을 이용해서 우리가 디졸브 효과를 만들 때
World Position이기 때문에 생기는 문제점
Level에다가 이 액터를 실제로 배치해서
보여드리도록 하겠습니다
우선 Third Person Map에다가
Shapes 항목에서 큐브를 드래그해서 집어넣겠습니다
그리고 이 큐브에다가 우리가 만들어 놓은 인스턴스를
이렇게 큐브에 적용을 해 보면요 사라져 있죠
이 노이즈 패턴대로 모양을 갖추면서 사라지게 될 건데
World Position을 하다 보니까 오브젝트가 이동을 하더라도
지금 보시면 노이즈의 패턴 자체가
월드 상에 고정된 것처럼 보이죠
마찬가지로 오브젝트가 회전을 해도
이런 식으로 노이즈 패턴이
고정되어 있는 걸 보실 수가 있습니다
다시 머티리얼 에디터 창으로 돌아와서요
여기 있는 World Position이라는
Noise 항목에서의 Input 항목은 신경 쓰지 마시고
Local Position을 별도로 검색을 해서
Local Position 노드를 이용해서 이렇게
Multiply에다가 World Position 대신 연결해 주도록 할 겁니다
적용하고 실제 효과를 보면요
이제 Local Position 값을 기준으로 적용이 되기 때문에
오브젝트가 회전을 하거나 이동을 했을 때
그대로 오브젝트와 함께 일체화돼서
움직이는 것을 확인하실 수가 있죠
World Position은 잠깐 지우도록 하고
Local Position의 Scale 값을 0.03을 입력한 상태에서
이 Noise를 한 번 더 Add 해가지고
Dot 항목과 연결해 주도록 할 겁니다
VisibleVal와 연결되어 있는 것은 지우도록 하겠습니다
이렇게 연결된 Add를 나중에 이 VisibleVal와는
Step이라는 항목으로 정리를 해 줄 겁니다
VisibleVal에서 Step을 연결하면
자동으로 Y에다가 연결이 되고요
Dot 연산이 된 결과치와 Noise 항목은 Add를 해서
Step이라는 노드의 X에다가 연결하고
Opacity Mask로 연결을 해주겠습니다
이렇게 연결이 되었죠 이것을 이제 저장을 하고
인스턴스 창으로 가서 보게 되면요
VisibleVal 항목에서 값을 늘려보겠습니다
점점 이렇게 사라지는 것이 보이시죠
그리고 이 사라지는 방향이 잘 보시면
우리가 미리 Direction 항목에서 지정해 놓은 방향에 맞춰서
사라지는 정도, 밀도가 다르다는 것을 확인하실 수가 있습니다
여기 있는 Direction 항목에다가
만약에 1보다 큰 값을 넣어주게 됐을 때
사라지는 정도가 조금 이상할 건데요 한번 보시면
사라지는 정도가 우리가 Direction의 값을
얼마를 정하는지에 따라서 이런 식으로
마치 VisibleVal가 바뀌듯이 이렇게
Direction 값을 바꾸는 것도
마치 VisibleVal가 바뀌는 것과 같은
이런 식의 효과를 보실 수가 있습니다
우선 이런 일이 왜 생기는지부터 말씀을 드리면
기본적으로 바운딩 박스에서는
출력되는 값이 0에서 1까지입니다
그래서 박스가 있다고 치면 0에서부터 1까지죠
1, 0이나 1, 1 정도가 되겠죠
그럼 대각선의 길이 가장 긴 거라고 해봐야
1.4 정도 될 겁니다
여기에다가 루트 2 정도 씌우니까
반면에 비교해야 될 벡터가 단위 벡터가 아닌
이런 식으로 기다란 벡터가 나와서
이게 몇 퍼센트냐 이런 식으로 따지게 되면
원래 있던 길이보다 2배가 커질 수도 있고
3배가 커질 수도 있고 여러 배 커질 수가 있겠죠
그렇기 때문에 우리는 이 방향에 대한 것도
정리가 좀 필요한데요
여기에 있는 길이를 무조건
방향이 어느 방향이 됐든 길이가 1이 될 수 있도록
Direction 노드를 잠깐 뒤로 미루고
여기에 있는 노드에서 Normalize 하고 이렇게 연결해주면
한번 저장해 보겠습니다
이제 인스턴스 창에서 잠시 절반 정도만 보이게끔 설정하고요
여기에 있는 그린 값을 엄청나게 바꾼다고 하더라도
지금 보시는 것처럼 이 값이 쭉 줄어들어서
0보다만 크다면 일정하게 유지되는 것을 보실 수가 있죠
물론 이게 마이너스 값으로 가면
당연히 방향이 바뀌는 거니까
이때는 방향이 바뀌겠지만
이제는 지금 보시는 것처럼
값이 아무리 커진다고 해도
물론 약간의 방향 값이 커진다는 게
이렇게 X로 한 번, Y로 요만큼 갈 때랑
X로 한 번, Y로 이만큼 갈 때랑 나타내는 방향 자체는
이런 식으로 약간 각도가 틀어지는 것은 있습니다
그래서 방향이 틀어지는 거지
40, 50, 100만큼 된다고 해서
이게 엄청나게 보이는 범위를 바꿀 만큼
영향을 주지는 않습니다
이런 식으로 값을 정리를 했고요
Step의 노드가 하는 일도
이런 값을 정리하는 것과 똑같습니다
우리가 VisibleVal에 마이너스 값을 넣어주는 이유 중 하나는
여기 있는 Noise 항목이 값이 출력되는 게
마이너스에서부터 플러스까지 값의 범위가 좀 넓습니다
값의 범위가 넓다 보니까
Emissive Color처럼 1보다 큰 값을
인식하는 노드는 상관없는데
이렇게 Opacity Mask처럼
0에서 1 사이로 인식되는 노드들은
나중에 값에 대한 정리를 좀 해주는 것이 좋은데
Step 노드가 하는 일은
내가 정한 임의의 값을 기준으로 해서
이 값보다 작다면
이것을 X로 놓겠습니다
내가 정한 임의의 값을 X라고 해서
이것보다 작은 어떤 값이 들어온다면 그것은 무조건 0으로
그리고 X보다 큰 값이 들어오면
그건 무슨 값이 됐든 무조건 1로
0에서 1 사이의 값으로 정리해 주는 역할도 함께 하고 있습니다
그렇기 때문에 Step 노드를 쓴다면
별도의 다른 노드들 없이 전달되는 값 자체가
0에서 1 사이 값으로 안정이 됩니다
마저 표현을 계속해서 해 볼 건데요
VisibleVal 노드의 값을 0.5 정도로 해서
사라지는 범위를 보도록 하겠습니다
0.5 정도로 하면 이렇게 서서히 사라지는 것들이
0.6 이런 식으로 점점 이제 티가 나게 되는데요
근데 건너편을 잘 보시면 이렇게 뻥 뚫려서 비칩니다
이러한 이유는 3D 오브젝트는 기본적으로
앞면만 그리는 게 기본 속성이기 때문에 그런 것인데
여기에 있는 마스터 노드를 여러분들이 선택하셔서
혹은 여백을 클릭하셔도 됩니다
여기 Two Sided라고 되어 있는 옵션을 체크해 보시면
이제 앞면 뒷면 모두를 그려라라는 이러한
안쪽에 들어가서도 면이 있는 걸 보실 수가 있죠
그래서 아직 사라지지 않은 쪽을 보면
벽에 막힌 것처럼 안 보이고
이러한 옵션을 사용하게 될 건데
지금 보시면 앞면과 뒷면의 색상이 똑같습니다
앞면과 뒷면의 색상이 똑같은데
이것을 다른 색상으로 표현하기 위해서
여기에서 오른쪽 클릭하시고
우선 컬러 노드 두 가지를 먼저 만들어 보겠습니다
Constant3Vector를 이용해서 Ctrl+C, V로 붙여주고요
하나는 임의의 값 빨간색으로 놓고요 색깔의 구분을 위해서
또 다른 컬러는 구분이 좀 잘 되게 녹색으로 놓겠습니다
약간 촌스러워지겠죠
이 두 가지를 Lerp를 이용해서 믹싱을 해줄 겁니다
이때 믹싱이 되는 기준은 지금까지는 다루지 않았던
TwoSidedSign이라고 하는 노드를 통해서 믹싱을 해줄 겁니다
이거를 이렇게 연결해서
Emissive Color에다가 완성해 보면 이런 식으로
앞면은 녹색으로, 안쪽 면은 지금 보시는 것처럼
빨간색으로 인식이 됩니다
근데 엄밀하게 TwoSidedSign이라는 값 자체는 -1에서
-1이 백 사이드를 얘기하는 거고요
조금 확대를 해 보겠습니다
앞면은 1, 백 사이드는 -1 이런 식으로 출력이 되는데
Lerp에다가 마이너스 값을 넣게 되면
값이 왜곡되는, 채도가 좀 올라가는 증상이 있어서
이거는 Saturate라고 하는 노드를 이용해서
값을 안정적으로 잡아주도록 하겠습니다
그래서 앞면과 안쪽 면에, 겉면과 안쪽 면에
색상의 차이를 둬서 시각적으로 구분을 해줬고요
나중에는 여기에 어울리는
다른 텍스처 이미지를 집어넣어서
그것과 어울리는 색상으로 바꿔줄 겁니다
지금은 색상의 구분을 위해서 이렇게 놔둔 거고
만약에 스타터 콘텐츠에서 텍스처 항목에서
이런 벽돌 이미지를 하나 가지고 와서
이것을 Base Color에 연결해 준다고 생각해 보겠습니다
질감을 표현해야 하니까 이런 Base Color 말고도
노멀맵도 필요하겠죠
이런 식으로 노멀맵도 같이 연결을 해 볼 건데요
컬러를 연결한다고 하더라도
현재 녹색에 희미하게 자국이 남듯이 표현이 되고 있죠
녹색이 표현되고 있다는 것은
기본적으로 녹색 노드가 문제가 되는데
Emissive Color에 컬러 값을 주기 때문에
이 Base Color를 무시하고
Emissive Color에 연결된 컬러가 보이게 되는 것입니다
그래서 Base Color를 보여주고 싶다면
Emissive에 있는 컬러를 블랙으로 만들면
이렇게 베이스의 컬러를 볼 수가 있게 됩니다 보이시죠?
마찬가지로 이 빨간색도 완전히 새빨간색이 아니라
조금 어두운 갈색 느낌으로 살짝 바꾼다면
좀 더 어둡게 가겠습니다
이게 워낙에 블랙의 표현이 잘 안 되기 때문에 이런 겁니다
이런 식으로 벽돌의 이미지와 어울리는 이런 갈색
채도를 조금만 더 낮추면
이런 식으로 조금 더 어울리는 색상이 나오겠죠
원래 질감을 우리가 표현하고자 하는 질감과 유사한
Lerp A에 들어가는 것은 Base Color와 어울리는
그리고 Lerp B에 들어가는 건 블랙인데
사실 블랙이라고 하면 0 값이기 때문에
별도의 노드가 필요하지 않습니다
얘를 Delete로 지워도
Lerp B에 들어가는 값만 0이라고 입력해 주면
블랙이 되기 때문에
그래서 우리는 이렇게 질감 표현을 위해서
간단한 세팅을 해 봤고요
여기에 있는 백 사이드에 보이게 될 컬러를 우클릭해서
Convert to Parameter를 이용해서
BackSideColor라고 이렇게 지어주겠습니다
그럼 나중에 파라미터에서도
텍스처를 바꿀 때 적용해 볼 수가 있겠죠
마찬가지로 텍스처도 오른쪽 클릭해서
Convert to Parameter 해서 BaseTex
노멀맵도 마찬가지로 Convert to Parameter
BaseNormal 이렇게 지정하도록 하고요
그래서 단순히 우리가 만드는 질감이
이런 단색으로 이루어진 박스라든가
단순 기본 도형에만 사용하는 것이 아니라
이런 것들을 응용하면 좀 더 복잡한 형태의 오브젝트에도
응용해 볼 수가 있게 됩니다
저장을 해주고요
Saturate에도 값의 범위를 0에서 1 사이라고
이렇게 설명을 달아놓고요
서서히 사라질 때 이거 인스턴스 창에서 보여드리겠습니다
서서히 사라지게 만들 건데
여기서 이런 식으로 서서히 사라지게 될 때
좀 심심하죠 심심하기 때문에
여기에다가 약간 빛나는 효과를 하나 만들어 줄 겁니다
잠시 노드를 뒤로 좀 빼겠습니다
이렇게 반쯤 보이는 상태에서
얼룩의 패턴을 좀 볼 건데요
제가 녹색으로 현재 얼룩의 패턴을 간단하게 그려보겠습니다
이런 식으로 얼룩의 패턴이 잡혀있죠
이 얼룩의 가장자리에 우리는
약간 빛을 내는 효과를 넣는다고 가정해 보겠습니다
이렇게 빛을 내는 효과 가장자리에만
마치 어떠한 질감이 타들어가는 듯이
이렇게 가장자리에만 빛을 낸다고 가정을 해 보면
빛이 나야 될 영역을 골라주는 기능을
우리가 만들어 줘야 됩니다
그렇기 때문에 이거는 간단하게
VisibleVal와 Step을 이용해서
값의 변화를 잘 보세요
0.6일 때 현재 바운더리고요
만약에 이 수치가 0.7이 된다면
혹은 0.8이 된다면 보이는 영역이
이거 잠깐 가리고 보겠습니다
이런 식으로 조금씩 줄어들게 됩니다
0.9가 되고, 0.5와 0.6, 0.7, 0.8, 0.9
이런 식으로 점점 수치가 커질수록
보여지는 면적이 줄어든다는 걸 알 수가 있죠
그래서 여기에다가 Add라는 노드를 하나 만들도록 하겠습니다
그리고 Add 되는 값은
Scalar Parameter를 이용해서 Edge라고
경계를 찾아줄 수 있게끔 지정해 놓고요
Step 노드를 Ctrl+C, V로 복사를 해 준 다음에
A에 들어가는 것은 이렇게 연결해서 Step Y에다가 하고요
그리고 Noise 텍스처 이거
Noise 효과는 그대로 가지고 와서
Step X에다가 똑같이 위에 있는 것과 연결해 주겠습니다
설명을 위해서 VisibleVal만 연결된 Step은 Wide라고
넓은 영역이라고 표시를 해 놓고요
Edge와 더해진 Step은 Thin이라고 해서
이게 좁은 영역이다라고 표시해 놓겠습니다
그러면 우리가 이러한 경계를 찾고자 한다면
결국엔 넓은 영역에서 와이드한 녹색의 영역에서
빨간색의 좁은 영역만 빼준다면
우리는 밝게 빛나야 될
얇은 띠 같은 이미지를 얻을 수 있게 됩니다
그래서 Subtract라는 것을 이용해서
빼기죠 넓은 영역에서 좁은 영역을 얇은 영역을 뺀다
이렇게 설정해 주시고
이것을 Opacity Mask에 가지고 가보면요
현재는 Edge 값이 0이기 때문에 같은 값을 뺀 거라서
사실상 아무 면적도 보이지 않죠
그래서 Edge 값을 0.03 정도로만 약하게 두겠습니다
이제 화면에 스케치는 지우고
그렇게 되면 이 화면에 보이는 것처럼
아주 얇은 띠 같은 것이 보이시죠
만약에 Edge 수치가 훨씬 더 커진다면
0.05라든가 0.1이 된다면
점점 두꺼워지는 걸 보실 수가 있습니다
이 띠 같은 영역은 나중에 우리가 Lerp에다가
Emissive Color에 연결되었던 Lerp 항목 있죠
여기에다가 한 번 더 Lerp로 연결해 줄 겁니다
현재 눈에 보이고 있는 건
1이라는 값이기 때문에 눈에 보이는 거라서
Lerp에 띠에 보이게 될 곳에다가
우리는 밝게 빛날 컬러를 지정해 줄 수 있습니다
Vector Parameter를 이용해서
Emissive Color로 노드 이름을 지어주고
이 노드에 들어가는 Default Value를
빨갛게 빛나도록 레드 8, 그린 1, 블루 0.2 정도로 해서
밝게 빛나게 이렇게 두고요
Subtract 한 결과를 Alpha에다가 전달해 줄 겁니다
그럼 Lerp가 총 두 번 일어나게 되죠
앞면과 뒷면에 대한 Lerp
그래서 뒷면에다가 우리는 이렇게 단색으로 칠해주게 된 거고
그러고 나서 밝게 빛나는 이 영역에다가
한 번 더 Lerp 해서 Emissive Color에 연결하면
띠 부분이 이렇게 밝게 빛나는 걸 확인하실 수가 있습니다
지금과 같은 상태에서 이 구멍 난 부분들은 보이면 안 되겠죠
그러니까 당연히 넓은 영역을 보여줘야 되니까
Wide 항목을 Opacity Mask에 다시 연결을 해주면
이제는 지금 보시는 것처럼
얇게 띠처럼 해가지고 밝게 빛나는 영역과
안쪽에 Base Color가 보이는 영역
그리고 안쪽으로 백 사이드에서 보이는 영역까지
모두 구분되어 있는 것을 확인하실 수가 있습니다
저장해 주고요
이것을 지금 인스턴스 창에서 미리 보기를 해 볼 건데요
NoiseScale하고 Edge 값을 활성화시키고
EmissiveColor, BackSideColor도 모두 다 활성화시켰습니다
그리고 우리가 Base Color도 텍스처, 노말 모두 다 해놨죠
모든 항목을 다 활성화해 놓고
우선 VisibleVal에 의해서 안 보이고, 보이고
우리가 지정한 임의의 방향에 따라서 보이고, 안 보이고를
이렇게 VisibleVal 값으로 정해줄 수가 있고요
Edge의 값에 따라서 값이 커진다면 당연히
Edge의 두께가 가까이서 보시면
점점 두꺼워지는 걸 확인하실 수 있죠
얇게 한다면 근데 이렇게 너무 얇으면
멀리서 봤을 때 오히려 자잘해 보여서
살짝 두께감이 있는 게 낫습니다
살짝 이렇게 두께감 있게 표현해 주고요
Noise Scale을 통해서
Noise Scale 값의 숫자를 키우면 점점 커지게 돼서
Noise가 점점 자잘해지죠 이런 식으로
멀리서 보면 마치 별 같죠
Noise 값을 마이너스 값보다는 조금 크게
이렇게 0.03 이런 식으로 해두면
마치 찢어진 것처럼 이런 식으로 보이게 됩니다
여기에 있는 벽돌 대신에 여러분들이 원하시는 다른 텍스처
이왕이면 노멀맵과 같이 세트로 쓸 수 있는 텍스처들이 있겠죠
이런 잔디밭 같은 것이 있다면
이 잔디밭을 BaseTex와 BaseNormal에다가
이렇게 각각을 다르게 연결해 주고요
이런 식으로 그럼 마치 잔디가 서서히
원래 이렇게 평평하게 있던 잔디가
서서히 타들어가면서 사라지는 것과 같은 효과
그리고 그 모양이 어떤 형태의 메시가 됐든
그 방향성을 잃지 않고
내가 Direction에서 지정한 임의의 방향
사라지는 방향을 위에서 아래로 표현을 하든
아래에서 위로 표현을 하든
이렇게 쭉 사라지는 방향도 우리가 정할 수가 있겠죠
이런 식으로 오브젝트가 가지고 있는 좌표 값이라는 것을 통해서
Local Position, Noise에도 활용해 봤고
바운딩 박스로도 활용해 봤습니다
3D 오브젝트가 가지고 있는 위치 값
Local Position을 이용해서 다양한 방향으로 자연스럽게
트랜지션 될 수 있는 원리에 대해서 배웠습니다
내적이라고 하는 수학 공식을 시각화하는 방법을 이해한다면
디졸브뿐만 아니라 다양한 효과를 만드는 데
응용이 될 수 있습니다
그럼 이번 시간 학습한 내용을 정리하면서 마무리하겠습니다
감사합니다
머티리얼 및 바운딩 박스 생성
머티리얼 생성 M_PosDissolve 머티리얼 생성
Blend Mode : Masked로 변경
BoundingBoxBased_0-1_UVW 노드 생성
RGB 값을 Emissive Color에 연결하면 좌표값에 따라 색이 적용된 것을 볼 수 있음
바운딩 박스 생성 높낮이(Z축)은 파랑, 좌우(Y축) 녹색, 앞뒤(X축) 빨강
Scalar Parameter 노드 생성 (VisibleVal)
바운딩 박스 노드와 Add 후 Opacity Mask에 연결
머티리얼 인스턴스로 만들어서 밸류에 의해서 방향성을 가지고 디졸브 되는 것을 확인
내적을 활용한 방향 전환 및 다양한 효과 연출
Noise 효과 Local Position 노드 생성 후 Multiply에 연결
Noise 노드와 Dot 결과를 Add Add를 Step X에 연결 후 Step의 결과를 Opacity Mask에 연결
비교해야 할 벡터가 기준보다 훨씬 큰 경우 노멀라이즈가 필요함 VisibleVal 노드 기본값을 0.5로 설정
컬러 및 질감 표현 Constant3Vector 노드를 2개 생성
2개의 Constant3Vector를 Lerp A, B에 각각 연결
StarterContent - Textures 폴더에서 T_Brick_Clay_Old_D 가져온 후 Base Color에 연결
Lerp A에 연결된 색은 Base Color와 어울리게 설정함
Lerp B에 연결된 노드 삭제 후 Lerp B 값을 0으로 설정
디졸브 엣지 빛나게 하기
VisibleVal과 연결되는 Add 생성
새로운 Step 노드 생성 후 Add 결과를 Step Y와 연결
Noise 노드와 연결된 Add 결과를 Step X와 연결
Wide Step을 Subtract A에, Thin Step은 Subtract B에 연결
새로운 Lerp 생성 후 Lerp Adp BackgroundColor와 TwoSidedSign과 Lerp된 결과를 연결
EmissiveColor 노드의 Default Value RGB 값을 (8, 1, 0.2)로 설정
Wide Step을 Opacity Mask에 연결