본 글은 Simon 의 Game Art Tricks 연작중 27번째 Article 을 번역한 글입니다.


번역을 허락해준 Simon 에게 다시 한번 감사드립니다.

I appreciate again to Simon's permission. :)


※ Simon 이 작성한 아티클의 느낌을 살리고자, 반말로 작성된 점 양해부탁드립니다.




이 세상엔 내가 영원히 볼 수도 있는 것이 3가지 있어 : 불, 남의 작업, 그리고 디아블로 3 리소스 버블. 

아마 2.5d 나무에 대한 내 아티클을 봤으면, 내가 블리자드 아트 스타일에 푹 빠져 있단걸 알 수 있을거야. 

하지만 오늘 우리는, 디아블로의 수정구를 기이이이잎게 살펴보고, 진실을 찾아볼거야.






Source: Diablo 3



저 이펙트들은 엄청 깊어보여. 엄청 둥글게 왜곡되고, 블러와 샤프니스 효과가 맛깔나게 섞여있지. 먼저 내가 예측한 방법을 살펴보자. 

(1줄 요약 : 둘 다 틀림.)





1번째 Woodway (※ 숲 길 : Simon 이 틀리게 예측한 방법이라서 이렇게 표현한 듯)


폴리 스피어를 반으로 잘라서 표면에 바른다. 왜 이게 틀렸을까? 내가 디아블로3 인게임에서 와이어프레임을 확인해봤는데.. 

이게 버블 모양이 아니더라고! 아래가 내 접근법과 (빨간 구체) 디아블로3의 메쉬 (녹색) 야. 

내껀 960개의 삼각 폴리를 섰는데, 얘네는 218개밖에 안썼더라구.






2번째 Woodway


Neox 한테 물어보니 "구체를 노말맵에 베이킹한 다음에 나머지는 셰이더로 어떻게 한거 아닐까" 라고 하더라구. 좋은 아이디어긴 하지만, 디아블로 파일에서 그런 텍스쳐를 찾지 못했어. 내가 왜 이런 쓰잘데기 없는 얘기로 니 시간을 낭비하냐고?

왜냐면 mikiex 가 Neox의 아이디어와 비슷한 방법으로 멋진 예제를 포스팅했더라구. 내 생각엔 이게 내 다음 아티클이 될거 같아. 

지금은 그냥 이미지를 보고, 세계 지도가 얼마나 멋지게 구체에 래핑 됐는지만 보자. 흑마술 같은건 아니니까 걱정 마.



Source: 007 Legends : Moonraker – Space Port Walkthrough Part 3



자 이제 제대로 얘기해보자.



첫번째 Hellway : “UV Layout”

먼저 "버블" 메쉬의 UVs 를 추출해서 확인해봤어. 아래와 같이 생겼음 : 




UVs 가 일그러져있어. (테두리는 늘어져있고, 중간은 압축돼있음) 자 이제 여기에 체크 패턴을 왼쪽에서 오른쪽으로 흘리면 어떻게 되는지 보자.



완벽한 구체로 보이진 않는데 (모자를 위에서 본 느낌에 가깝지), 대부분의 테두리가 리플렉션 이미지랑 우울한 천사 석상으로 덮여져 있어서 티가 안나.

내가 보기에는 충분히 괜찮아 보여. 사실, 쩔어..



Source: Diablo 3


 



두번째 Hellway : “Geometry”


근데 텍스쳐 하나만 움직여서는 저런 아름다운 깊이감과 움직임을 표현하지 못해. 

D3 model viewer 덕분에 우리는 저게 플랜 하나로 이뤄진게 아니란걸 알 수 있지.



이 텍스쳐가 완전히 다른 색상이랑 패턴을 갖고 있다는거 눈치챘어? 내가 디아블로2 유저라 파일 중에 "Mana" 를 검색했는데, 디아블로 3의 마법사는 "Arcane Energy" 라는걸 쓰더라구. "Mana" 는 위치 닥터가 쓰는거였어.

아무튼 이거랑 비슷한 다른 메쉬가 없는걸보니 이걸 Arcane Energy 에서도 재사용하는거 같아. 


bb0x 가 에너지가 덜 찼을 때 나타나는 선에 대해서 좋은 질문을 해줬어. 이 라인이 왜곡되지 않는걸 봐서, 아마도 두번째 UV를 사용한거 같아.



 


세번째 Hellway : “Textures”

마법사의 에너지에 대한 텍스쳐는 이렇게 생겼어 :



Source: Diablo 3


솔직히, 이게 정확히 어떻게 섞여서 나오는지는 말할 수 없지만 몇 가지 커멘트를 달고 싶어.


#1 

03 번은 02번의 알파채널이야. 4번을 제외한 다른 텍스쳐들은 알파 채널을 갖고 있지 않아.


#2

어떻게 Fluid 텍스쳐가 에너지가 차오른 양보다 좀 더 위에 찍히는지에 대해 엄청 고민해봤는데.

04 번이랑 다른 3개의 작은 텍스쳐들이 level line 에 사용됐더라.



Source: Diablo 3


#3

만약 이걸 드로우콜에 따라 보면 투명한 구체를 볼 수 있는데, 내 생각엔 01번 텍스쳐가 알파로 사용된것 같아. 

다른 것들이 왜 더 늦게 렌더되는지는 모르겠지만, 내 생각에 게임 내에서 어떻게 하는건 아닌거 같아. 




Source: Diablo 3



여기까지야. Simon 은 더 블렌딩과 관련한 더 많은 정보를 찾지 못해서 슬퍼.. 블리자드에서 구체 옆의 슬픈 석상 자리로 채용해줬으면 좋겠다.. 

그럼 쩌는 정보를 바로 옆에서 직접 알 수 있을텐데...


D3TexConv v0.9b & MPQ Extractor & Blender 프로그램들에 감사의 말을 전하고싶어. 이게 없었으면 이 아티클을 쓰지 못했을거야.






[Update]


Julian Love 이 버블의 디테일에 대해서 좋은 얘기를 해줬어 :



"텍스쳐들은 Blended 된게 아니라 다 Multiplied 된거야. 이게 복잡한 색상들의 움직임을 표현한 방법임. Water line (수면에 있는 선) 이 움직이는 방법이기도 하고.  [...] 여기 이게 Water line 의 알파 마스크를 위한 공식이야.


a = tex1.a * tex2.a * 4


그리고, water line 은 UVs 로 인해서 왜곡되기도 해. 근데 그냥 딱 봤을 땐 왜곡되는게 잘 안보일 거야."



내가 셰이더 코드에 대해서 잘 알진 못해서, " * 4 " 가 Multiply 때문에 어두워진 텍스쳐를 밝게 해주는거냐고 물어봤어. 그가 말하길 :



"맞아, " * 4 " 는 텍스쳐를 다시 확 밝아지게 만들어 줘. 그리고 색상에도 똑같이 해주는데, 이 때는 * 2 만 해줌. 이게 색상 공식이야.


rgb = ((tex1.rgb * text2.rgb * 2) * text3.rgb * 2)


Each texture is actually an instance of the same texture, but each stage has a different UV offset, UV scroll speed and UV scale.


각 텍스쳐는 같은 텍스쳐의 인스턴스인데, 각각 다른 Uv Offset, scroll speed, 그리고 scale 을 가져."

+ Recent posts