4. 버텍스 컬러와 활용

내용이 점점 재밌어지고 있습니다.

 

목차

1. 버텍스 컬러
   - 버텍스 컬러란?
   - 맥스에서 칠해보기
   - 유니티에서 칠해보기

2. 버텍스 컬러 활용
   - RGBA
   - AO 그리기
   - 마스킹
   - 터레인 만들기

3. PBR 그래프
   - 기본 개념

4. 배운 것 합쳐보기
   - 간단한 터레인
   - 물웅덩이

 

 

1. 버텍스 컬러

 

버텍스 컬러란 버텍스 자체가 가지고 있는 색상값들을 말합니다.

하나의 버텍스 당 4개의 값 (R,G,B,A)가 있습니다.

이 색상값들은 엔진상에서 색을 위에 얹거나, 메쉬의 알파를 조절하는 등 여러 군데에 쓰일 수 있습니다.

 

아래 이미지는 제가 이펙트를 만들 때 직접 사용했던 메쉬입니다.

이렇게 위처럼 버텍스컬러를 칠해두면

이와 같은 알파를 적용했을 때 좀 더 자연스럽게 사라지게 됩니다.

 

해당 메쉬를 사용한 결과물입니다.

버텍스컬러를 알파로 추가로 적용했기 때문에 위와 같은 결과물이 나오게 됩니다.

 

이런 버텍스컬러는 모델링 툴에서 칠해 가져가기도 하고, 유니티 내에서 바로 칠하는 방법도 있습니다.

여기서는 맥스, 유니티에서 버텍스컬러를 칠하는 각각의 방법을 소개해드리겠습니다.

 

맥스에서 버텍스칼라 칠하기

 

먼저 editable poly 상태의 메쉬가 필요합니다.

버텍스에 색을 칠해야 하므로 적당한 버텍스를 가지고 있는 메쉬로 만들어주세요.

 

그런 다음, Modifier List에서 VertexPaint를 찾아서 적용해줍니다.

 

VertexPaint라는 UI가 팝업되었을 텐데, 거기 있는 메뉴들을 이용해서 버텍스에 색을 입혀주시면 됩니다.

만약 팝업이 뜨지 않거나 실수로 끄셨을 때는 오른쪽의 Parameters 밑쪽의 Edit 버튼을 눌러주시면 다시 팝업이 뜹니다.

 

아래 이미지는 VertexPaint UI에 대한 설명입니다.

 

 

 

씬 창에서 버텍스 컬러가 보여야 하므로, 아래 gif처럼 버텍스 컬러를 보이게 하는 옵션을 선택해주세요.

 

붓을 선택하고 그리면 이렇게 잘 그려집니다.

선택 모드를 vertex/polygon/element 셋 중 하나로 선택한 뒤 칠하기를 시도하면 안 될수도 있습니다. 그럴 때는 선택된 요소들에만(예를 들어 버텍스라면 선택된 버텍스에만) 칠해지기 때문에, 칠하고싶은 곳을 미리 선택한 다음에 칠해야합니다. 다른 곳에 색이 묻지 않게 할 때 유용하게 쓸 수 있겠네요.

 

유니티에서 버텍스컬러 칠하기

 

유니티에서는 Polybrush라는 애셋을 사용해서 칠할 수 있습니다.

폴리브러쉬 설명

 

 

간단한 설명입니다.

폴리브러쉬는 우선 패키지 매니저에서 다운로드 받아야 합니다.

상단 메뉴에서 Window > Package Manager를 누르고, Polybrush를 찾아 다운로드 받으시면 됩니다.

다운로드가 완료되었으면, 상단의 Tools 메뉴에서 바로 폴리브러쉬를 찾을 수 있습니다.

그런 뒤 Polybrush Window를 누르면 폴리브러쉬 UI가 팝업됩니다.

 

- Sculpt on meshes: 메쉬를 유니티 상에서 스컬핑하듯 변경할 수 있게 해줍니다.

- Smooth mesh geometry: 메쉬를 부드럽게 만들어줍니다.

- Paint vertex colors on meshes : 버텍스컬러를 칠할 수 있게 해줍니다. 오늘 많이 사용할 기능입니다.

- Scatter prefabs on meshes: 메쉬 위에 프리팹을 뿌릴 수 있게 해줍니다.

 

- Paint textures on meshes: 메쉬에 텍스쳐를 칠합니다. 오늘 버텍스컬러를 이용해서 이 기능을 직접 구현해볼 것입니다.

 

각각에 대한 설명은 여기로 가시면 더 자세히 보실 수 있습니다.

 

+

 

 

기본적으로 버텍스컬러를 칠하면 이런 식으로 버텍스끼리 lerp되어서 색이 표현됩니다.

 

 

2. 버텍스 컬러 활용

 

맨 처음에 언급했듯 버텍스 컬러는 엔진상에서 메쉬에 색을 얹거나, 메쉬의 알파를 조절하는 등 여러 군데에 사용됩니다.

 

지금까지 텍스쳐의 R,G,B,A를 다루는 방법을 계속 알아보았고, 그 것들이 '숫자' 라는걸 계속 떠올리면서 이것저것 만들었습니다.

버텍스 컬러도 이것과 완벽히 동일합니다. Multiply, Add등 간단한 연산 노드는 물론 Split이나 Combine 노드도 사용할 수 있으며 컬러를 다루는 방법과 다를 것이 없습니다.

즉 지금까지 배운 걸 똑같이 적용할 수 있다는 이야기입니다.(!)

 

맥스에서 버텍스컬러를 칠하는 것도 좋지만, 우선은 편의를 위해 유니티에서 Polybrush를 이용하는 것으로 하겠습니다. (무엇보다 변화를 바로바로 볼 수 있습니다.)

 

 

 

 

우선은 폴리브러쉬로 버텍스칼라를 칠해보면, 나오지 않는 것처럼 보일 것입니다.

 

셰이더그래프에서 버텍스컬러를 꺼내서 연결해주면 해결됩니다.

일단 이번에는 언릿 그래프가 아닌 pbr그래프를 꺼냅니다. (pbr그래프에 대한 자세한 설명은 뒤에서 하겠습니다.)

 

여기에 버텍스칼라 노드를 꺼내서 Albedo(표면 색을 의미합니다)에 연결하면 이제 잘 보입니다.

 

 

 

그려지는 것도 잘 그려지고요.

 

 

 

 

 

버텍스컬러를 회색으로 그리고 나서,

 

 

이걸 땅 텍스쳐 위에 multiply 하면,

 

 

 

 

이렇게 보입니다.

 

 

 

sphere을 하나 올려보니 완전히 ao처럼 보입니다.

 

실제로 옛날에 이런 식으로 색상 표현을 많이 했고(그림자뿐만 아니라 빛 받는 부분이나, 물 밑 색상도 이런 식으로 표현을 했습니다.), 요즘도 라이트맵을 버텍스컬러로 구워서 가져가는 방법을 쓰기도 한다고 합니다. 텍스쳐를 쓰지 않아 매우 가볍다고 하네요.

 

 

이제 이렇게 버텍스컬러를 칠해놓고, split 노드로 나눠보겠습니다.

 

 

R채널만 Albedo에 연결해서 보면,

 

이렇게 0에서 1까지의 값인 것이 직관적으로 보입니다.

Lerp라는 노드를 기억하시나요? 두 가지 요소를 일정 값에 따른 비율로 계산해서 겹쳐주는 노드였습니다.

 

만약 이 버텍스컬러를 Lerp의 값으로 사용해서 다른 텍스쳐와 lerp 시킨다면?

 

 

 

 

이렇게 합쳐집니다. 왼쪽 상단에 풀 텍스쳐가 나타나는 게 보입니다.

 

 

이 상태에서 씬에 다시 가서 버텍스컬러를 칠하면,

터레인과 굉장히 유사해집니다.

 

터레인도 이렇게 rgba 데이터를 이용해서 텍스쳐를 블렌딩합니다.

그렇기 때문에 터레인을 최대한 효율적으로 사용하려면,

r,g,b,a 채널에 하나씩 들어갈 수 있도록 4개나 8개 등등 4배수 갯수로 텍스쳐를 이용하면 좋습니다.

왜냐면 터레인은 r,g,b,a채널에 하나씩 텍스쳐를 할당하기 때문입니다. 만약 텍스쳐를 5개 쓰게 된다면, 더 늘려서 8개 꽉 채워 사용하는 것이 효율적이겠죠.

 

이제 지금 만든 결과물에 바로 다음에 나올 pbr그래프를 사용하면 좀 더 퀄리티가 높아질 것입니다.

 

3. PBR 그래프

 

pbr그래프 구성요소는 다음과 같습니다.

 

 

- Vertex Position, Vertex Normal, Vertex Tangent: 버텍스 쉐이더에서 사용되는 것들로, 지금은 아직 다루지 않겠습니다.

 

- Albedo: 물체 표면의 색상

 

- Normal: 노멀맵의 그 노멀

노멀맵 적용 전 / 후

 

- Emission: 빛나는 색

 

- Metallic: 물체가 금속인지 아닌지를 1과 0으로 표시

 

- Smoothness: 물체 표면의 매끄러운 정도를 표시

Smoothness 1 / 0

 

- Occlusion: AO(Ambient Occlusion)의 그것, 주변광으로 인한 그림자

AO만 표현한 그림 (출처)

 

- Alpha: 알파 (알파맵의 그 알파)

- AlphaClip Threshold: 알파 반투명이 어디까지 잘려나갈것인지에 관한 것 (나중에 다룹니다)

 

 

모두 여태 했던 것처럼 노드를 이용해 제어할 수 있습니다.

예를들어,

여기에 이렇게 노말맵을 연결해서 아까 만든 곳에 붙이면,

 

 

잘 적용됩니다.

같은 방법으로 스무스니스나 메탈릭 등도 Lerp 시킬 수 있습니다.

 

 

4. 배운 것 합쳐보기

 

이렇게 일정 부분에 원하는 셰이더가 나타날 수 있도록 만들 수 있다면, 다른 곳들에도 응용 가능하지 않을까요?

직접 한번 해봅시다.

 

흐르는 시냇물 만들기

전에 배웠던 UV 움직이기 등을 응용해서, 흐르는 시냇물을 만들고 활용해보겠습니다.

 

 

위 셰이더는 총 3가지의 요소들로 이루어져 있습니다.

1. 굴절되어 보이는 바닥 돌 타일

2. 돌 위로 지나가는 물 커스틱(caustic) - 돌 타일과 add노드로 연결해주었습니다.

3. 물 표면을 표현하기 위한 흘러가는 노말

 

 

간단하게 노말을 이용하고 스무스니스를 1로 조절해주면, 물이 위로 지나가는 것 같은 표현이 가능합니다.

 

이제 저 노드를 위에서 만든 버텍스컬러 셰이더에 Lerp를 이용해서 연결해줍니다.

 

먼저 알베도 부분입니다.

아까 만든 부분에, 새로 lerp를 이용해서 강의 알베도 부분을 연결해주었습니다.

 

노말 부분도 같습니다.

 

저는 G채널에 위에 만든 물을 연결해주었습니다.

정상적으로 물이 칠해지는 것을 확인할 수 있습니다.

 

위 gif에서 버텍스컬러를 칠한 것을 보면 이렇게 되어있습니다.

 

plane들을 여러개 붙여서 넓게 만들어보았습니다.

 

이렇게 버텍스컬러를 사용한다면 같은 용도로 텍스쳐를 쓰는 것보다 훨씬 비용이 덜 들겠죠.

 

캐릭터 일부분이 무지개색으로 빛나게 하기

 

같은 방법으로 하나의 오브젝트에 여러 셰이더를 lerp 시켜서 사용할 수도 있습니다.

간단하게 해보겠습니다.

 

아무 모델링이나 준비합니다. 전 제 캐릭터 모델링을 들고와봤습니다.

여기서 일부분의 색이 무지개색으로 변하는 쉐이더를 만들어보겠습니다.

 

먼저 색이 무지개색으로 변하게 하려면 이렇게 노드를 만들어주시면 됩니다.

 

특정 색이 시간이 지남에 따라 서서히 변하게 하는 노드입니다.

여기서 Hue노드가 색을 바꿔주는 역할을 하는데, 지금은 간단하게만 만들어보는 것이므로 이 노드에 대해서는 나중에 자세히 다루겠습니다.

 

위에서 했던 것처럼 다음과 같이 원본 텍스쳐와 함께 Lerp를 이용해줍니다.

 

 

아마 버텍스컬러를 칠하지 않은 상태에서는, (위 노드와 똑같이 구성하셨을 경우) 이렇게 전체적으로 색이 변할 것입니다.

 

이제 버텍스컬러를 칠해줍시다. 위 노드에서는 버텍스컬러가 (1,0,0)일 경우 원본 텍스쳐가 나타나도록 해두었으므로 (1,0,0)색으로 일부분을 칠해줍니다.

 

 

잘 나옵니다.

 

이제 이걸 이용해서, 저는 귀, 꼬리부분만 남겨두고 칠해 귀,꼬리가 무지개색으로 빛나는 상태로 만들겠습니다.

 

간단하게 완성되었습니다.

물론 여기에 응용을 더해서, 무지개색 빛나는 부분에 어떤 패턴이 지나가게 하는 등의 효과를 넣을 수도 있습니다.

 

버텍스컬러라는 새로운 요소와 활용법을 알게 되었으니 이제 예쁘게 만드는 일만 남았네요. 저도 이번에 공부하면서 새로 알게되어서 앞으로 많이 활용할 것 같습니다. 마스킹 용 텍스쳐를 따로 만들지 않아도 되는게 정말 마음에 듭니다.

 

 

 

 

 

 

+

추가로 만들어보았습니다.