jobGuid 꽃미남 프로그래머 "Pope Kim"님의 이론이나 수학에 치우치지 않고 실무에 곧바로 쓸 수 있는 실용적인 셰이더 프로그래밍 입문서 #겁나친절 jobGuid "1판의내용"에 "새로바뀐북미게임업계분위기"와 "비자관련정보", "1판을 기반으로 북미취업에 성공하신 분들의 생생한 경험담"을 담았습니다. 3ds Max를 사용해서 게임용 3D 캐릭터를 셋업하는 방법
이를 위해 오랜 실무를 경험해 온 저자의 고급 노하우들이 공개
위 내용은 GameDevForever의 저자분들의 홍보를 위하여 운영진 자체적으로 올린 광고이며 일체의 수익이 없습니다.(밥좀사줘요~)
Posted by 대마왕J

DOT 제대로 알기

 

14강입니다. 반갑습니다. 흠...

간만에 보니까 막 낯설고 막 이래.

 

전에 뭔 얘기 했지? 라는 생각에 13강 잠깐 보고 올께요

 

 

아 뛰어 갔다 왔뜸. 진짜임.

 

 

아... 그거 했구나...

13강때 드디어 Shader의 본질에 접근한 거였군요. dot을 배웠어요 dot을 . 도트라고 읽으면 안돼요. 놀림받아요.

 '닷' 이라고 읽으세요.  

공식으로는 요렇게 써요 (AㆍB) 라고 말예요. A랑 B를 닷 한다는 얘기죠.
유식하게 말하면 '닷 프로덕트'(dot product) 를 한다고 하는 거지요. 오늘부터 써먹어 보세요.  [각주:1]

저번 시간 잠깐 정리해 보죠. 결코 새로 쓰기 귀찮아서가 아님
일단 벡터가 두 개 있었죠. 조명벡터와 노말벡터.

 

그리고 그 각도에 따라 값이 결정된다고 했습니다.
0도일때는 1.0
45도일때는 0.5
90도일때는 0


그리고 그걸 하는데 dot 이라는 함수를 썼었지요. 그걸 쓰면 저 값이 나오나 봅니다.
네 그럴 듯 해요. 그런거 같아요. 맞는 것 같습니다.
 


그런데 이 그림 
사실은
틀립니다!!!!

헹 속았지?

 

 

정확하지 않아요!!!! 아주 대에추우우우우우웅 생각하면 아주 대에에에추우우우웅 맞는 것 같은 느낌이 문득 들 것도 같기도 하지만, 사실은 아주 정확하게도 정확하지 않습니다!!!

왜냐고요? 저거 그래프로 그려볼께요
0도일때는 1.0
45도일때는 0.5
90도일때는 0
우리는 수학에 약하므로, 이 수치만 가지고 대충 생각해 보죠.

뭐 이런 건가??? 라고 생각이 들지 않아요???
솔직히 말해봐요. 이렇게 생각하고 있었죠?  

근데말이죠. dot 공식이라는걸 좀 제대로 알면 생각이 달라져요.
제대로 알기 위해 정말 하기 싫은 설명을 안할 수 없겠군요. 수학 얘기요. 나 수학 싫음.

수학 무써워 ㅠㅠ

 

 

 

 

dot 조금만 더 알자

걱정하실 필요 없습니다. 저도 여기서 공식 증명할 수준 안돼요.
(사실 배웠는데 다 잊어먹음 . 잇힝. 내 머리가 다 그렇지 뭐.)

그래서 걍 외워 버렸습니다. 여러분도 저처럼 외우면 돼요. 간단해요. 캬캬캬컄
그냥 우리 그림으로 다 이해해 버리죠. 그래픽 디자이너 답게요.

먹고 살려면 다 외우게 되어 있어.

 

일단 이 dot이란 놈이 생긴 이유가요. 아래와 같은 이유예요.
빛이 기울어지면 길어지죠. 다시 말해서 같은 양의 빛이 넓은 면적에 퍼지는 거니까,
빛의 원래 강도가 1이라고 보고, 기울어지는 각도를 θ (세타 : theta) 라고 본다면

 

요래요래요래요래요래요래요래요래 되는 것이란 말이죠. 응? 이해 안돼요? 하지마요 그럼. 괜찮아요 이까이꺼.

 

그래서 이렇게 입사광의 광도는 노말 벡터와 조명 벡터의 코사인이 된다는 관계가 있으므로
이걸 이렇게 저렇게 요렇게 씹고 뜯고 맛보고 즐기고 수식으로 바꾸면...

 AㆍB = |A||B|cosθ
A 닷 B 는 A절대값과 B절대값의 코사인세타다

이라고 하니까....

AㆍB 이라는게 위에 말한 A와 B의 각도의 코사인이라는 얘기인거 아닙니까

 


 

아... 머리가 갑자기 복잡해지죠?
괜찮습니다. 여기서 알아야 할 건 딱 하나입니다. 여러분은 이것만 알면 돼요.[각주:2]

Dot 함수는 "코사인 그래프"와 뭔가 연관이 있다.

넹 이거예요.

바로 이 코사인인가 뭐신가 하는 것의 모양으로 값이 변한다는 겁니다.
아 그럼 일단 코사인 그래프를 꺼내보죠
코사인 그래프는 이렇게 생겼어요.

 

http://100.naver.com/100.nhn?type=image&media_id=8101&docid=86013&dir_id=0501010403

그래프를 보시면, 두 가지를 알 수 있죠.

 그래프가 직선이 아니라 살짝 곡선으로 휘었네요 .
베지어 곡선 같아요. 에니메이션 컨트롤러 건드려 보신분은 알듯

 

 1에서부터 0까지가 아니라
 1에서 0을
 거쳐 -1 까지 왔다갔다 하네요.

 

 

네, 그래서 ...
조명 계산 공식의 그래프는

이런 모양이 아니라 사실은

 

이런 모양인 거란 말입니다!!! 즉

 0.5의 밝기는 45도가 아닌, 60도 정도에서 나와요.
살짝 배부른 모양이라니까요.

그리고 또 하나 중요한 사실.

 

 

 

 두둥

0에서 1까지의 값이 아니라 -1에서 1까지의 값이 나와요!!!
dot 공식은 코사인 그래프라서, 사실 0에서 1까지의 값이 아니라 -1에서 1까지의 값이 나온단 말입니다!!!
음수라니!! 내가 음수라니!!!!! 빛을 계산하는데 내가 음수라니!!!! 

나도음수라니

 

즉 진실은

이게 아니라요

 

이게 진짜라는 말입니다. 45도가 절반(0.5)도 아니고, 0에서 끝나는게 아니라 음수까지 나온단 말이죠. 수학적으로.

그런데 빛 계산을 할 때 음수가 저렇게 있으면 여러모로 피곤한 일이 생깁니다. 빛이 거꾸로 밝아진다던가 등등...[각주:3]
그래서 dot 계산을 할 때, "0보다 낮은 수가 있으면 그냥 0으로 갈음해라" 라는 명령이 생기지요.

그 명령이 Shader FX 에서는 이거입니다.
이거 하나 배우자고 여기까지 온거냐.

음수를 방지하는 저 옵션이 켜 있기 때문에, 0보다 작은 음수는 모두 0으로 인식되어서

 

이렇게 인식되므로... (음수값이 모두 0으로 변했어요)

 

이런 이미지가 나올 수 있게 된거죠. [각주:4]

자, 그럼 우린 그래픽 아티스트니까,
정말로 값이 저런지 체크를 해 볼까요?

조금 무식하지만,
각 각도에 해당되는 위치의 색상값들을 스포이드로 찍어 보지요.
우린 이렇게 바로 보이는거 좋아하잖아   

 

정말입니다!!! 사실 약 1~4 정도의 오차는 있었지만, 거의 계산대로 나왔어요!!! 45도 위치에 있는 빛의 밝기가 0.7 즉 70% 정도의 밝기값이라는게 증명되네요!

 

자 그런데 이걸 왜 굳이 설명했냐고요?

그러게요♬ 

쌈바

 

 

 

 

 

 

사실 뭐 굳이 cos 이라고 인식 안해도 돼요. 사실 그냥 직선이라고 생각해도 아-무 문제 없습니다. 아니 아무 문제 없다는건 거짓말. '큰' 문제 없습니다. 특히나 우리같은 그래픽 아티스트들한테는 말이죠. 대충 개념으로만 생각하기에는 무리 없어요.

그래도 어느 정도 이상 가면 저게 확실히 필요하긴 하거든요.
그리고 어렵더라도, 이왕 알아둘 바에는 할 수 있는 한 정확하게 알아두는게 좋지요. [각주:5]

 

그런 의미에서... 그 '어느 정도 이상' 으로 가 봅시다. 후후후. 저게 필요한 영역으로 가 보자고요.

 

 

 

조명 계산의 응용

조명 계산은 뭐.. 위에 설명한 램버트 방식은요, 사실 그다지 좋은 녀석은 아녜요.
무척 가볍긴 한 장점이 있지만 가볍고 싼 대신 아무래도 좀 그러니까.

 

넌 쫌 그래.

특히 캐릭터 같은 경우는 그래서 이걸로만 쓰는건 좀 부족해서요.
그래서 뭔가뭔가뭔가 더 하곤 하죠.

 

 

 

그 중에서도 되게 간단하고 쉬운데 이름이 간지나고 나름 유명한거 하나만 다음 시간에 해보도록 하겠습니다.

바로 하프 - 렘버트 (Half- Lambert) 라고 하는, 하프 라이프 2에 사용되었던 유명한 캐릭터 라이트 방식입니다!

 

이걸 다음 시간에 실습해 보도록 하지요!

위의 것을 제대로 익히셨다면 아무것도 아니예요!!! 진짜 쉬워서 눈물이 나올 지경!!!!

 

  1. 프로그래머 앞에서 이렇게 얘기하면 프로그래머가 "아니!!?? 도데체 어디서 뭘 어디까지 배워온 거지?" 라고 생각하면서 흠칫 놀랄 겁니다. 켈켈켈. [본문으로]
  2. 사실 프로그래머들한테도 가서 갑자기 '왜 닷이 코사인이랑 같은지 설명해봐' 이러면 도망가는 친구가 많습니다. 이런거 시험에 안나와요. ㅋ [본문으로]
  3. 절대값 계산이 들어가는 경우가 있거든요. 그럼 음수도 양수로 돌변... [본문으로]
  4. 사실 지금은 음수를 그냥 남겨 놔도 제대로 나오긴 합니다만, 다른 계산할때 치명적 문제가 발생하므로 일찌감찌 막아주는 겁니다. [본문으로]
  5. 안그러면 저같이 뽀루꾸가 됨. [본문으로]

댓글을 달아 주세요

  1. 인도쿠 2012.08.03 02:38 신고  댓글주소  수정/삭제  댓글쓰기

    대박입니다. 넘 재미있는 강의예요.
    언제나 감사드려요.
    실습은 다음달이 되겠군요. 기다리기 힘들어요.

  2. 크로스 2012.08.03 06:38 신고  댓글주소  수정/삭제  댓글쓰기

    오오.. 멋진 강의입니다. 잘 보고 갑니다!
    저번에 제가 덧글로 달았던 강의내용이 이 부분이었군요..ㅎ
    닷! 프로덕트..ㅋㅋ 잘 봤습니다.
    (그러고보면 전 dot를 도트, private 를 프리베이트 라고 계속 읽게되더군요;; )

  3. neolith 2012.08.03 20:36 신고  댓글주소  수정/삭제  댓글쓰기

    강의 잘 봤습니다. 까다로운 내용을 알기쉽게 이해해주시니 정말 좋네요. 그 보답으로 미세한 딴지 하나 걸겠습니다.

    45도 주변은 이론상 cos(45) 에 해당하는 0.707 이 나와야 하는데, 문제는 약 70%의 밝기에 해당하는 것이 0~255 사이의 sRGB 픽셀값에서는 255*0.707 = 180 이 될거 같지만 그게 아니라는거죠.

    그 이유는 sRGB의 감마 코렉션때문이고요. 제가 트위터 사람들에게 큰 혼란을 주었던 사실, 50% 그레이는 (127, 127, 127) 이 아니라는 얘기와 같은 얘기입니다.

    • Favicon of http://gamedevforever.com 대마왕J 2012.08.04 19:23 신고  댓글주소  수정/삭제

      으악 ㅋㅋㅋ 거기까지 가면 그야말로 폭탄일것 같아서 안 터뜨리긴 했습니다. 그건 완전히 따로 얘기해야 할 것 같아서요 ㅠㅠ 가뜩이나 그래픽 아티스에겐 혼동주기 쉬운 개념이라 한번에 터뜨리기가 무서웠어요 ㅠㅠ. 그래도 그런게 있다고 주석이라도 달아 놓아야 할 것 같네요. 감사합니다. 근데 설마 학규님이신가 했더니 진짜 학규님이셨군요 ;;;
      학규님이 리플달아주셨다 할렐루야!!!

    • Favicon of http://gamedevforever.com 대마왕J 2012.08.04 19:27 신고  댓글주소  수정/삭제

      그렇지 않아도 감마 코렉션을 어떻게 설명해야 제대로일지 꽤 오래 고민하고 있는데 보이지 않는 개념을 어떻게 풀어야 할지 참 고민이어서 오래 고민하고 있는 중입니다. 모르는거 있음 문의드리겠습니다 (_ _)

    • Favicon of http://gamedevforever.com 풍풍풍 2012.08.06 18:55 신고  댓글주소  수정/삭제

      전에 감마 코렉션 관련해서 조사하다가 썼던 포스팅인데요
      참고가 되실진 모르겠지만 여기... (수줍)
      http://blog.naver.com/sorkelf/40146502446

    • Favicon of http://gamedevforever.com 대마왕J 2012.08.07 18:12 신고  댓글주소  수정/삭제

      감사감사. 이 종류 글들은 많이 읽어봤는데, 아직 너무 어렵게 설명이 되어 있어서 의문점이 많어.

  4. Favicon of http://gamedevforever.com 스톰(서광록) 2012.08.04 13:02 신고  댓글주소  수정/삭제  댓글쓰기

    도트라고 하면 놀림받나요? 닷이라고 해야 하나요?
    옛날엔 비트맵 이미지 도트 찍고 막 그랬는데, 이젠 닷을 찍는 건가요? 그런가요?

  5. Favicon of http://gamedevforever.com 친절한티스 2012.08.05 21:52 신고  댓글주소  수정/삭제  댓글쓰기

    헠헠 하프 램버트도 나오는구나!!!

    대마왕님을 찬양합니다!!!

  6. 이아람 2012.08.06 11:12 신고  댓글주소  수정/삭제  댓글쓰기

    우오아아아아아아~
    이글을 백번을 읽으면 이해할 수 있을까요!!!!

  7. peri 2012.08.07 00:17 신고  댓글주소  수정/삭제  댓글쓰기

    우호히힉!! 재밌어요!!

  8. rayshock 2012.08.08 15:13 신고  댓글주소  수정/삭제  댓글쓰기

    친절하고 좋은 강좌입니다. 한가지 보충 설명을 드려도 된다면 dot연산이 음수로 나올때 0으로 만드는 것은 그림자를 표현하는 것입니다. dot연산의 결과 자체 보다는 두 벡터의 방향에 주의를 기울여 보면 dot의 결과가 음일때는 면의 반대 방향에서 빛이 오는 것으로 생각할 수 있습니다. 물체가 완전히 불투명하다고 한다면 면의 반대편에서 오는 빛은 완전히 차단될 것 입니다. 그래서 0으로 만들어 주는 것입니다.

    • Favicon of http://gamedevforever.com 대마왕J 2012.08.08 15:16 신고  댓글주소  수정/삭제

      보충 설명 감사합니다. 그런데 그림자라고 설명해 버리면, 실제로 투영해서 만들어지는 그림자와 혼동할 우려가 있어서 '어두운 음영' 정도로 설명하고 싶습니다. 실제로 아티스트들은 음영과 그림자를 혼동하는 경우가 많이 있어서요.
      '빛이 차단되어 까맣게 음영이 생기는 현상' 쯤 되려나요 :)

    • rayshock 2012.08.08 16:10 신고  댓글주소  수정/삭제

      ㅎㅎ 애매하긴 하네요. 굳이 따지자면 투영 그림자로 보아야 할 것 같습니다. 왜냐 하면 투영 그림자나 이 그림자나 물체에 의해 빛이 차단된 결과이기 때문입니다. 투영 거리가 0인 그림자쯤 되려나요.

      아티스트들이 부르는 음영은 보통 렘베르트 효과로 생각되는데 지금의 경우 단순히 0으로 만들어 빛을 차단시키기 때문에 렘베르트를 고려한 음영은 아니라 생각됩니다. 결국은 그냥 그림자인데요^^;;.... 좋은 설명하시리라 믿습니다;

    • Favicon of http://gamedevforever.com 대마왕J 2012.08.09 00:46 신고  댓글주소  수정/삭제

      네네 뭐 사실 그렇게는 맞긴 합니다만, 어쨌건 투영 그림자 구현 알고리즘은 따로 있으니까, 가급적 아티스트들이 프로그래머한테 '그림자 구현' 을 의뢰하면서 말할 때 서로 오해가 없게 하려고 의도적으로 그림자라고 말하고 있지 않고 있습니다. 이 강의의 주 목적이 그거라서요. 조언 감사드립니다 ㅎ

  9. 김용준 2012.08.09 17:33 신고  댓글주소  수정/삭제  댓글쓰기

    오오! 드디어 내적연산까지 왔군요!
    절대로 리플 달라고 강요하셔서 다는거 아님
    그냥 자발적인 리플임 ㅋㅋㅋ

  10. 신정섭 2012.08.17 06:27 신고  댓글주소  수정/삭제  댓글쓰기

    매번 쉽고 재밌게 보고 있습니다. 다음 강좌도 기대됩니다.
    감사합니다.

  11. Favicon of http://blog.naver.com/edgerider 김성준 2012.08.17 18:11 신고  댓글주소  수정/삭제  댓글쓰기

    멋진강의 감사합니다.^^

  12. 대규 2012.08.23 17:55 신고  댓글주소  수정/삭제  댓글쓰기

    공부해 볼려했는데 따로 해주셨네요 이걸로 dot product를 완전 이해 했습니다. ^^



티스토리 툴바