캐주얼 게임 3D 배경에서 싸고 가벼운 Vertex Color를 활용하여 다양한 이점을 누릴 수 있다.

1. 캐주얼 배경 그래픽의
Vertex Color 활용법
어디까지 써봤니?
2019/04/15
TAN Study

2. 현재는 자료구조와
쉐이더 배우는 중
13년차 배경모델러
캐주얼 외길 인생
3D 배경모델러 + 어쩌다 TA
07 Actoz soft >
08 Goorm >
10 ncsoft >
15 Kidaptive Asia >
17 NextFloor >
18 Devsisters Mars…
jiyoung.shin@devsisters.com

3. 시작하기 전에
Realistic Iconic
그래픽이 추구하는 것

4. 시작하기 전에
보편성 특수성
Seamless 고정 스테이지
자유시점 카메라 고정 카메라
시간 변화, 날씨 변화 환경값 고정
자동 생성 ：
：
게임에서 요구하는 것

5. “그림 같다” : 원화와 3D가 같은 느낌을 전달한다.

6. “그림 같다” : 원화와 3D가 같은 느낌을 전달한다.

7. 그림과 3D의 차이점
1) 그림은 거짓말을 할 수 있다.
<폭포>
M.C.에셔

8. 그림과 3D의 차이점
2) 3D는 차갑다.
수학적이고 일괄적으로 처리한다.

9. 그림과 3D의 차이점
3) 3D는 차갑다. (또?)
엣지가 칼 같이 떨어진다.
안티 앨리어싱과 색 반사 등

10. 그림과 3D의 차이점
4) 정직하게 만들면, 정직하게 보인다?
카메라 렌즈에 의한 왜곡으로, 형태가 다르게 보인다.

11. 그림과 같아보이기 위한 노력
1) 3D도 거짓말을 칠 수 있어요.
2) 엔진에 올려서 컬러 후 보정
3) 안티 앨리언싱을 쓰면 좋겠지만 아니잖아효? 그럼에도 완화시킬 수 있음
4) 왜곡에는 왜곡으로 승부한다.

12. 1) 3D도 거짓말을 칠 수 있어요.
2) 엔진에 올려서 컬러 후 보정
3) 안티 앨리언싱을 쓰면 좋겠지만 아니잖아효? 그럼에도 완화시킬 수 있음
4) 왜곡에는 왜곡으로 승부한다.
그림과 같아보이기 위한 노력
3D 아티스트의 노가다와 집념
물론 기술적 보조가 되면 더욱 더 좋겠지만..
죄송합니다. 노력하겠습니다T_T

13. 너를 위해 준비했어!
Vertex Color

14. 이번 발표에도 기술이 1g도 없으면 아
쉬우니까..
코드 한 줄 보고 가시죠.

15. Color = DiffuseColor x ( Vertex Color x 2)
코드 한 줄 보고 가시죠.
RGB(128, 128, 128) == float3(0.5, 0.5, 0.5)
두 번 곱하면 DiffuseColor가 나옴

16. Configure Modifier Set에서
Vertex Paint 버튼 추가
Vertex Color 사용법

17. ※ Unity 2017년에
버텍스 알파를 못 쓰는 버그가 있었어요-_-
당시에 쓴 메뉴얼이라
Vertex Color만 가능하다고 썼네요.
..지금은 되나요?
Vertex Color 사용법

18. Display Tab에서 On/Off 설정 가능.
TAN에 올렸던 MaxScript 툴에
Vertex Color관련 기능을 모아놨습니다.
Vertex Color 사용법

19. Vertex Color 활용법_기초
1. 옆면/밑면/그림자 등 형태감을 표현하여, 텍스쳐를 적게 사용할 수 있다.
= 묘사에 더 많은 영역을 사용할 수 있다.

20. Vertex Color 활용법_기초
2. 텍스쳐를 적게 사용하면서 오브젝트의 배리에이션을 줄 수 있다.

21. Vertex Color 활용법_기초
2. 텍스쳐를 적게 사용하면서 오브젝트의 배리에이션을 줄 수 있다.

22. Vertex Color 활용법_기초
3. 맵을 타일 식으로 돌려쓰면서도, 공간감 묘사를 할 수 있다.

23. Vertex Color 활용법_기초
3. 맵을 타일 식으로 돌려쓰면서도,
공간감 묘사를 할 수 있다.

24. Vertex Color 활용법_응용
4. 조명과 주변 물체에 대한 반사, SSS같은 환경요소의 묘사를
싸게 (= 구라로) 할 수 있다.
Vertex Color로 이런 것도 할 수 있다고
20분 정도 대충 만든 거라 허접합니다.

25. Vertex Color 활용법_응용
4. 조명과 주변 물체에 대한 반사, SSS같은 환경요소의 묘사를
싸게 (= 구라로) 할 수 있다.

26. 5. 야밤 표현도 Radiocity로 굽고, VC로 변환해봤다.
Vertex Color 활용법_응용
원화

27. Vertex Color 활용법_응용
5. 야밤 표현도 Radiocity로 굽고, VC로 변환해봤다.
Light 설치

28. Vertex Color 활용법_응용
5. 야밤 표현도 Radiocity로 굽고, VC로 변환해봤다.
Radiocity

29. Vertex Color 활용법_응용
5. 야밤 표현도 Radiocity로 굽고, VC로 변환해봤다.
※ VC로 구웠을 때, 똑같이 가져오지는 못하고 추가적인 보정이 필요하다.
뷰포트 상 Radiocity Vertex Color로 변환 후

30. Vertex Color 활용법_응용
5. 야밤 표현도 Radiocity로 굽고, VC로 변환해봤다.
Radiocity 스타일의 음영
프로젝트 아트톤으로 보정한 음영

31. Vertex Color 활용법_응용
5. 야밤 표현도 Radiocity로 굽고, VC로 변환해봤다.
완성!

32. Vertex Color 활용법_응용
6. 게임에서 Light 적용된 후보정을 포토샵에서 하려면 괴로워요.
최종 텍스쳐
→
?
원화
엔진에 올린 결과를 가지고
다시 후보정을 하면
→

33. 7. 배경 애니메이션, 이펙트 만들 때도 싸게 응용할 수 있어서 좋다.
버텍스 컬러로 색 변화 + 텍스쳐 애니메이션
버텍스 알파로 마스킹 + 알파 텍스쳐 애니메이션
8. 말고도 게임에 블랜딩 수치 조절할 때 쓰거나..
쉐이더 옵션 값들을 Vertex Color R/G/B/A에 대응해서 가져가거나..
이런 건 평소에 자주 사용하실 테니까 😘
Vertex Color 활용법_기타

34. Vertex Color 활용법_기타
카메라의
그림자 마스킹에만
텍스쳐 썼어요.

35. 1. 가볍고 싸다.
2. 후보정에 사용하기에 매우 용이하다.
3. 작업자가 색조/명도/채도 등을 수치적으로 사고할 수 있게 된다.
4. 단지 곱해줬을 뿐인데, 한 가지 기능이 아닌
다양한 용도로 사용할 수 있어, 매우 유틸리티 적이다.
5. 사용하던 사람들이 퇴사해서 노하우가 날라가더라도,
프로젝트에 영향을 미치지 않는다.
+ 나중에 사용하는 사람이 다시 복원할 수도 있다.
x Vertex Color_장점

36. 1. 게임을 기준으로 사용하기 때문에,
Max에서는 마음의 눈으로 보게 된다. → 익숙해짐
2. 특수성과 그림 같음을 강하게 가져갈 때 더 효과적인 것 같다.
→ 후보정을 기본 프로세스로 깔다보니..
3. 작업자의 숙련도에 따라서 활용도가 차이 난다.
x Vertex Color_단점

37. 감사합니다.
Q n A..?