본 글은 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 가 툴에 대한 자세한 설명이 있는 링크를 포스팅 했어.

Plateau-Mont-Royal: émondage au-dessus des Bixi
COURTOISIE/PIERRE ROGUÉ


Un cycliste dénonce le comportement d’employés de la Ville de Montréal ayant procédé à l’émondage d’un arbre mardi matin, sans avoir sécurisé le chantier, à l’intérieur d’une station de BIXI ouverte au public.


dénonce : denounce (비난하다, 고발하다)

comportement : behavior, performance

ayant - avoir : to have, to get

procédé : process

émondage : pruning (가지치기)

arbre : tree

chantier : site, building site, roadworks

sécurisé - sécuriser : to give a sense of security to, to reassured, secured


A cyclist denounce the behavior of employees of the Montreal city having processed to pruning of a tree Tuesday morning, without having secured the site, in the interior of a BIXI station open to the public.




Pierre Rogué, coordonnateur de la campagne «Une porte, une Vie», était consterné en assistant à cette scène surréelle mardi matin à l’intersection des rues Marquette et Rachel de l'arrondissement Plateau Mont-Royal.


coordonnateur : coordinator (조정자, 진행자)

consterné - consterner : to dismay (실망, 경악)

surréelle : surreal

arrondissement : district


Pierre Rogué, coordinator of the «One door, One life» campaign, was dismayed assistant in this surreal scene Tuesday morning at the intersection of the Marquette and Rachel streets in the Plateau Mont-Royal district. 




«Il y avait des gens qui se dirigeaient vers ce camion pour aller chercher un BIXI dans la station. Pendant ce temps-là, le camion soulevait au-dessus d’eux d’énormes rondins de bois. Ma première réaction a été de me dire, mais merde, c’est quoi ce bordel», a-t-il affirmé.


il y avait ~ : there was

dirigeaient : to manage, to conduct, to supervise

se dirigeaient : to find one's way, to make for, to head for (se dirigeaient : heading for)

vers : line, toward, about

camion : truck

aller chercher : fetch (가지고 오다, pick up)

soulevait - soulever : to lift, to send up, to arouse

au-dessus : above

dessus : on top, top

rondin : log

eux : them

énorme : enormous, huge

bordel : bloody mess, goddamn mess


«There were people who heading for this truck for fetch a BIXI in the station. During this time (Meanwhile), the truck lifting above them a huge logs of the wood. My first reaction was said myself, real shit, what is it bloody mess» he said.


Plateau-Mont-Royal: émondage au-dessus des Bixi

COURTOISIE/PIERRE ROGUÉ

M. Rogué ajoute qu’il ne comprend toujours pas pourquoi la Ville de Montréal, en 2018, n’arrive pas à respecter sa responsabilité civile de sécuriser le périmètre de ses chantiers comme la loi lui demande.


toujours : always, still

loi : law, rule

périmètre : perimeter (주변, 주위)


M. Rogue added that he still can't understand  why the city of Montreal, in 2018, don't respect the civil responsibility to secure the perimeter of roadworks as the demanded law.



Appels sans réponse

Call without response

En fin de journée mardi, l'arrondissement Plateau-Mont-Royal n'avait pas été en mesure de répondre aux questions du «24 Heures».Marianne Giguère, responsable du transport actif au sein de l'administration Plante, a toutefois commenté sur Facebook une publication par rapport aux clichés de Pierre Rogué montrant la scène du chantier dangereux pour les clients de BIXI.


sein : breast, within

plante : plant

rapport : report, connection, link

été en mesure : been able 

toutefois : however

montrant : to show


At the end of Tuesday, the Plateau-Mont-Royal district hadn't been able to respond the questions of «24 hours». However, Marianne Giguère, responsable to active transportation at the Plante administration, commented on Facebook a publication by report Pierre Rougué's pictures to show the dangerous roadworks scene for the clients of BIXI.




«Normalement, lorsqu'il y a de l'émondage, une personne reste au sol près du camion pour assurer la sécurité des gens. Je comprends que ce n'était pas le cas ici? Avec les photos, on ne sait pas ce qui se passe nécessairement», écrit-elle.


cas : case 

sait - savoir : to know

écrit : written

sécurité : security, safety

près : near

sol : ground, floor, soil

se passer : to happen


Normally, when there is pruning, a person stay on the ground near the truck for assure the safety of people. I understand that was not the case here? With the photos, we can't know what happened necessarily, she written.




Mme Giguère a aussi affirmé que l’arbre est tombé lundi matin «de sa belle mort».Pierre Parent, directeur du marketing de BIXI Montréal, a souligné que la station BIXI en question sur les clichés n’a pas été abîmée durant l’opération d’émondage et qu’aucune personne n’a été blessée en sa connaissance.


souligné - souligner : to underline

abîmé : damaged

tombé - tomber : to fall


Ms. Giguére also said that the tree was fell Monday morning «to beautiful dead». Pierre Parent, marketing director of BIXI Montreal, underlined that the BIXI station in question on the pictures was not damaged during the pruning work and no one was injured as he knows.


'Translate > French' 카테고리의 다른 글

Plateau-Mont-Royal: Pruning avobe the BIXI  (0) 2018.07.05
Montréal: never recorded heat on 2, July  (0) 2018.07.04

+ Recent posts