[CEDEC2010] "아이돌마스터2" 그래픽&애니메이션 프로그래밍 무언가 번역

원문: [CEDEC2010] "차세대 아이돌 마스터"는 이렇게 만들어졌다! 툰 쉐이딩의 개념을 뒤집은 최신 기술이란? (4Gamer)



3년전 개최된 CEDEC2010에서 반다이남코게임스가 발표한 아이돌마스터2 쉐이딩 관련 세션 기사 입니다.

이미 3년이상 된 기술이기 때문에 "오! 신기술!" ...이 아니라 "아, 아이돌마스터2는 이렇게 굴러가는구나" 정도로 보시면 될 듯 합니다.


*1 : 옮기는 과정에서 불필요하다 판단되는 경우 생략하는 경우가 있을 수 있으니 가능하면 원문을 보실것을 추천 합니다.
*2 : 명칭이 한국과 일본에서 사용하는게 다를 경우 아는 범위 내라면 한국에서 사용되는 용어로 사용할...것 입니다(없음 말구요)




세션명 : 차세대 아이돌 마스터 그래픽&애니메이션 프로그래밍 프리뷰
발표일 : 2010년 9월 2일(목) 오후 5시 50분 부터(60분)
수강스킬 : "아이돌 마스터"를 한번이라도 눈으로 볼 것
발표자
1) 마에자와 케이이치(소속: 주식회사 반다이남코게임스 제1 스튜디오 프로그램 디비젼 프로그램 2부 프로그램 6과)
2) 타케우치 다이고로(소속: 주식회사 반다이남코게임스 제1 스튜디오 프로그램 디비젼 프로그램 2부 프로그램 6과 치프)












"아이돌 마스터2" 2nd PV"




[툰 쉐이딩의 역사를 바꾸는 "센시티브 툰"이란?]

강연에서는 먼저 아이마스2가 기존 아이돌 마스터(이하 아이마스1)에서 무엇이 바뀌었는지 그래픽을 중심으로 설명되었다.

구체적으로 무엇이 달라진 걸 까? 우선 그림을 비교한 슬라이드를 보자.




타카츠키 야요이 13살이 타카츠키 야요이 14살이 되었다. 이것만으로 렌더링 품질이 올랐다고 보기엔 조금 부족한 것 같다.

아이마스2는 당연히 3D로 렌더링 된 캐릭터가 사용되었는데, 그림을 그릴 때 애니메이션의 셀 느낌의 그림, 소위 말하는 툰 쉐이딩으로 처리하고 있다. 그 부분이 크게 변화했다고 한다.


일반적으로 툰 쉐이딩이란 어떤 느낌인지 표현한것이 다음의 톤 맵 그림이다.





"표면의 법선 벡터로부터 광원의 방향 정보를 빼낸다" 라는 쉐이딩 기법은 낯선 느낌인데, 뭐 광원과 면의 방향 관계로 밝기를 지정한다 생각하면 될 것 같다. 그래서, 어느정도 밝기를 기준으로 색상을 구분하여 사용하면 1단계 그림자가 적용되어 셀화 같이 마무리되는 셈이다.

이것을 아이마스1에서는 하이라이트에서도 색을 바꾸도록 하여 표현의 폭을 넓혔다. 소위 말하는 2단 쉐도우 셀화같은 느낌은 아니라 정말 하이라이트 부분, 그러니까 밝은 부분에서 다시 나누기를 한 것이다. 실제 그림을 봐도 그런느낌이 든다.







그런데 이것이 아이마스2에서는 어떻게 바뀌었는가? 새로 추가/변경된 요소는 다음 3가지라고 한다.




1) 머리카락의 하이라이트 성분
2) 반사
3) 그라데이션


실제로 뭘 어떻게 하는지는 간략히 비교한 다음 그림을 보면 대충 알 수 있을것이다.





전체적으로 4단계로 나눠진 부분이 부드럽게 이어지고 있고 가장 어두워야 할 부분에서는 오히려 밝아지도록 설정된 것을 알 수 있다. 이 "반사(상단 이미지 하단 4단계 좌측 끝)"라는 표현에 대한 해석은 좀 미묘하지만, 빛이 충분히 퍼지는 장소(예를 들자면 스테이지?)에서 빛이 퍼지는 방향을 1개의 라이트로 지정해야 한다 생각하는게 맞을 듯 싶다. 간단하게 말한다면 "여기서 메인 라이트로 쏜다면 당연히 반대쪽에서 반사되야겠지"라는 것이다. 백라이트는 반드시 써야 하는건 아니지만, 쓰는 사람은 쓰고 있는것 같고 뭐 이래저래 잘 사용되고 있는것은 확실하다.

마에자와씨는 회사 선배로부터 "단순히 반사 팔레트를 할당한거 아냐?"라는 소리를 들었다고 하지만 실제로는 시선 방향과 법선 등을 고려해 고생해가며 만들었다고 한다.




또, 아이마스2의 툰 쉐이딩에서 크게 진화 한 것은 기본적으로 회색 채우기 느낌이 강한 툰 처리에 미묘한 표정을 준 것이다.

일단 사진을 봐 주었으면 한다. 이 "센시티브 툰"이라 명명된 프로세스는 디자이너로부터 "정지 상태에서도 사랑스럽게 보이도록"이라는 요청이 있었기 때문에 개발 된 것이라고 한다. 툰 쉐이딩이라는것 자체가 정보량이 줄어들 수 밖에 없기 때문에 움직일때는 그럭저럭 괜찮아 보이지만 서 있을경우에는 어딘가 부족하게 느껴지는 장면이 적지 않다. 그래서 희미하게 음영이 추가된 것 같다.





다만, "대단하죠!" "이걸 보면 더이상 돌아갈 수 없습니다!" 라고 강하게 어필한것과는 달리 설명이 없으면 뭐가 변한건지 알아차리기 어렵다. 처음에는 "톤 맵 전체적으로 그라데이션이 적용된건가?" 하고 생각했지만 하루카 상의 밑의 그림자를 보면 확실히 셀프 쉐도우와는 다르다고 생각된다. 어쩐지 앞에서 이야기한 신형 툰 처리에 앰비언트 오클루젼 처리를 반복한것은 아닐까 싶긴 하지만 쉐이더에 영향을 주는 패러미터를 바꾸는 것 만으로 적용된다고 하니 그정도로 무거운 처리는 아닐것 같다.

이것의 효과로는 애니메이션적인 느낌을 유지하면서 희미하게 입체감을 주고 있다. 셀화로 말하자면 채색 후 에어 브러시로 마무리를 한 것 같은 느낌이다. 셀프 쉐도우 만으로는 그림자가 생기지 않는 부분은 어떻게 처리한건지 의문이지만, 우연히 법선이 맞아 떨어진 걸 까? 뭐, 어쨌든 꽤 괜찮은 느낌으로 마무리 된 것만은 틀림없다.









[얼굴이 예쁘게 보이도록 고민]



게임에 한정하지 않고 툰 쉐이딩은 일본에서 매우 많이 사용되는 렌더링 기법이다. 많은 툰 쉐이딩 작품에서 가장 실망하는 부분을 꼽는다면 바로 얼굴에 부자연스럽게 그림자가 생기는 장면이 아닐까 한다. 광학적으로야 그림자가 생기는게 올바르겠지만, 결코 자연스럽게 보이지는 않는다. 아미마스2(1도 마찬가지일까?)는 얼굴의 라이팅은 전신과 별도로 처리하여 부자연스러운 그림자가 생기지 않도록 처리했다고 한다.

옆을 보고 있을때는 그림자가 생기도록 처리했지만 정면을 보고 있을때는 절대로 그림자가 생기지 않는다.

이런 자의적인 조작에 대해 올바른것인가 고민하는 사람도 있을수 있겠지만, 이것은 일반적으로 보는 영상작품인 드라마나 영화에서도 당연하게 적용되는 기술이다. 밝은날 야외촬영시 배우의 얼굴에 그림자가 생기는 일은 절대 없다. 카메라에 찍히진 않지만 그 뒤에 반드시 어시스턴트가 반사판을 들고 있는것. 영상작품으로 생각한다면 라이팅을 신경쓰지 않고 만드는건 있을수 없는 것 같다.








[스테이지도 파워 업]





"캐릭터가 있더라도 스테이지가 없으면 춤출 수 없다"라며 아이마스에서 스테이지의 중요성을 강조했다.



아이마스1에서는 스테이지(춤추는 영역)를 중시하여 중앙에 점광원을 두고 주변부로 갈 수록 어두워지는 등 모든것이 스테이지 부분이 주체가 되도록 구성되어 있던 것 같다. 주변부에는 안개 처리를 하고 있는것 같지만 멀리서도 아이돌은 반드시 제대로 보이도록 처리하고 있다.




아이마스2에서는 몇가지 추가요소가 포함되어 있다. 파도, 장난감 기차 같은 움직이는 물체나 야자나무 등 흔들리는 물체가 추가되었고 배경부에는 노멀맵이 사용되어 전반적인 질감이 향상되었다고 한다.

무대에서는 연기나 불꽃같은 파티클 이펙트가 사용되는데, 아이마스2에서는 자사의 아케이드 게임 "데스스톰 파이러츠"에서 사용 된 파티클 엔진이 채용되어 특히 아티스트들에게 호평이었다고 한다.












[캐릭터와 배경의 중첩]



아이마스1에서는 배경위에 캐릭터를 합성하는 형태였으나 아이마스2는

- 소프트 포커스로 캐릭터의 윤곽을 배경과 융합
- 피사계의 심도 처리(배경을 그냥 흐리게 하는 것 같지만...) 추가



같은 처리가 이루어지고 있다. 이것은 아이마스1 발표 후 전문잡지에서 소개한 처리 방식이라고 한다.





배경을 흐리게 하는 것에 대해서는 캐릭터와 카메라의 위치가 가까울경우 배경의 먼곳부터 가까운곳 까지 모두 동일하게 흐려지는 광학적으로 이상한 상태이지만, 솔직히 이런것에 신경쓰는 사람은 그다지 없을거라 생각한다. 뭐, 피사체가 여자인 경우 배경을 흐리게 하는것이라 정해져 있는것 같고, 애니메이션에서도 배경은 2차원적으로 흐리게 하는것에 익숙한 사람이 많을 것 이다.


그건 그렇다 치고, 마에자와씬느 소프트 포커스와 피사계 심도 처리를 모두 넣지 않으면 만족하지 못하는 것 같다. 이 부분은 취향 문제라 생각하지만, 캐릭터의 가장자리 부분의 융합을 중시하는 것은 인상적이었다.






그 외에 블룸 효과나 플레어 처리(바닥 부분이 빛나는 것과 관계있는 모양)가 추가되어있다. 이들은 사실 아이마스1에도 있었던것 같지만 스테이지로 한정되어 있던것이 넓게 적용된 것 같다. 아이마스1의 하얀색 부분은 그냥 흐리게 한다는 느낌으로 소프트 필터를 걸었던것 같은데, 아이마스2에서는 보다 HDR같은 느낌이 나도록 되어있다고 한다.






기본 이미지를 4x MSAA로 렌더링하면서 소프트 포커스, 피사계 심도 조정, 블룸, 플레어등 처리를 추가하고 있다. 물론 60FPS로 움직여야 한다는 것은 절대 양보할 수 없다. 하지만 무대에는 최대 5명이 등장한다...라는 상황으로 성능 향상을 위해서는 약간의 개량만으로는 안되는 상황이라 기본 엔진은 물론 사용되는 미들웨어, 데이터 포맷이나 애셋 관리 방법 등 모든 부분에서 처음부터 다시 만들었다고 한다. "새로워야 2라 부를 수 있고, 새롭지 않으면 2라 부를 수 없다"라고 마에자와씨는 말하고 있다.







그 외 미들카메라인 경우에도 필터를 활성화 하거나, 커뮤니케이션 부분도 개선하거나 "오파이(オパーイ, 사내용어라고 한다)"의 질감을 올리는 등 다양한 개선이 이루어졌다고 한다. 아무튼 돌아갈때 다른건 몰라도 "센시티브 툰"은 기억해달라고 말하는 마에자와씨의 캐릭터에 대한 넘치는 사랑이 반영된 프레젠테이션을 선보였다. 그런 집념이 이정도의 퀄리티로 결실을 맺은 것 이다.










[아이마스2의 애니메이션은 어떻게 만들어지는가]



이어서 타케우치씨가 아이마스2에서 사용되는 애니메이션 제작방법을 보여주었다. 내용은 크게 3가지로

- 땋은 머리 만들기
- 긴 머리 만들기
- 신체의 간섭을 최소화 하기






첫째로 "타카츠키 야요이 14살"의 땋은 머리를 어떻게 만드는 지 보여주었다.

머리카락에는 본(뼈대)가 들어가 있어 힘을 받으면 본이 움직인다. 어디로 움직일지 산출하기 위해 어떤 힘을 가하면 좋을지 예를 들어가며 설명했다.





먼저 머리카락의 본은 모근에서 가까운 것 부터 순서대로이동한다.





그 운동에 관성과 감쇠를 집어넣어본다.





데모 결과는...머리카락이 전체적으로 움직이지 않는다는 느낌. 머리카락의 움직임이 끝 부분까지 전해지지 않는다.






그래서 여기에 중력을 도입. 하지만 이번엔 머리카락 전체적으로 볼륨감이 사라져 버렸다.





그래서 원래 위치로 돌아가려고 하는 힘을 추가한다.





물리적으로 올바른지는 모르겠지만, 이 작업을 통해 꽤 괜찮은 느낌의 땋은머리를 실현할 수 있었다. 추가 된 패러미터는 3가지 뿐. 타케우치씨는 너무 많은 패러미터는 아티스트를 곤란하게 하니 최대한 늘리지 않도록 하는것을 권장하고 있다.



그럼 긴머리는 어떨까?





먼저 땋은 머리를 베이스로 긴 머리를 몇개 다발한다. 이렇게만 하면 흩어지기 때문에 가로 방향으로 탄성을 주어 연결한다. 빠르게 괜찮은 느낌으로 완성되었다.


다음으로 머리카락이 흔들릴때 몸에 박히지 않게 하는 작업이 설명되었다.





머리와 몸의 각 부분을 공(혹은 원통 모양)과 같은 물체와 결합, 머리카락 처리시 다른물체와 부딪히면 그이상 파고들지 않고 그 자리에 멈추도록 한다.


모바일 바로 가기 : http://tvpot.daum.net/v/v45e1HfuoHouo55ohHnoonJ


완성 모습. 이정도의 처리만으로 그럴듯하게 움직이다.





흔들리는것은 아이마스1의 머리카락 등 때문에 도입 한 것이지만, 평판이 좋았다고 한다.


그 덕분에 아이마스2에서는 많은수가 준비되었다고 한다. 사용자가 만든 동영상 등에서 살랑 살랑 흔들리는 머리카락이 나올경우 만들기 잘했다 라고 실감한다는 것. 이번 시연에서는 매우 간단하지만 실제 물리 운동 같으면서도 그렇지 않은 처리로 꽤 그럴듯한 움직임을 보여줬다. 정확성 여부에 대해서는 둘째치고 목표는 충분히 달성했다고 보인다. 이러한 접근방식으로 여러가지를 고민하는것도 좋을지 모르겠다.


















======================

서두에서도 썼지만 문서 자체가 3년전 물건이기 때문에 현 시점에서 안맞는 부분은 다 쳐냈습니다. 또 미묘한 표현에 대해 잘 못 이해한 부분이 있을 수 있기 때문에 가능한 원문을 보시는것을 추천합니다. 이 문서는 어디까지나 그냥 대충보고 "아, 그렇구나" 하는 정도로만 참고해 주세요.


핑백

  • Egloos : 아이돌마스터 아카이브 2014-02-11 21:45:56 #

    ... ] 소프트이미지 사용사례 : 아이돌 마스터(Xbox360) [번역] 소프트이미지 사용사례 : 아이돌마스터2 PV [번역] 세덱2010 아이돌마스터2 그래픽&애니메이션 프로그래밍(원문 : 4게이머) [잉여] 풍유환 [지름] 이메일계정 하나 팠습니다. [잉여] 라이브2D - 아키즈키 리츠코 [잉여] 아이돌마스터 모바일-i ... more

덧글

  • 쿠로시키 2013/11/03 14:38 # 답글

    신발 차세대에선 아마 툰렌더링을 현재 프리큐어 엔딩 만한 그래픽으로 볼수 있을거에요. 헉헉헉헉 흥분되네요
  • KAZAMA 2013/11/03 15:54 # 답글

    아......빨리 마코토를보고싶다 ㅠㅠ
  • 아스파 2013/11/03 18:56 # 삭제 답글

    "오파-이" 라는건 아마도 슴가를 의미하는 용어일 겁니다
댓글 입력 영역

최근 포토로그