본 아티클은 UI 및 간단한 VFX 제작에 도움이 될만한 Graphics 에 대한 이해를 돕기 위해 작성했습니다.


아직 한참 공부가 필요한 입장에서 이런 글을 쓰는 것이 혹여나 잘못된 정보를 퍼뜨리지 않을까 불안합니다만.

많은 분들이 게임 그래픽을 쉽게 이해하는데 도움이 되길 바라는 마음으로 작성해봅니다.

혹시 잘못된 부분 지적해주시면 고치도록 하겠습니다.


추후에 실제 Shader Code 작성 및 VFX 제작을 위한 튜토리얼도

시간님이 허락하신다면... 제작해보도록 하겠습니다.


매끄러운 전달을 위해 반말로 작성된 점 양해부탁드립니다.

문의 사항은 포스팅에 댓글로 적어주시면 최대한 답변 드리겠습니다.


감사합니다. :D





3편 - UV 응용 및 결론



똑똑한 독자들의 목소리가 들리는듯 하다.


"이 UV 이미지를 왜곡 시키면 신박한 결과가 나오지 않을까?"


그러하다.

아래의 예시들을 살펴보도록 하자.




[ 둥근 띠 모양으로 수정된 UV map 에 Texture 를 흘렸을 때 ]




[ Stripe 같은 형태로 수정된 UV Map 에 Texture 를 흘렸을 때 ]




[ 포토샵에서 Smudge Tool로 문지른 UV Map 에 Texture 를 흘렸을 때 ]



각 예시들을 살펴보면, 형태와 무관하게 UV의 좌표값 (색상) 에 따라 텍스쳐가 움직이는 것을 확인할 수 있다.


Graphics 에 대해 잘 모를 경우, "이미지가 움직인다" 고 착각하기 쉽다. (내가 그랬었다)

하지만 이것보다는 "각각의 픽셀이 다른 이미지를 표현한다" 고 하는 것이 더 정확하다고 할 수 있겠다.




["픽셀화" 를 몸소 보여주는 북녘의 마스 게임] 



위 이미지에서도 판넬을 든 사람들이 뛰어가는 것이 아니라,

한 위치에 고정된 사람들이 순차적으로 다른 판넬을 들어 이미지가 움직이는 것처럼 보이는 것을 알 수 있다.


자 이제 결론이 코 앞이다. 조금만 힘내자.



《!》 어떻게 하면 폴리곤 하나로 구체를 만들 수 있을까? 《!》



여기까지 성실하게 읽었다면, 이 뒤는 알아서 잘 할 수 있을 것이다.

그럼 이만..




[ 이제 굳이 더 설명안해도 다 알지 않으세요? 쉽죠? 쉽잖아. 네? 그죠? ]

.

.

.


사실 똑똑한 독자들은 이미 다 이해하고 지루해하고 있겠지만,

혹시라도 아직 이해를 못하고 있을 고냥이들을 위해 설명을 덧붙여본다.


셰이더로 특정한 효과를 구현하고자 할 때는,

만들고자 하는 결과물을 논리적으로 정의하는 과정이 중요하다.


( ※ 느낌적인 느낌을 좋아하는 아티스트들이 가장 힘들어하는 부분이다 )


그렇다면, 아래의 이미지를 통해 《구체로 보여지기 위한》 특성을 정의해보자.



1. 구체의 형태에 따라 수평으로 왜곡된다.

2. 구체의 형태에 따라 수직으로 왜곡된다.

3. 원형으로 된 영역 내부에만 이미지가 표시된다.



정리하자면, 수평으로 왜곡되는 좌표 값을 X 값에, 수직으로 왜곡되는 좌표 값을 Y 값에 넣어주면 된다.

UV 이미지로 표현하면 아래와 같다.


[ R + G = UV ] 


자, 이제 위의 이미지를 UV 좌표 값으로 사용했을 때의 모습을 살펴보자!



[ 쨘! ]


이 아름다운 구체의 모습이 보이는가.

하지만 뭔가 이상하다.. 구체를 제외한 바깥 부분이 이상하게 반짝거린다.


왜 구체 바깥 부분에도 색상이 찍히는 걸까?



[ 혹시 '이 부분은 검은색이니 색상이 없는게 아닌가?!' 라고 생각했나? ]




[ 닝겐이여... ]



앞서 살펴봤듯이, 검은색 부분도 (0, 0) 의 좌표값에 있는 텍스쳐를 읽어들인다.

그래서 검은색 부분이 전체적으로 같은 색상으로 변화하는 것이다.


그렇다면 구체 영역 내부만 마스킹을 해야할텐데,

이미지는 R, G, B 세 개의 채널로 이루어져있다는 것을 알고있는가?


그렇다. 우리에겐 아직 B 채널이 남아있다...


B 채널을 소중히 꺼내서 흰 원을 그려넣어주자.

그러면 UV 이미지는 아래와 같이 한층 더 영롱해진다.

[ X (R) + Y (G) + Z (B) ]



위에서 얻었던 결과물의 알파채널에 B 채널을 입력해주면,

아래와 같이 구체를 제외한 부분은 깔끔하게 사라진다.




[ 야호! 깔끔하다! ]


( ※ 알파 채널에서 불투명한 부분은 1 의 값을, 투명한 부분은 0 의 값을 가진다. 

그러므로 알파 채널에 B 채널을 입력하면 흰색 부분은 불투명하게 보이고, 검은색 부분은 투명하게 되는 것이다 )



Quad 하나로 수백개의 폴리곤을 절약했다!!

물론, Vertex Shader 에서 추가적인 연산을 할 경우 자원이 더 들어가지만 상황에 따라 때 충분히 사용해봄직한 기술이다.


한가지 주의할 점은, UV 좌표 를 연산할 때와 비교하면

Image 는 정확도가 떨어지기 때문에 충분히 큰 이미지를 사용하지 않으면 노이즈가 발생한다. 


( ※ 하지만 멀리서 빨리 돌리면 안보이지롱 )


평면인 관계로 UI VFX 에 활용해도 좋고,

Billboard로 사용시에는 World map 에도 충분히 사용할 수 있다.



[ 파티클 시스템에 적용해서 Billboard 로 보여지는 이미지 ]




여기까지다.

여기서 이해한 내용을 잘 응용해서 좋은 작품을 만들어내길 기원한다.


언젠가 개발자에게 당당하게 



"되던뒈여?!!?!?" 



라고 외칠 수 있는 그 날이 오기를..





너무 기초적인 내용이라 좀 지루했을 수도 있을텐데, 끝까지 읽어줘서 넘나 감사합니다.

이런 글을 써보는건 처음이라 좀 매끄럽지 못한 부분도 있을텐데 양해 부탁드려요. ㅎㅎ


글에서 다뤘던 결과를 제대로 만들기 위해서는 Graphics 에 대한 이해와 더불어

3d Tool, Game engine, Script, Shader Language 와 같은 여러가지 툴에 대한 숙련도가 필요합니다.


실무적 내용을 포함한 모든 것을 몇 개의 글로 완벽히 설명하기는 한계가 있기에, (읽다 지쳐 포기하실 수도 있으니)

주로 이론과 이해를 도우며 흥미를 돋우는데 주안점을 두고 작성했습니다.


궁금하신 내용 댓글로 달아주시면 확인하는데로 답변 드리겠습니다. :)

질문 사항이 다른 분들에게도 공유될 수 있게 가급적 공개 댓글로 적어주세요.


감사합니다.

  1. 빈센 2018.07.12 17:03

    캬 님 짱입니다요

  2. 2018.07.13 03:39

    비밀댓글입니다

    • 2018.07.13 05:47

      비밀댓글입니다

    • 쿠오 2018.07.13 06:05

      앗 비밀글로 남겼다가 답글 주신게 볼 수가 없네요ㅠㅜ 에고 괜히 비밀글로 남겨서 죄송합니다.

    • Woodorl 2018.07.13 07:24 신고

      헐 안보이는군요 누구한테 보이는 비밀댓글이지ㅋㅋ "안녕하세요! 네 몬트리올에 있습니다! 와우 몬트리올에서 일하시는군요 완전 반가워요ㅎㅎ 영화나 애니쪽 CG 하는 한국분은 많은데, UI 일 하시는 분은 못봐서 더 반갑네요!! 저는 온지 이제 막 6개월차 접어드는데, 오신지 오래 되셨나요?" 라는 내용이었어요 ㅋㅋ wizardkwh@gmail.com 으로 답신 주실 수 있으신가요? 동네 주민인데 친하게 지내요!

  3. 와우쭈 2018.07.13 10:11

    심박한 내용 입니다
    또 없죠?

  4. 어쎄씬 2018.07.13 11:20

    멋져요~ ^_^=b

  5. 코코a 2018.07.13 14:27

    고양이를 입양할까하다가 ...두번 세번 보니 조금씩 알것 같아요. 완전 굿

    • Woodorl 2018.07.13 21:45 신고

      후후후 이제 고양이랑 동등한 수준이 되어가고 있군요

  6. 룡딘 2018.07.14 02:40

    와 개꿀잼이네요.
    계속 연재해주시면 좋겟네요.
    감사합니다.

    • Woodorl 2018.07.18 08:03 신고

      재밌게 읽어주셔서 감사합니다. :D
      다음편도 틈틈히 준비해볼게요!

  7. 궁금궁금 2018.07.30 18:53

    보고 따라했는데 저는 이미지가 시작하는 부분은 확대되고, 끝나는 부분은 축소되더군요..
    알려주실 수 있을까요 ㅠㅠ
    전 아래처럼 만들었거든요..

    fixed4 d = tex2D (_UVTex, IN.uv_UVTex );
    fixed4 c = tex2D (_MainTex, float2(d.r - _Time.x * 0.1 , d.g));

    • Woodorl 2018.08.02 08:31 신고

      음.. 어떻게 되는지 이미지를 봐야 뭐가 문젠지 알거 같아요. 최적화를 위해서는 버텍스 셰이더에서 계산을 해주는게 좋긴 하지만, 적어주신 스크립트에는 문제가 없습니다~!

    • 궁금궁금 2018.08.02 11:07

      도무지 해결을 못 하고 있다가,
      사용하신 노멀맵 캡쳐해서 쓰니 되더군요..;; 그런데 다른 문제로, 지구 이미지의 텍스쳐를 아무리 고해상도를 써도 이미지가 자글자글해서 난감하네요. ㅠㅠ

    • Woodorl 2018.08.02 21:05 신고

      아 저 구형태의 UV맵 말씀하시는거죠? 저 맵을 잘 만들어야 정상적으로 작동해요 ㅎㅎ

      그리고 자글자글해지는건 지구 이미지의 텍스쳐 해상도 문제라기보다는 UV맵 이미지의 문제일 가능성이 커요.

      일반적으로 UV를 계산할 때 사용하는 float 함수형이 표현가능한 수는 "1.2E-38~3.4E38" 인데 E38이라고 하면 0이 38개가 붙는 만큼의 숫자 크기에요. (1억이 0이 8개)

      그에 비해 이미지를 사용할 경우에는 끽해야 512일텐데, 비교할수없을만큼 정확도가 낮죠. ㅎㅎ (1024 이상은 비용이 너무 커지는듯)

      정밀한 표현이 가능한 요소보다는 어느 정도 해상도를 희생해도 되는 (혹은 노이즈를 인지하기 어려울 정도의 연출을 동반한) 것들에 사용하시는 것이 좋을거에요!

    • 궁금궁금 2018.08.03 11:34

      자세한 설명 감사합니다. 다만 작성자님 튜토리얼에 있는것처럼 깔끔하게 한번 만들어 보고 싶어서 그랬어요..ㅋㅋ 다시한번 감사드려요!

  8. 지누쓰 2018.07.31 15:45

    항상 우돌님 작업물 감탄하면서 보고있습니다 ㅠㅠ
    제가 VFX를 생각하고 이것저것 공부해야겠다 라고 계기를 가진 원동력입니다..
    언젠가는 저도 우돌님처럼 되고싶네요!
    회사에서는 UI업무랑 이번주 토요일부터 이펙트 과외랑 C#을 공부하고있는데
    우돌님의 C# 강의도 도움이 되네요! 감사합니다 ㅎㅎ

    • Woodorl 2018.08.02 08:33 신고

      하핫 감사합니다! 저도 아직 많이 부족해서 공부할게 산더미 같은데.. 좋게 봐주셔서 감사합니다!

      후후 UI에 이펙트, C# 까지 하시면 곧 엄청난 괴수가 되시겠군여! 기대하겠습니다! ㅎㅎ 나중에 재밌는 작업 하시면 공유해주세요~!



본 아티클은 UI 및 간단한 VFX 제작에 도움이 될만한 Graphics 에 대한 이해를 돕기 위해 작성했습니다.


아직 한참 공부가 필요한 입장에서 이런 글을 쓰는 것이 혹여나 잘못된 정보를 퍼뜨리지 않을까 불안합니다만.

많은 분들이 게임 그래픽을 쉽게 이해하는데 도움이 되길 바라는 마음으로 작성해봅니다.

혹시 잘못된 부분 지적해주시면 고치도록 하겠습니다.


추후에 실제 Shader Code 작성 및 VFX 제작을 위한 튜토리얼도

시간님이 허락하신다면... 제작해보도록 하겠습니다.


매끄러운 전달을 위해 반말로 작성된 점 양해부탁드립니다.

문의 사항은 포스팅에 댓글로 적어주시면 최대한 답변 드리겠습니다.


감사합니다. :D




2편 - UVW란?




XYZ - 1 = UVW

(충격적인 네이밍 센스.. 역시 개발자들이란..)



UV Coordinate (UV 좌표) 라고 하는 값은 RGB, XYZ 와 같이 UVW 라는 세 개의 값을 갖는다.

하지만 3차원 좌표값을 필요로 하지 않는 특성상 W 값은 제외하고 주로 UV 두 개의 값만을 사용한다.


이것은 텍스쳐가 어떤 좌표에 그려질지에 대한 정보를 갖고 있고,

이미지로 표현하면 아래와 같은 영롱한 색상이 된다.


[ 지긋지긋한 놈.. ]



이러한 색상을 갖게 되는 이유는 각각의 픽셀들이

x 좌표 값을 0~1 까지, y 좌표 값을 0~1 까지 갖고 있는 두 값을 묶어서 (RGB로 표현하면 (x값, y값, 0) 이 된다) 저장하기 때문이다.


( ※ 일반적으로 UV 좌표 값은 2개의 값만 가지는 데이터 타입 (float2, fixed2, half2 등) 을 프로그램 내에서 연산하여 사용한다 )

 float, half , fixed 는 순서대로 값의 정확도에서 차이를 보이는데, UV coordinate 는 정확도를 요하는 값이기에 float 을 주로 사용한다 )

 각 데이터 타입에 대한 설명은 본 아티클의 난이도를 넘어가므로, 이 글에서 다루지 않는다 )


다양한 해상도의 텍스쳐를 모두 문제없이 불러들여야하므로 좌표값의 정확도가 중요하기에,  

저장할 수 있는 정보양에 비해 덩치가 큰 이미지를 사용하기보다는 프로그램 내에서 연산하여 사용하는 것이다.


아래의 그림을 보면 결과적으로 색을 가진 것 같이 보이지만, 

사실 각각의 픽셀들이 (0,0), (0, 0.01), (0, 0.02) .... ~ (1, 1) 등의 값을 표현하고 있다.




[ 각 값 사이에도 무수히 많은 좌표 값들이 존재한다 ]



Pixel shader 단계에서 이 좌표값 (Coordinate) 에 따라 텍스쳐의 이미지를 불러들인다.

간단한 UV scrolling 같은 경우, 각각의 좌표 값에 특정한 속도로 값을 더해주는 개념이라고 생각하면 된다.


이렇게 값을 더해주면 일정 시간이 흐른 후 좌표값이 1을 초과하게 되는데 

이 때 초과한 값을 어떻게 처리하느냐에 따라 아래의 예시와 같이 다르게 보인다.


먼저, 1을 초과한 좌표 값을 다시 0부터 반복되게 하면 해당 픽셀에서 불러들이는 이미지의 좌표값이


0.1 0.2 0.3 0.4 .... 0.8 0.9 1.0 0.0 0.1 0.2 .... 0.8 0.9 1.0 0.0 0.1 0.2 0.3 ....


이런 식으로 반복되게 되고, [스크롤 예시1] 과 같이 보인다.

( ※ Unity Image Setting 에서 Repeated 와 같다고 생각하면 된다 )




[ 스크롤 예시1 - X 값에만 특정한 값을 더해주어 수평으로 움직임 ]



위와 다르게 1을 초과하더라도 좌표값을 초기화하지 않을 때는, 

말하자면 좌표 범위를 초과한 상태가 되고 [스크롤 예시2] 와 같이 마지막 픽셀이 반복적으로 보이게 된다. 

( ※ Unity Image Setting 에서 Clamp 와 같다고 생각하면 된다 )



[ 스크롤 예시2 ]



자, 그럼 UV 좌표에 값이 다른 방식으로 작용했을 때 어떻게 되는지 살펴보자. 



[ UV 좌표 X 1 ~ 5 ]


UV의 Tiling 을 조절할 때에는 UV 좌표 값에 특정 값을 곱해주면 된다.

1보다 작은 수를 곱해주면 확대, 1보다 큰 수를 곱해주면 축소된다고 볼 수 있다.

( ※ 최적화를 위해 나누기는 가급적 사용하지 않는다 예를 들어, a / 10 보다는 a x 0.1 을 사용하는 것이 좋다 )





[ 삼각 함수를 적용한 이미지 ]




이러한 UV 값은 활용하기에 따라 무한한 활용성을 가지는데,

약간의 이해있으면 아래와 같이 이미지 없이 그림을 그리는 것도 충분히 가능하다.



[ Sprite 없이 Shader Language 로만 만든 이미지 in Unity (영상 링크) ]



이제 이 UV 좌표 라는 데이터가

얼마나 많은 활용성을 가진 개념인지 대충 감이 오는가?


이 외에도 Shader 는 수 없이 많은 정보를 이용해서 시각효과를 만들어낸다.

World 에서의 좌표, 카메라로부터의 거리, Vertex가 받는 빛을 활용하기도 한다.


Shader 의 가능성에 설레는 독자의 심장 소리가 여기까지 들리는듯하다


피의 복수의 두번째 장이 끝이났다.

그럼 이제 막장으로 넘어가보록 하자..




궁금하신 내용 댓글로 달아주시면 확인하는데로 답변 드리겠습니다. :)

질문 사항이 다른 분들에게도 공유될 수 있게 가급적 공개 댓글로 적어주세요.


감사합니다.

  1. 와우쭈 2018.07.13 10:06

    복수는 누구에게 하는건지 궁금합니다



본 아티클은 UI 및 간단한 VFX 제작에 도움이 될만한 Graphics 에 대한 이해를 돕기 위해 작성했습니다.


아직 한참 공부가 필요한 입장에서 이런 글을 쓰는 것이 혹여나 잘못된 정보를 퍼뜨리지 않을까 불안합니다만.

많은 분들이 게임 그래픽을 쉽게 이해하는데 도움이 되길 바라는 마음으로 작성해봅니다.

혹시 잘못된 부분 지적해주시면 고치도록 하겠습니다.


추후에 실제 Shader Code 작성 및 VFX 제작을 위한 튜토리얼도

시간님이 허락하신다면... 제작해보도록 하겠습니다.


매끄러운 전달을 위해 반말로 작성된 점 양해부탁드립니다.

문의 사항은 포스팅에 댓글로 적어주시면 최대한 답변 드리겠습니다.


감사합니다. :D





1편 - Vertex Shader & Pixel Shader



스크린 안의 세상이 어떻게 그려지는지 생각해본적 있니




밑도 끝도 없이 UI 부터 까고보는 사람들..



뭐가 잘못된건지 설명도 안해주는 개발자들..




이제 그 설움의 시간에 마침표를 찍고...


피의 복수를 시작해보자..


(미안하지만, 이거 다 읽어도 피의 복수까진 못한다)


.

.

.



총 3개로 이루어진 본 아티클의 목적은 아래의 Custom Shader 에 대한 이해를 돕는 것이다.




[ Custom Shader in Unity ( 영상링크 ) ]




자 그럼 이제 신나고 설레는 Graphics 의 세계로 들어가보자!


여기 이미지가 있다.



[ 유아이 이미지가 이상하다!! ]


이것을 보고 어떤 생각이 드는가?





초보라도 좌절하지 말자. 당연한거다.

중수는 복습하는 의미에서 읽어줬으면한다.

고수님들은.. 여기서 나가주세요.. 초보랑만 있고싶습니다.


이 글의 대상 독자는 초보 - 중수이다. 자신감을 가지자.



[ 출처 좌 : Pinterest, 우 : Alberto Rodriguez ]


Game graphic 에서 화면에 출력되는 이미지들은 Mesh 위에 그려진다. (UI도 예외는 아니다)


Mesh 의 최소 단위는 삼각 폴리 (Triangle Polygon) 인데, 면을 구성하는 점의 최소 개수는 3개이기 때문이다.

( ※ 놀랍게도 점이 2개 이하면 면이 존재할 수 없다! )


우리가 만든 UI도 결국 삼각 폴리의 덩어리 위에 그려지는 것이다.


그렇다면 폴리곤과 픽셀들은 어떠한 과정으로 그려질까?




[ Shader 의 전체 과정. 저 두 놈에만 집중하자 ]



화면에 Graphic 을 출력하는 Shader 에서 우리가 주로 다루는 두 가지 프로세스가 있는데,

첫번째는 Vertex Shader 이고, 두번째는 Pixel Shader 이다.


Vertex Shader 란 Vertex (3d 프로그램에서의 정점) 를 화면에 그리는 과정으로,

3개의 점을 가져와 삼각형 한 판씩을 그린다고 생각하면 된다.


[ Vertex 를 기준으로 렌더되는 폴리곤 ]



Pixel Shader 는 Vertex Shader 단계 이후에 Pixel 을 입히는 과정인데,

이미지를 각각의 픽셀에 그리는 것이다.



[ 해상도를 기준으로 한 픽셀씩 렌더된다 ]



Vertex Shader 같은 경우 Vertex의 개수만큼 연산을 하고,

Pixel Shader 같은 경우 Pixel의 개수만큼 연산을 한다. (256 해상도의 픽셀은 256 X 256 = 65,536 번만큼 계산)






[ Pixel Shader 내에서의 연산은 훨씬 무겁다 ]


이러한 이유때문에 최적화를 위해서 가능한한 Vertex Shader 내에서 연산을 하는 것이 좋다.

Vertex Shader 로 화면에 Vertex 들을 배치하고 난 뒤에, 이미지를 그리는 과정에서 필요한 것이 텍스쳐와 UV 맵이다.


( ※ 둘 사이에 Geometry 를 생성하는 프로세스도 있으나, 본 아티클에서는 다루지 않는다 )

( ※ 당연히 픽셀들이 저렇게 개기는 일은 없다; ]

( ※ 편의상 좌우상하로 표현했지만, 모든 값은 X, Y (3d 좌표의 경우 Z) 를 기준으로 입력되어야한다 )



과연 UV맵은 무엇일까!!

2편이 너무 궁금해지는걸!





궁금하신 내용 댓글로 달아주시면 확인하는데로 답변 드리겠습니다. :)

질문 사항이 다른 분들에게도 공유될 수 있게 가급적 공개 댓글로 적어주세요.


감사합니다.

  1. 와우쭈 2018.07.13 10:04

    재미있어요

본 글은 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

본 글은 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 나무에 대해서도 글을 써보도록 할게.


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



읽어줘서 고마워!

Les Montréalais étaient nombreux à vouloir éviter la chaleur extrême, en ce lundi de canicule, qui correspond au 2 juillet le plus chaud jamais enregistré dans la métropole.


étaient - être : were

vouloir : to want

éviter : to avoid

canicule : scorching heat, heat wave  (Scorching : 모든 것을 태워 버릴듯이 더운)

correspond : 일치하다, 부합하다

enregistré : to record


Many Montrealers were want to avoid extreme heat, in scorching heat of this Monday, which correspond to 2, July the hottest ever recorded in the metropolis.




Le «24 Heures» a arpenté les rues de Montréal pour l’occasion, sous un soleil de plomb, afin de dénicher quelques températures qui sortaient de la norme aux quatre coins de la Ville.


arpenté - arpenter : to pace up and down, to survey

for the occasion : 때때로, 특별한 때

plomb : lead, shot (soleil de plomb : blazing sun)

afin de : in order to

dénicher : to unearth (파내다, 발굴하다)

sortaient - sortir : to go out

norme : norm, standard


The «24 hours» have to survey the streets of Montreal for the occasion, under a blazing sun, in order to find some temperatures that were out of the standard in the four corners (quatre coins = every??) of the city. 




«Je peux pas rester dans mon taxi sans bouger plus qu’une heure, sinon je cuis. C’est infernal», a soupiré Mustafa Daikhi, qui conduit un taxi dont la température ambiante s’élève à 35,6 °C, malgré les fenêtres ouvertes.


rester : to stay, to remain

bouger : to move, to get going

sinon : or, or else, otherwise, if not, except

cuis - cuire : to cook

infernal : infernal (지옥같은), terrible

soupiré - soupirer : to sigh

ambiante : surrounding, ambient


«I can't stay in my taxi without move more then an hour, otherwise I cooked. It's terrible», Mustafa Daikhi sighed, who drive a taxi the ambient temperature is amount to 35.6 °C, in spite of open the windows.




Marco Maldonado, chef du restaurant «le Jardin Nelson»

«Pendant que je travaille, je dois prendre deux douches par jour tellement je transpire. Du jamais vu et pour survivre à la canicule, je bois au moins trois litres d’eau», a ajouté M. Daikhi.


dois - devoir : duty, to owe, to have to do

douches - shower

tellement - so, so much

transpirer : to perspire (땀을 흘리다)


«But I'm working, I have to take two showers per a day I perspire so much. Du jamais vu (never seen??) and for survive in the scorching heat, I drink at least 3 liter of water», Mr Daikhi added.



Dans les cuisines du restaurant le Jardin Nelson, il n’y a pas que les aliments qui ont chaud.


«C’est un véritable four quand on travaille derrière la plaque à cuisson, c’est difficile durant la canicule», a souligné Marco Maldonado, chef du restaurant qui opère une cuisine avec des températures qui tournent autour de 38,8 °C.


véritable : real, absolute

four : oven

quand : when

plaque : sheet, plate

cuisson : cooking, firing

durant : during

souligner : to underline, to emphasize

opérer : to operate on

tournent : to turn, to shoot


In the kitchens of the Jardin Nelson restaurant, there aren't hot food.


«It's a real oven when we working behind the cooking plate, it's difficult during the heat wave.», Marco Maldonado emphasize, chef of restaurant who operate a kitchen with the temperature that to turn around 38.8 °C




Donner des melons d’eau, boire beaucoup d’eau et prendre des pauses dans une pièce munie d’air conditionné fait partie du rituel du restaurant pour traverser les chaleurs intenses.


munie - munir : to equip

pièce : room

rituel : ritual (의식, 절차, 의례)

traverser : to cross, to go through


Give the melon water, drink a lot of water and take a break in a room equipped air conditionner is part of the ritual of the restaurant for go through the intensive heats.



Record historique

Gilles Brien, expert en biométéorologie au Québec et qui a été météorologue à Environnement Canada pendant 33 ans, affirme que la situation vécue à Montréal est sans précédent.


biométéorologie : biomeorology (생물기상학)

météorologue : meteorologist, weather forecaster

affirme : to maintain, to claim

vécue : to live, to be alive

précédent : previous, precedent 


Historical record

Gilles Brien, expert in biometeorology in the Quebec and who were weather forecaster in Environment Canada during 33 years, to claim that the lived situation in Montreal is unprecedented.




«On a déjà enregistré 34,4 degrés pour un 2 juillet en 1963. Et aujourd’hui, on a un record avec 34,7 degrés. Depuis qu’on enregistre les données sur les températures en 1942, c’est le 2 juillet le plus chaud que Montréal a connu», a-t-il affirmé.


depuis : since

donné : given, very cheap

(Feminine noun) les données : the data, fact

sur : on, about


We already have 34.4 °C record for a 2, July in 1963.  And today, we have a record with 34.7 °C. Since that recorded data on the temperature in 1942, this 2 July is most hot that Montreal knew, he said.




M. Brien ajoute que Montréal vit présentement une vague de chaleur historique comme il n’en a jamais vu de sa longue carrière.


M. Brien ajoute que Montréal vit présentement une vague de chaleur historique comme il n’en a jamais vu de sa longue carrière.


vit - vivre : to live

présentement : now

carrière : career

une vague : wave


Mr Brien added that Montreal currently living a wave of historical heat like never seen in a long career.


Marco Maldonado, chef du restaurant «le Jardin Nelson»

«L’autre problème, c’est que ça va s’aggraver au fil de la semaine, il va sûrement avoir d’autres records qui vont être battus. Pour l’instant, il faut surtout s’occuper des dangers pour la population de cette canicule», a mentionné le météorologue.


s'aggraver : to get worse, to increase

fil : thread

au fil de la semaine : over the week.

battus : to beat

surtout : above all, especially

s’occuper : to occupy, to be in charge of, to deal with.

instant : moment

il faut : must, (devoir)


«The other problem, it's going to worse over the week, the weather will surely have another records that will be beaten. For the moment, we must above all to be in charge of the danger for the population of this scorching heat», the forecaster mentioned.





Benoit Garneau, chef aux opérations chez Urgences-Santé, a confirmé avoir reçu près de 30 appels pour des patients touchés par la canicule ce dimanche et prévoyait en avoir tout autant ce lundi.


près : near

prévoyait : to expect, to foresee

autant : so much, so many, as much, as many

reçu - recevoir : receive (noun : receipt, adj : to pass, accepted)

touchés - toucher : to touch, to affect


Benoit Garneau, the head of operations at Health Urgency, confirmed have recieved nearly 30 calls for the patients affected by the scorching heat this Sunday and foresee will have as much this Monday.



Du côté de l'arrondissement Ville-Marie, les pompiers et les policiers ont fait du porte-à-porte lundi pour informer les résidents des mesures à prendre pour éviter de trop souffrir de la chaleur.


arrondissement : district

éviter : to avoid

souffrir : to suffer

des mesures à prendre : to take a step


Side of the Ville-Marie district, the firemans and the police officers went the door to door on Monday for inform to the residents take steps for avoid too much suffering by heat wave.



TEMPÉRATURES ENREGISTRÉES À MONTRÉAL CE LUNDI

recorded Temperatures in Montreal this Monday


- Parc La Fontaine : 33 °C

- Taxi avec fenêtres fermées à côté de la gare d’autocars de Montréal : 35,6°C

- Loge des employés de la Société de transport de Montréal (STM) à Berri-UQAM : 33 °C

- Fontaine de la place Vauquelin : 36,5 °C

- Cuisine du restaurant Jardin Nelson : 38,8 °C

- Grande roue du Vieux-Port : 36,5 °C

- Extérieur du Marché Atwater : 33,2 °C

- Le canal de Lachine derrière le Marché Atwater : 35,8 °C

- Intérieur d’une voiture du métro de Montréal : 34,8 °C

- Devant le Musée des beaux-arts de Montréal : 37,5 °C

- Place des Arts : 36,2 °C

- Belvédère du Chalet du mont Royal : 34,8 °C

- Cafétéria de l’hôpital Jean-Talon : 28,3 °C

- Intérieur d'un autobus de la Société de transport de Montréal : 33,9 °C

- Appartement situé au troisième étage dans l'arrondissement du Plateau Mont-Royal : 29,6°C

'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

-


High Risky 한 결정을 앞두고 고민이 될 때,

내 본능의 이끌림에 반대되는 방향으로 가면 된다.


본능은 대개 기대되는 결과와는 무관하게

안전하고,

편하며,

위험을 회피할 수 있는 선택에 끌리게 되어있다.


하지만 많은 성과가 그러하듯이

힘들고 고될수록,

위험하고 불확실하여

대부분의 사람들이 주저하는 길일수록

더 큰 성과를 가져다준다.


감정의 이끌림을 세밀하게 들여다보고 느낀 뒤에

그 반대되는 방향을 이성적으로 살펴보면,


많은 경우에 좋은 결과를 가져다 준다.


-

'Blah Blah' 카테고리의 다른 글

일상  (0) 2018.01.09
일상  (0) 2018.01.07
일상  (0) 2018.01.06
잡캐의 운명  (3) 2018.01.05
남은 기간동안 ToDo List  (0) 2018.01.03
Reference Letter 양식  (0) 2018.01.01

-


그래픽 디자이너에게 휴식은 곧 도태다.


끊임없이 감각을 벼려내야하고,

매 순간의 경험을 내면화하여 창작의 저장고에 쌓아두어야한다.


설령 휴식을 취하더라도,

목적과 결과가 명확해야하며

결국은 창작의 토양이 되도록하여야한다.


그렇게 최선으로 안간힘을 써야

간신히 타인의 마음에 잔물결을 일으킬 수 있다.


-


나 같이 


특출난 재능도 없고,

부모님 등골에 당당히 빨대를 꽂을 뻔뻔함도 없는 사람은


절대적인 노력의 양밖에는 답이 없다.


개같이 하자!!

왕로아롸왈ㅇ라ㅗㅇ라머엄엄아멍멍멍왈왈ㄹ와


-


사회 문제 중에 많은 것들이


상대방에 대한 이해가 부족하거나,

나 (또는 나의 가치관) 와 다른 무언가에서 느끼는 이질감 / 낯섦에서 발생한다고 생각한다.


게임은 어떠한 주제에 대해 재밌고 쉽게 몰입할 수 있게 만들어서,

어려운 문제나 도전 과제들도 성취할 수 있도록 해준다.


이런 게임화 (Gamification) 를 통해서 상당수의 주제에 대한 해법을 찾을 수 있을 것이다.


가령,


성 정체성의 혼란을 겪는 주인공과 얽힌 사건을 주제로 만든 게임을 하며 성소수자들에 대한 거부감을 줄이고 그들의 입장을 이해한다거나,

장애를 가진 주인공을 통해 문제를 해결해나가며 장애인들이 느끼는 어려움이나 당연함이 당연하지 않은 이들의 삶을 이해한다거나 하는 식으로 말이다.


대상에 스스로를 투영시켜서 Role Play 를 하는 게임은,

소설 / 만화 / 영화 등 여타 다른 매체들보다 훨씬 더 깊은 몰입을 가능하게 하여

더 깊고 진한 Insight 를 얻을 수 있도록 해줄 것이다.


물론, 게임이 계몽적 성격을 짙게 띠거나 Player 에게 훈수 / 가르침을 주려고 해서는 안된다.

그저 장판을 깔고, 꺼리들을 던져주고, 각자의 해석을 할 수 있도록 하되, 큰 방향성을 위한 단서만 던져줘야할 뿐이다.


설사 의도한 바와 정반대의 결론을 내리더라도,

그건 Player 의 가치관에 따른 것이므로 억지로 조작하려 들면 안된다.


피부에 맞닿은 문제들을 재밌고 부담없이 고민해볼 수 있는 장을 만들어주는 것이다.

'Blah Blah' 카테고리의 다른 글

일상  (0) 2018.01.09
일상  (0) 2018.01.07
일상  (0) 2018.01.06
잡캐의 운명  (3) 2018.01.05
남은 기간동안 ToDo List  (0) 2018.01.03
Reference Letter 양식  (0) 2018.01.01

+ Recent posts