본문 바로가기

Unity3D/shader_스터디

[쉐이더] 버텍스 컬러 활용

내용 정리

  • 버텍스 컬러란??

 

  • 3D 맥스에서 버텍스 컬러 칠하기
    • Vertex Propertise
    • Vertex Paint
    • UV채널을 이용한 그라데이션
  • 유니티에서 버텍스 컬러 칠하기
    • 3Dmax에서 가져오기
    • Polybrush
  • 버텍스 컬러
    • 추가 묘사, 색 변경
    • 마스킹 레이어
    • UV 애니메이션2
    • 응용?

+ 이펙트, 애니메이션 제작 시 UV침범을 막는 법

 


 요즘 드래곤퀘스트8을 즐겨하고 있습니다. 사실 엔딩 다 봐서 허탈한 상태입니다. 1년 반 동안 오기로 달려서 이제 전체 시리즈의 반 끝냈네요. 최근에는 다 끝내는 게 아까워서 조금 천천히 하고 있습니다.

 

왜 이런 얘기를 했냐면 그냥 오늘 얘기할 내용이 보이길래

 

이런거나
이런 부분

특히 동굴같이 비슷한 패턴, 오브젝트들이 보이는 곳이 많았던 것 같네요.

 

 

 

 

 


 

버텍스 컬러란?

 

버텍스 컬러에 대해 알아가기 전에 3D 모델링을 해봤다면 익숙할 버텍스에 대해 다시 한번 가볍게 짚어보고 갑시다. 

 

버텍스에는 어떤 정보들이 담겨있는가?

위치 공간에서의 위치를 나타내는 2D또는 3D 좌표
색상 표면 색상 또는 라이트맵의 정보를 나타내는 RGB값
반사율 specular, metallic과 같이 표면의 반사,금속성의 프레넬값
텍스쳐 좌표 UV, Texcoord 라고도 불린다. 텍스쳐 매핑을 제어하며 채널을 나눠 복수의 좌표 정보를 저장 가능
노말 법선 백터 등의 정보가 담겨있어 실제 위치와 다르게 보이는 노말, 범프등에 사용
블렌드 가중치 스킨등 골격 애니메이션의 변형을 제어하기 위해 할당하는 가중치

그 외에도 폴리곤, 엣지를 형성하는데도 버텍스의 정보가 필요하며, 스무싱 그룹 같은 기능들도 이어지는 버텍스 간의 정보 차이로 더 자연스러운 형태가 나오게 도와줍니다.

버텍스는 이러한 정보들을 담을 수 있는 데이터의 지점이며, 3D 모델은 정보가 담긴 버텍스들의 집합이라고 할 수 있습니다.

 

 

진짜로 버텍스 컬러란?

 

Unity와 3Ds max에서의 버텍스 컬러

각 버텍스에 RGB 색상 값 또는 알파 값을 선택적으로 저장할 수 있는 기능을 말합니다.

 

버텍스 사이의 색은 버텍스에 지정된 색상 간 선형 보간(Lerp, 그라데이션) 으로 보간 됩니다.

float4(0,0,0,0)의 RGBA처럼 색상뿐만 아닌 알파 값도 버텍스마다 각각 지정할 수 있으며, 이 정보들을 이용해 색을 나타내거나 쉐이더에 입력해서 사용할 수 있습니다. 

 

쉐이더에 어떻게? 색은 숫자고 숫자는 색이라는 것을 잊지 말자

 


3D max에서의 버텍스 컬러

 

버텍스 컬러 사용하는 법 1

 

우선 맥스에서 버텍스 컬러를 확인하려면 오브젝트 우클릭 후 Object Properties에서 Vertex Channel Display에 체크해줘야 합니다. 

 

 

 

 Selection에서 버텍스를 선택한 후 Vertex Propertise에서 버텍스 컬러를 설정할 수 있습니다.

Vertex Propertise에서는 선택한 버텍스의 색상을 지정해 줄 수 있습니다.

 

 

 

버텍스 컬러 사용하는 법 2

 

 버텍스 컬러를 더 편리한 방법으로 자세하게 지정할 수 있는 방법입니다.

 

버텍스 컬러를 적용할 오브젝트를 선택한 후 > Utilities > More > Assign Vertex Colors

 

 

 

버텍스 컬러 할당 툴을 적용하기 전 여러 설정을 할 수 있습니다.

채널에 대해서만 가볍게 설명하고 가겠습니다.

 

 

Channel

버텍스 컬러는 여러 용도로 사용되기 때문에 사전에 할당될 레이어를 선택 가능합니다.

버텍스 컬러로 색상, 라이팅, 알파, ID맵 등 다양한 곳에서 사용할 수 있습니다.

 

Vertex Color- 버텍스 색상 레이어

Vertex Illum- 버텍스 라이팅 레이어

Vertex Alpha- 버텍스 알파 레이어

Map Channel- ID맵의 번호 지정을 위한 레이어

 

채널, 라이팅, 색상 할당 방식, 랜더링 설정 등 자신이 필요한 설정을 마치고 Assign to Selected

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

그러면 Vertex Paint 툴바가 뜨게 됩니다. 

 

여기서도 라이팅의 유무, 채널, 레이어 등 여러 설정을 할 수 있으며, 색을 할당할 버텍스를 선택해 브러시로 빠르게 칠할 수 있습니다. 

 

 

 

+ UV채널을 이용한 그라데이션 

Unwrap UVW에서 채널을 버텍스 컬러 채널로 바꿀 시 UV좌표가 색상 정보로 나타납니다.

이때 만들어진 그라데이션으로 텍스쳐를 만들 수 있습니다.

 

더보기

 

 

 

 

Modifier > Vertex Paint

전체 선택 후 빨간색을 페이트로 부어준 다음 버텍스 페인트 툴바 하단에서 레이어 모드를 Subtract로 바꾸면 붉은색은 검은색만 남고(0,0,0) 위의 노란 부분은 녹색만 남게 됩니다.(0,1,0)

 

이 상태에서 채도(Saturation)만 낮춰주면 빠르고 자연스럽게 버텍스 컬러로 그라데이션을 표현할 수 있습니다. AO나 다른 용도의 텍스쳐로도 사용할 수 있을 것 같습니다.

이러한 과정이나 UV애니메이션의 원활한 작업을 위해서는 UV배치 시 이후의 작업을 고려하며 진행해야 합니다.

 

 

 

 


Unity에서 버텍스 컬러

 

유니티에서 버텍스 컬러 사용하는 법

에 대해 얘기하기 전에 유니티에서 버텍스 컬러 보는 법을 알아봅시다.

 

지금까지 버텍스 컬러를 활용하는 일은 없었는데 이유는?

안 보여서

 

맥스에서 버텍스 컬러를 적용하고 가져와도 유니티에 가져오면 보이질 않으니 어떻게 쓰이는지도 궁금하지 않고, 관심도 안 가진 것입니다. 검색하면 바로 나왔을 텐데!

 

이제라도 알았으니 잘 활용하면 되겠죠. 모르는 건 대부분 구글링 하면 나오네요.

 

 

여기 맥스에서 버텍스 컬러를 입힌 박스가 있습니다. 평범하게 오브젝트를 FBX로 내보내 줍니다.

 

 

유니티로 가져오면? 매우 평범한 박스가 되어버립니다. 버텍스 컬러를 출력해 봅시다.

 

 

 

쉐이더 변경

바로 버텍스 컬러를 보는데 쓸 수 있는 방법입니다. 보통 머티리얼의 쉐이더는 URP > Lit으로 설정되어있는데 Standard Surface로 변경하면 버텍스 컬러가 출력됩니다.

 

 

 

 

 

 

 

 

 

 

URP에서는 쓸 수 없다고 합니다. 레거시에서는 잘 보이네요.

 

 

 

 

노드로 해보겠습니다. 쉐이더를 새로 생성해서 버텍스 컬러를 꺼내 주세요.

바로 알베도에 연결하고 저장해줍니다. 이걸 머티리얼에 적용해주면

 

 

 

 

 

 

 

 


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

버텍스 컬러를 적용시킬 수 있게 되었으니 다시 본론으로 돌아옵니다.

유니티에서는 추가로 인스톨해서 사용할 수 있습니다.

 

Package Manager > Polybrush > Install

 

 

그러고 다시 돌아와서 Tools > Polybrush

 

 

 

이제 폴리 브러시 윈도우가 뜹니다. 여러 좋은 기능들이 많으니 버텍스 컬러를 보기 전에 훑어보고 갑시다. 자꾸 산으로 가도 어차피 나중에 다 쓸 거

 


폴리 브러쉬

 

-폴리 브러쉬 도움말

unity3d.com/kr/unity/features/worldbuilding/polybrush

 

Sculpt on meshes

 

메쉬 조형. 스컬핑이 가능합니다. 브러시의 크기, 강도 등을 조절하고 유니티 내에서 직접 조형을 할 수 있습니다. 미러 기능도 있네요. 

 

오브젝트를 선택한 후 드래그를 하면 폴리곤의 방향을 기준으로 버텍스가 이동합니다. Ctrl을 누른 상태로 진행하면 반대 방향으로 조형이 가능합니다.

 

터레인에서 봤던 기능과 비슷하지만 터레인뿐만 아닌 메쉬들에도 적용 가능하다는 장점이 있습니다.

 

 

Smooht mesh geometry

 

지브러시의 스무스 브러시와 비슷한 기능입니다. 브러시를 설정하여 면을 부드럽게 만들 수 있습니다. 현재 형태에서 오브젝트의 원 위치를 기준으로 다듬어지는데 설정에 따라 다양한 움직임을 유도할 수 있습니다.

 

 

 

 

Scatter Prefabs on meshes

 

터레인의 Paint Details과 비슷한 오브젝트 브러시입니다. 

Current Palette에 메쉬를 드래그해 가져오면 브러시로 사용할 수 있습니다. 

 

뭔가 흐리다 싶었는데 포그 때문이었음.

 

 

Paint Textures on meshes

 

브러시를 이용하여, 여러 텍스쳐를 섞어 쓸 수 있습니다. 그러나 이 기능을 사용하기 위해서는 텍스쳐 블렌딩용 쉐이더가 필요합니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

버텍스 컬러

 

버텍스의 색상을 지정해줍니다. RGBA가 있고 할당 방식은 브러시, 폴리곤, 메쉬 전체 별로 나눌 수 있습니다.

기본색은 흰색 float4(1,1,1,1)으로 되어있으며, 원하는 색상을 골라 칠할 수 있습니다.

Brush                                                            Fill                                                            Flood

 

 

 

전에 제작한 모델링에 버텍스 컬러를 칠해보려고 했으나...

 

위치가 전혀 다르게 나옵니다.

 

 

 

 

FBX 파일을 맥스에서 열고 싹 살펴보니 리깅 된 본이랑 모델의 위치가 틀어져서 난리가 나 있었습니다. 애니메이션을 사용할 예정은 없으니 리깅 데이터를 지우고 reset xform 후 다시 불러와줍니다. 

 

 

이제 잘됩니다.

잘못된 위치정보는 엔진 내 작업에서도 큰 악영향을 끼치니 조심합시다.

 

커서가 캡쳐가 안돼

 

 

 


버텍스 컬러

 

 지금까지 버텍스 컬러를 칠하는 방법에 대해 알아봤으니 어디에 사용할 수 있을지도 확인해봅시다.

단순한 색상, 마스크, 알파 외에도 이곳저곳에서 수많은 방법으로 사용되고 있습니다.

본 가중치로도 적용 가능해 풀, 나무의 애니메이션 연출에 사용할 수도 있으며, 라이트맵 같은 그림자, 하이트 맵, 반사율을 나타낼 때 사용하던 픽셀 텍스쳐를 버텍스 컬러로 대용할 수 있습니다.

픽셀 텍스쳐 보다 가볍기 때문에 파티클 등의 색상 데이터를 넣는데도 사용한다고 합니다.  

 

 

 

 

Pro Builder에서도 버텍스 컬러를 사용하는데, 프로토타이핑에 영역 분할과 시작점과 끝점 등 시각적인 구분을 위해 사용합니다.  

 

 

 

 

이번에는 텍스쳐에 버텍스 컬러를 곱해 추가 묘사를 해봅시다.

버텍스 컬러를 텍스쳐와 함께 머티리얼에 적용하기 위해서는 Multiply를 이용해 줍니다.

 

 

 

 

Multiply만으로도 오브젝트의 얼룩과 AO나 머리 염색 같은 색조 변화 등 다양한 효과를 낼 수 있습니다. 

버텍스가 많지 않으면 경계면이 쉽게 보이기 때문에 브러시 설정에서 Strength로 조절을 하거나 여러 색을 이용해 디더링을 해줄 수 있습니다. 

 

글 서론에 나왔던 드퀘 얘기가 여기서 나옵니다. 사진에 있던 얼룩들도 버텍스 컬러로 묘사된 것 같은데 횃불은 작으면서 벽 전체가 붉게 칠해진 건 버텍스가 적어서 상단 각 모서리에 붉은색을 칠한 거일 수도 있겠네요.

 

 

 

 

Add를 이용하면 밝은 색을 줄 수 있습니다. 빛 받는 부분, 먼지 등에서 활용할 수 있겠네요. 이렇게 여러 함수들을 이용해 외부에서 텍스쳐를 제작할 필요 없이 필요한 부분에 빠른 묘사를 해줄 수 있습니다.

 


 

버텍스 컬러를 이용해 폴리 브러시, 터레인에 있던 Paint Textures를 재현해봅시다.

 

텍스쳐 여러 장과 버텍스 컬러를 준비해줍니다. 먼저 2장의 텍스쳐로 과정을 보고 갑니다.

노말 텍스쳐는 Texture 2D에서 Type Normal 또는 Nomal Form Texture로 불러올 수 있습니다. 

 

 

 

 

 

 

Sphere를 이용해서 둥근돌 덩어리를 준비했습니다.

 

앞으로 마스킹 레이어를 만들어주기 위해 모든 값을 0으로 설정해 주는 과정을 거칩니다. 버텍스 컬러의 기본색인 흰색(1,1,1)에서 검은색(0,0,0)으로 바꿔줍시다.(알파 제외)

 

 

 

 

버텍스 컬러로 빨간색(1,0,0)을 칠해주었습니다. 이 스피어를 Split으로 R값만 가져와 보면 흑백 이미지가 되어 float1의 마스킹 레이어를 만들 수 있습니다. 이런 식으로 RGB 각각 흑백 텍스쳐를 제작해 검은색에 배경 이미지와 세 종류의 텍스쳐를 사용할 수 있습니다.

 

 

 

두 이미지를 섞기 위해서는 Lrpe(선형 보간)를 이용합니다. 두 텍스쳐를 섞기 위해 중간값으로는 Split을 이용해 RGB 중 원하는 값을 가져옵니다. 노말도 같은 과정을 거쳤습니다. 

 

 

 

위와 같은 과정으로 이제 한 머티리얼에 4종의 마스킹 레이어에 텍스쳐를 혼합해서 쓸 수 있게 되었습니다. 

이번에는 4종을 다 사용하고 애니메이션도 적용해봅시다. 텍스쳐 종류가 늘어날 때마다 Lerp를 사용해야 하며, 노드 수도 배로 늘어나기 때문에 정리와 신중하게 텍스쳐를 사용할 필요가 있습니다.

 

 

 

Lerp로 나온 결과를 반복해서 연결해주면 여러 텍스쳐를 섞어서 쓸 수 있습니다.

 

 

 

아직 모르겠는 부분 별표★

사실 아무 생각 없이 Smoothness까지 있는 텍스쳐를 다 쏙쏙 집어넣었었는데 빼두었습니다. 그 이유는 인터폴레이터에 개수 한계가 있다는 것을 뒤늦게 알아차렸기 때문인데

그렇다고 합니다.

인터폴레이터는 한국어로 보간을 뜻한다고 합니다. Lerp(선형 보간)도 인터폴레이터고 각 하드웨어마다 제한은 다르지만 성능을 위해서는 최소한으로 사용하는 게 좋다고 이해하면 될 것 같습니다.

 

 

 

+ 부분 UV 애니메이션

 

한 텍스쳐의 노말만 움직이게 해 봅시다. 방법은 UV애니메이션에서 사용했던 대로 Time값을 UV 더해주면 됩니다. Tiling And Offset으로도 가능합니다. Multiply는 1~0 사이로 속도를 조절하는 데 사용했습니다.

 

 

 

 

 

텍스쳐 부분의 물 애니메이션이나 컨베이어 벨트 같은 부분적으로 움직이는 오브젝트를 제작하는데 도움이 될 것 같습니다. 

 


+응용?

 

 캐릭터 모델링을 하는 사람으로서 간단하게 부분 UV 애니메이션캐릭터에 적용해보려고 합니다. 그동안 한 UV에 여러 텍스쳐를 쓸 생각도 못했지만 이제 아는 게 생겼으니 캐릭터를 더 간지 나게 만들어 줄 수 있습니다. 특히 애니메이션만큼 생동감을 불어넣어주기에 좋은 게 없죠.

 

이 캐릭터는 노말도 메탈릭 맵도 없습니다. 남는 마스크로는 스페큘러 텍스쳐와 AO를 넣어줄까 합니다.

R-애니메이션 마스크

G-스페큘러 텍스쳐

B -AO 텍스쳐

 

게임 이름은 네온 사인 펑크

 

(과정)

더보기

 

얼렁뚱땅 마스크

 

 

 

1,0을 서로 반대로 칠했기 때문에 One minus로 반전한 뒤 연결합니다. 

 

 

큰 차이는 없지만 AO로 목 밑의 그림자나 옷의 주름을 추가로 표현했습니다.

 

 

 

머리 장식 발광 애니메이션

 

애니메이션 파트는 저번 게시글의 풀 애니메이션을 활용, Tiling And Offset으로 UV를 조절해 사용했습니다. 기존 Emission텍스쳐에 마스크와 애니메이션을 추가했습니다.

 

 

중간 결과

 

원하던 결과물이 나왔습니다. 그런데 40% 아쉬운 부분이 있는 것 같아 머리를 굴려보았습니다.

 

 

 

역시 로봇하면 LED조명이지

 

 

 

기존 텍스쳐에 타일링을 이용해서 톤 텍스쳐로 만들어버렸습니다. 이걸 이미션 텍스쳐에 Multiply 해줍니다.

 

 

 

 

 

최종 결과

 

더 사이버틱한 로봇이 되었습니다. 큰 차이는 없지만 더 예뻐졌다는 것에 의의를 둡시다.

이 캐릭터에 적용한 방법을 더 다듬어서 최근에 작업하고 있는 다른 캐릭터에도 적용해볼까 합니다.

 

 

 

+ 마스크를 제외했더니 더 간지나져서 당황함

 

 


++ 불 이펙트 제작시 외부 침범을 막는 방법

 

전 게시물에서 제작한 불 이펙트

자꾸 위아래로 삐져나오는 부분은 어떻게 하면 막을 수 있을까?

고민해봤습니다.

 

 

 

UV는 0~1로 이루어져있으니 0과 1을 넘어가지 않으면 되는거 아닐까?

 

 

 

 

Clamp는 최소와 최대 범위를 정해 특정 범위 값으로 고정 해줍니다.

그렇기 때문에 최소 최대를 0~1로 설정해주면 0이하와 1이상의 UV가 삐져 들어오는 일이 없어집니다.

 

+쉐이더에서 적용하는 방법도 있고, 텍스쳐 자체의 Wrap Mode를 Clamp로 바꿀 수 있다. 

 

+ 나중에 찾아보니 검은 테두리를 텍스쳐에 추가해서 막는 방법도 있다고 하네요.

 

하지만 삐져 나가는건 그대로.. 귀찮으니 그냥 땅에 박아버리는 수 밖에

 

'Unity3D > shader_스터디' 카테고리의 다른 글

[Unity 쉐이더] 색상 연산  (0) 2021.03.08
[Unity 쉐이더] properties 추가  (2) 2021.03.06
[쉐이더]UV와 UV 애니메이션  (0) 2021.01.30
[쉐이더]색깔 놀이2_Lerp  (0) 2021.01.23
[쉐이더] Float과 색깔 놀이  (0) 2021.01.16