본 글은 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 을 가져."

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


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

I appreciate again to Simon's permission. :)


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






몇몇 사람들이 폴리카운트 스레드에서 홈월드 구체 (관련 아티클) 를 어떻게 만들었는지 물어봤었어. 자 한번 같이 해보자! 우리가 여기서 쓸건 Modding tool 들이야. 이게 원래 렐릭에서 하는 방법이랑 얼마나 비슷한지는 모르겠음.



다운로드

모드 툴 컬렉션을 다운 받고, “HW2BGBuilder” 라는 커맨드라인 툴을 쓰면 돼. “HW2 – Spookysoft – HOD Tool 1.5.0.1” 이라는 것도 있는데, 나는 잘 작동 안하더라.


HOD 뷰어

.HOD 파일을 보려면 “CFHodEdit 3.1.5” 라는 툴을 써야만 해. (.HOD 파일을 열고, 프로그램 하단에 마지막 있는 “Miscellaneous” 탭으로 스크롤하고, “HOD Preview” 라는 버튼을 눌러. ( ※ 번역자는 프로그램을 직접 사용해보지 않아서 정확하지 않을 수 있습니다.)


시작

좋아, 일단 테스트용으로 .TGA 파일을 만들고 우리가 뭘 할 수 있을지 확인해보자. 아마 (1024 x 512, 24bit) 가 잘 작동할거야.



HW2BGBuilder.exe 에 숏컷을 만들고 거기에 텍스쳐를 드래그 앤 드랍 해. 뭔가 계산 되고 난 후에 스페이스 바를 눌러서 프로세스를 진행시켜.

그리고 써내려져가는 숫자를 매트릭스 해커가 된 마냥 지켜보자.



And this is how it looks in “CFHodEdit”. You can clearly see the UV layout of the sphere. Now we know three things:


그리고 이게 “CFHodEdit” 에서 보여지는 모습니다. 구체의 UV 레이아웃을 확실히 볼 수 있지. 여기서 우린 세 가지를 알 수 있어.


첫째, 꼭대기와 바닥의 텍스쳐는 많이 늘어지니깐 디테일을 추가하지말자.

둘째, 경계가 보이지 않게, 텍스쳐의 좌우는 서로 딱 맞물리게 만들자.

셋째, 색상이 원래 텍스쳐보다 밝게 보이는데, 이건 이따가 좀 더 설명할게.





세번째와 관련해서 : 홈월드에서는 구체의 꼭지점에 부드러운 그라디언트만 칠해서 텍스쳐가 늘어져 보이는걸 피했어.  그리고 이런 부분에는 버텍스들의 개수가 굉장히 적어서 버텍스 컬러 그라디언트가 부드럽게 퍼질 수 있게 만들었지. 꼭지점 주위의 도형을 봐봐.





내 생각에 이건 진짜 쩔어. 디테일을 수평선 부근에만 집중적으로 사용해서, 유저는 (아마도) 절대 방향을 잃지 않을거야.


이제 진짜 텍스쳐를 사용해보자. 그 전에, 아웃풋 레벨을 255에서 128로 줄여야 해. (Photoshop > Image > Adjustments > Levels).



Level Output: 255



Level Output: 128



일련의 과정들을 거치고나면, 프로그램에서 구체를 생성할 때 사용하는 "_ref.TGA" 라는 엣지 맵을 얻게 될거야. 이게 참 흥미로운데, 내 생각엔 이 사각면들은 프로그램에서 계산한 후에 생성되는 것 같아.



Edge Map



이게 뷰어에서 보여지는 엣지맵이야. 특히 큰 산 꼭대기 근처에 색이 막 줄줄 흐르는게 보일거야. 

내가 “HW2BGBuilder” 의 모든 세팅을 다 만져보진 않았는데, 아마 좀 더 좋은 결과물을 만들 수 있는 방법이 있을거야. 근데 내 생각엔 이 정도도 충분히 괜찮은 듯.



소스 텍스쳐의 해상도가 구체끼리 겹쳐지는 부분과 폴리곤 개수에 영향을 줘.




마지막 설명은 좀 기술적인 것일 수 있는데. 만약 내가 잘못 설명했으면 말해줘. 그게 내가 수학이랑 작별하고 그래픽 디자이너가 된 이유야. :)


- 1 픽셀이 저장되기 위해 24 Bit / 3 Bytes 가 필요함. (RGB, 각 채널은 8 bit 를 가짐)

- 1 버텍스는 위치 값 (XYZ) 와 버텍스 컬러 (RGB) 가 필요함


이건 만약 니가 엄청 많은 색상 대비와 디테일을 사방 천지에 쓴다면, 그냥 텍스쳐를 쓰는것보다 더 무거운 데이터를 얻게 될거란 애기야. 하지만 홈월드 백그라운드는 대부분 컬러랑 그라디언트로 구성돼있고, 가끔씩 디테일이 들어가있어. 이런 목적이라면 엄청나게 최적화를 할 수 있지.


내가 이 글을 쓰는 동안, Zbrush 에서 어떻게 폴리곤 개수를 줄이는지에 대한 논의가 있었어. Computron 이 결과물을 여기에 포스팅 했네.

아 그리고 poopinmymouth 가 툴에 대한 자세한 설명이 있는 링크를 포스팅 했어.

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


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

I appreciate again to Simon's permission. :)






홈월드 2 – 배경



지금 당신은,



세상에서 가장 아름다운 SF 게임 중의 하나의,



환상적인 배경 아트를 보고 있습니다.



H o m e w o r l d 2




감사합니다.



.

.

.



농담이야. 당연히 이거에 대해 할 말이 있어. 회사에서 우린 가끔 홈월드의 아트를 보고 이 걸작을 만든 장인에게 절을 하고는 해. 예전에 한번 우리끼리 이 배경이 얼마나 아름답고, 멋진 스타일을 가졌는지 얘기를 나눈 적이 있어. 여기에는 뭔가... 뭔가 특별한 디테일이 있거든.





나 이 부분이 뭔가.. 버텍스 컬러 그라디언트 같이 보인다고 했었어. 하지만, 이 도형에 배경을 그대로 그리진 않았을거야, 그치? 내 말은.. 이건 많은 폴리곤을 가진 구체일 수도 있다는 거지.


거기서 대화는 끝이 났었지만 난 뭔가 불만족스러웠어. 적어도 텍스쳐를 한번 보고 싶었지. 그래서 난 Mod tool 을 사용해서 홈월드 2 데모의 데이터를 추출했었지만, 거기에 텍스쳐는 없었어. 그냥 몇 개의 .HOD 파일들 뿐.. 그래서 난 구글링을 통해 .TGA 파일에서 어떻게 .HOD 파일을 추출하는지에 대한 스레드를 찾았어. 거긴에 이런 내용이 있었지 :




"...이미지의 모든 픽셀을 스캔한 뒤, 색상 대비에 따라 새로운 버텍스와 색상을 추가할지 말지 결정한다..."



뭐??!?




만약 이게 진짜라면, 저 배경은 버텍스 컬러란거야?? 운 좋게도 CFHodEdit 을 사용해서 .HOD 파일을 열어 볼 수 있어. 그리고 다른 툴로 와이어프레임 모드를 볼 수 있었지. 자 여기, 진실이 드러났어.





이것은




내가 여태 본 것 중에





제일 쩌는 게임 아트 제작법.





여기 이게 하늘 부분에 어떻게 영향을 미치고 있는지 봐봐. 색상 대비가 낮은 부분에 폴리곤 적은거 보여? 또, 구체 주변에 자세하게 페인팅 된 부분이 어떻게 돼있는지도 보여?





난 지금껏 한번도 이게 이렇게 좋은 결과를 낼 거라고 생각해본 적이 없어. 아, 그리고 이 기술이 두가지 큰 문제점을 해결했다는 점을 잊지 마.


#1 DDS Texture 압축도와 관련된 어떠한 문제도 없음.

#2 실제 시점에서의 더 큰 장점 : 여지껏 엄청 좋은 디테일을 얻기 힘들었는데 (튜토리얼에서 말했듯이 베이스 TGA 는 날카로운 디테일을 갖지 못함), 배경이 원본대로 유지 됨.



...



배경이 너무 많은 노이즈와 디테일을 갖고 있는 게임을 많이 봤는데, 그건 근경 / 중(中)경을 배경에서 제대로 분리해내기가 힘들기 때문이지.

내가 마지막으로 이 기술과 구성의 완벽한 조합을 본 건 디아블로 3 였어. 2.5D 나무에 대해서도 글을 써보도록 할게.


이 구체가 어떻게 생성되는지 더 알고 싶으면, 다음 글을 읽어봐!



읽어줘서 고마워!

+ Recent posts