프로그래밍 언어 입문서가 아닌 프로그래밍 기초 개념 입문서
문과생, 비전공자를 위한 프로그래밍 입문책입니다.
jobGuid 꽃미남 프로그래머 "Pope Kim"님의 이론이나 수학에 치우치지 않고 실무에 곧바로 쓸 수 있는 실용적인 셰이더 프로그래밍 입문서 #겁나친절 jobGuid "1판의내용"에 "새로바뀐북미게임업계분위기"와 "비자관련정보", "1판을 기반으로 북미취업에 성공하신 분들의 생생한 경험담"을 담았습니다.
Posted by 대마왕J

어느덧 8강이 되었습니다. 벌써 UV도 깊게 다뤄 보시고!!! 색도 막 더해 보시고!!
UV가 흘러가게도 하셨습니다!!!

자 다시 정리해 볼까요.

일단 ShderFX를 다루기 위한 기초로, 기본 조작법을 익혔지요. 거기서 가장 중요한건, 여전히 0.0~1.0 사이로 끝나는 float 이라는 단위입니다. 여전히 중요하고, 앞으로도 중요할 겁니다.

그리고 노드를 연결하는 것과... 색을 숫자로 보는 법을 익혔지요.
지금도 색을 딱 보면 숫자가 딱! 하고 나와야 하는 거예요?!? 알겠지요?!? 딱~!

딱~!




그리고 드디어 UV 구조라는 걸 제대로 익혔구요, UV를 눈으로 보는 법도 배웠고 UV를 에니메이션 시키는 법도 익혔어요!!! 공부를 제대로 하셨다면, 1강때 설명한 것을 응용하여 지금까지 만든 쉐이더를 fx로 익스포트해서 친구에게 선물하실 수도 있겠지요!!


자 .. 그럼 이제, shader fx의 기본조작을 마치고, 중급조작 단계에 들어온거라고 할 수 있습니다.
중급조작에서는 이전 시간처럼 UV를 조작하고, 이미지를 다양하게 합성하게 되지요.
그리고 고급에서는...
고급에서는....
고급에서는....

알파 블렌딩과 라이트를 다룰 겁니다!!! 오메!! 어려워!!! 여기까지 과연 할 수 있을까!!!!

다 할 생각 해 보니까 아주 좋되는거야



자 .. 뭐 앞 일은 앞 일이고, 오늘은 그럼 오늘 일을 해 봐야죠.

오늘 할 일은 드디어 멀티 텍스쳐링입니다.텍스쳐를 섞는거죠.

0. 우선 개념을 설명해 볼까요.

포토샵 정도는 쉽게 다루실 수 있으실 겁니다 다들. 이 강의는 일단 그래픽 디자이너를 위한 강의 이니까요.
포토샵에서 일단 이 이미지를 보실까요.


네.. 이전 시간에 줄기차게 썼던 또 그 이미지입니다.
강의를 쉽게 하기 위해서 익숙한 그림을 쓰는거지, 결코 다른 이미지 찾기가 귀찮거나 힘들어서 이러는거 아닙니다. [각주:1]

어쨌건 이 이미지를 포토샵에서 채널 창과 함께 보면, 이렇게 생겼죠.


이게 무슨 의미입니까? RGB 채널은 지난번에 말했으니까 그런가부다.. 하시고,
알파를 보세요! 이 풀 그림은 사실 풀 모양으로 이미 '따져' 있고, 밖은 그냥 투명이라는 의미 아닙니까?

즉 이렇게 표현할 수도 있겠지요 .


네 ... 이 그림은 풀 모양으로 추출되어서 플로팅 되어 있는 이미지입니다.
포토샵을 오래 쓰신 분들은, 저 체크무늬가 '아무것도 없는 허공' 으로 보이신다는거 다들 알고 계실 겁니다.

특정 환자들에게만 투명하게 보이는 이미지.jpg


네, 알파 채널이 있는 이미지는 저런 느낌인 거지요.
다시 말해서, 저 이미지를 호랑이 이미지 위에 얹었을 때,[각주:2]



이런 느낌으로 얹어질 테니까,


결국 이렇게 얹어지게 될 거란 말씀입니다. 아시겠지요?


오늘 해 볼 것이 이거입니다. 일명 리니어 인터폴레이션 (Linear interpolation) 이라고 하지요.
두 이미지를 섞을 때 주로 사용하는 법이지요.




1. 그러면 해 봅시다.

이번엔 plane 입니다. 하나 만듭시다. 주전자 만드는 것 만큼 쉽습니다.
모르시는 분은 주변에 물어보세요. 정말 별거 아닙니다.

거기다가 Tiger.bmp 를 맵핑으로 입혀 놓습니다.
이제 뭐 이거까지는 다 아시고 막 이러시잖아요.
진짜 이거 어떻게 하는거냐고 이 와중에 물어보시는 분 있으시면 때릴것임

때리러 오는 검은 삼연성





네 뭐 이 다음은 간단합니다.

여기다가 다른 이미지 한 장 겹치면 되는거지요.
그럼 일단 다른 텍스쳐 한 장 준비해 둡니다.
만만한 풀을 준비해 두지요.


엄청 만만한 풀 불러왔습니다.
저거 알파 채널 가지고 있는거, 다 아시지요? :)

자 이제 저 두 이미지를 "리니어 인터폴레이션" 해 봅시다.
그럼, 리니어 인터폴레이션 (일명 Lerp라고도 하죠) 노드를 불러 옵시다.

'계산' 계열일게 분명하니까 Math 아래에 있고,
MixLinearInterp 라고 씌여 있습니다. 다 쓰려면 다 쓰던가 ..... 뭐야 줄여쓰기는....



이걸 만들면 이렇게 생겼습니다.
제가 늘 칭찬하는게, 참 아이콘이 직관적으로 생겼어요 :)
뭔가 0 에서 1까지, 직선으로 그어져 있지요?

그리고 다시 잘 봅시다. 들어오는 값인 Input은 A와 B 두 개가 있습니다.
그리고 그 두 개를 '섞어주는' 인자인 Blend Value가 있습니다.

그리고 그 둘이 섞여서 나오는 결과값이 Result 라고 있습니다.

척 생각해 봐도, 두 개를 섞는 거니까 Input A 와 Input B의 단위는 서로 같아야 할 것 같습니다. float2 건 float3건 말이죠. 그리고 섞는 값인 Blend Value는, 지금은 뭐 아무 값이나 받을 수 있게 되어 있습니다만... 사실 float 을 넣어줄 일 밖에 없습니다. 섞는거야 한자리면 충분하니까요.



이게 또 재밌는게, 오른쪽 메뉴에서 옵션만 바꾸면 리니어 인터폴레이션(Linear Interpolation) 이 스무스 인터폴레이션 (Smooth interpolation) 으로 바뀐단 말입니다. 이건 나중에 Smoothstep 이라고도 불리는데, 언젠가는 쓸 일이 있을 겁니다. (SSS 할때 쓸지도... 후후후) 그치만 지금은 안쓸거니까 신경쓰지 말고 리니어 인터폴레이션만 쓰기로 하지요.



자.. 그럼 여기의 A와 B를 각각 호랑이와 풀로 만들어 줍시다.

그럼 어떻게 보이나요?


검게 보입니다!!!! 무언가 잘못된 것일까요????

이런 표정 지으신분은 베란다에서 5분간 손들다 오세요.

이젠 슬슬 눈치 채실때가 되었지용

Blend Value에 아무 값도 넣지 않았잖아요.

shader FX 가 너무 자동으로 잘 해 주다보니까, 당연하다는 듯이 오류가 안생길거라고 생각하실 수도 있는데
이런 뻔한 오류는 일으켜 주는게 맞습니다.

자 그럼 당황하지 마시고, 저 Blend Value 에다가 숫자 1을 넣어 주시지요. [각주:3]

오오, 드디어 풀이 나왔습니다!!!
아니 그런데 호랑이는 어디 간건가요?

호랑이를 보고 싶으시면, 저 Blend Value에 0을 넣어 보세요.

오옷 , 0을 넣으니까 이번엔 호랑이가 나왔습니다!!!!
뭔가 짐작이 가능하시죠?
1을 넣으니까 Input B에 넣었던 풀이 나왔고,
0을 넣으니까 Input A에 넣었던 호랑이가 나왔습니다!

그럼 퀴즈입니다. 숫자 0.5를 넣으면 뭐가 나올까요?

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

정답 공개합니다.

딱 절반이 섞였습니다!!!!!

이제 명확해졌습니다!!! 리니어 인터폴레이션(Linear Interpolation)은, 0~1 사이의 값으로 , 두 이미지를 섞어 주는 명령입니다!!!! 또 0~1 사이야!!!! 도대체 0~1 로 못하는 것이 뭘까요???? [각주:4]

그런 스토립니다.

자자자자자자자
그렇다면 봐요봐요봐요봐요봐요봐요

저 풀은 알파 채널을 가지고 있어요 그렇죠?

알파 채널은 float 이예요 그쵸?

float이란 0~1 사이의 한 자리의 숫자란 의미예요 그쵸?

뭔가 또 생각나지 않아요?

전부 다 스토리가 연결되어 있던 거예요. 믿을 수 없게도...

이 풀의 알파 채널을 다시 봅시다.





이게 투명도를 나타내는 '숫자 덩어리' 라고 말씀드렸잖아요. 아시겠지만 저는 친절하고 관대하므로 다시 한 번 자세히 설명드립니다.

관대합니다.




이 이미지를 확대해 보면 이렇게 되어 있죠.

이 한 픽셀 픽셀이 투명도를 나타내는 한 자리의 float 숫자라고 생각해 보세요.



흰색은 불투명도가 100% 이므로 1이고요
검은색은 완전히 투명하므로 0이고요
그 중간은 각각 그 % 에 맞는 색이겠지요.

즉 이 이미지들은 전부 한 픽셀 픽셀이 한 자리 소숫점 숫자란 말입니다.

여러 번 얘기했다는건 중요한 거예요 밑줄 좍 그으라고.


그러므로 이 숫자덩어리 알파 채널을 Blend Value 에 넣으면 어떻게 되겠습니까?



이렇게 된다고요

두 이미지가 블렌딩 된다고요

알파 채널의 픽셀이 흰색이면 1이니까 풀이 나오고, 알파 채널의 픽셀이 검은색이면 0이니까 호랑이가 나오고, 그 중간이면 그 중간이 나온다고요.

별 거 아니죠? :) 정말 쉽잖아요? 포토샵에서 레이어 올리는거 다 이렇게 동작하는 거예요. 똑같아요.


... 그치만 정말 별게 아닐까요?
여기서 부터 시작해서 응용되는게 장난이 아닌데???



2. 정말 별게 아닐까요?

제가 요즘 게임테크 강연 준비하느라 좀 바쁩니다 (후후후)
강의를 더 길게 하고 싶은데 이번주는 좀 짧게 해야 겠어요.
http://www.zdnet.co.kr/news/news_view.asp?artice_id=20120308090801


그래서 오늘은 특별히! 숙제를 내 드리겠습니다.
어렵지 않아요. 위의 것의 응용입니다.
응용을 보여 드릴테니, '왜 이렇게 되는지' 이해해 보세요.

그리고 실습해 보세요. 이게 숙제입니다.
이해도 못하고 그냥 따라만 하면 때릴 거예요!!!

숙제 다 했으면 댓글 써!!!!


숙제 다 한사람만!!!!




자 첫번째 이미지입니다.


풀이 멀티플라이 레이어처럼 어두워졌네요? 왜 그렇게 되었을까요?
그리고 또 이 어두운 정도를 조절할 수 있을까요?



풀이 이번엔 밝아졌네요? 무슨 일이 일어난 걸까요?
너무 밝은데 조금 어둡게 할 수는 없을까요? 이미지 수정 없이 말이죠.


엇 호랑이가 많아졌어요!!! 무슨 일이 일어 난 걸까요? 따라 하실 수 있으시겠어요????



3. 오늘은 일단 여기서 끝냅니다.

게임테크 2012 강연 참가하고 나면, 이번엔 유니티 부트캠프에 또 강연 참가... OTL
그래서 바쁩니다.

그치만 이거... 쉬워 보이는데
이거에서 발전하면 별별거 다 만듭니다.

예를 들어


이렇게 얼룩이 알파 채널로 따져 있는 이미지와

깨끗하고 작은 벽돌 이미지 하나만 있으면

이렇게 얼룩진 벽도 간단히 만들 수 있구요.

더 응용해서 다다다음 시간쯤 되어서 더 실력이 올라가면 말이죠

맥스에서 실시간으로 동작하는 맵에디터를 만들 수도 있어요


다음 시간에는 버텍스 칼라를 이용한 Liniar Interpolation을 해볼까... 하고 생각하고 있습니다.
자 그럼 오늘은 바빠서 이만 총총.



  1. 믿어주세요 [본문으로]
  2. 일단 모든 이미지는 shaderFX를 깔았을때 , 3Dmax 설치 폴더 아래의 map폴더에 자동으로 같이 깔리는 이미지를 사용하였습니다. 이 호랑이는 tiger.bmp 입니다. 깔려 있어요. [본문으로]
  3. 숫자 넣는건 constant 라는거 잊지 않으셨죠? [본문으로]
  4. 프로그래머들은 이 용어를 잘 알고 있습니다. 사운드건 인공지능이건, 두 값을 적절한 조건에 의해 섞어줘야 할 때 "그거 그냥 리니어로 섞어줘!!!!" 라고 말하면 다 알아 듣습니다. :) [본문으로]

댓글을 달아 주세요

  1. Silverchime 2012.03.18 22:59  댓글주소  수정/삭제  댓글쓰기

    MathOperator에서 ********와 ***연산으로 어두워지고 밝아졌네요 ^^
    밝기조절은 컨스탄트값을 주거나, 현재 RGB밸류값에 연산 조금 약하게 주면 될것 같고,
    UV는 Constant 4를 호랑이쪽에만 연결해 주셨네요.
    바쁜데 연재도 빼놓지 않으시고...대단하세요 저도 열심히 쓰고 있습니다.
    다음주 멀티텍스쳐 완전 기대합니다 ^^ 화이팅~

  2. Silverchime 2012.03.19 03:07  댓글주소  수정/삭제  댓글쓰기

    그런데 저 검은삼연성 제트스트림 어택 완전 제대로네요... 맛슈 오르테가... 으아악...!

  3. Favicon of http://blog.naver.com./sorkelf 풍풍풍 2012.03.19 15:36  댓글주소  수정/삭제  댓글쓰기

    세심한 배려가 군데 군데 눈에 보이는...
    마가렛트 하나 물고 재밌게 따라 해봤습니다 ㅋㅋ
    늘 재밌는글 감사합니다~


  4. Favicon of http://hokoodo.lil.to 호빵 2012.03.20 09:52  댓글주소  수정/삭제  댓글쓰기

    늘 강의를 기다리고 있는 1인입니다.
    초심자로써 의문점이 하나 있는데 최종적으로 노드를 디퓨즈에 연결시키지 않고 앰비언트에 연결시키는 이유가 궁금합니다.

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

      후후후 D_grass 는 너무 많이 써서 이젠 아시리라 생각했는데!!!!! 그렇군요!! 알겠습니다 :) 주의하지요.

    • Favicon of https://gamedevforever.com 대마왕J 2012.03.20 23:20 신고  댓글주소  수정/삭제

      디퓨즈에 연결하셔도 상관 없습니다. 단지 디퓨즈에 연결하면 빛의 방향에 따라 음영이 생기므로, 예시로 보여드릴 때 어두운 부분이 생겨서 그 부분이 행여나 잘 보이지 않게 될까봐 그렇게 연결하고 있습니다.

      그러므로 작업하실 때에는~ 아무데나 연결하셔도 상관 없겠습니다! ㅎㅎ

    • Favicon of http://blog.naver.com/comtist 2012.03.21 13:00  댓글주소  수정/삭제

      호빵님 여기서 만나네요. 저 꼼입니다.ㅋ
      호빵님도 DDS 출신이시군요! 저도 DDS 출신..ㅎ

      http://blog.naver.com/comtist

      대마왕님..풀도 D_grass.dds 라고 알려주시면 더 좋았을걸..ㅠㅠ
      호랭이는 금방 찾았는데 풀은 예전 강좌 뒤져서 겨우 찾았어요. ㅋ

      이 강좌 너무 유용합니다!
      강좌 기다리는 1인 추가요.

  5. 홍일도 2012.03.21 01:58  댓글주소  수정/삭제  댓글쓰기

    재밌습니다~~~~

  6. 2012.03.21 10:00  댓글주소  수정/삭제  댓글쓰기

    대마왕J님 쉽고 재밌습니다. 개그 사진들도 센스만점!
    매번 따라하지만 참 재밌네용!

  7. Silverchime 2012.03.23 12:13  댓글주소  수정/삭제  댓글쓰기

    매번 느끼는거지만 예전에 혼자 고생할때 이런걸 미리 알았다면 얼마나 좋았을까요...
    정말 이렇게 무상으로 퍼주시니 참 감사할 따음이네요.
    다시 돌아봐도 또 좋은 내용이라 쭉 또 읽어 봅니다 오르락 내리락...

  8. 밍밍 2012.03.29 16:05  댓글주소  수정/삭제  댓글쓰기

    최곱니다. 최고에요. 개그센스도 쵝오 ㅠㅅ<b (너무 관대하셔서 물마시다 뿜었음;;)
    개념 정리하는데 정말 도움이 많이 됩니다.
    꼬꼬마시절 언렬 노드 짤 때 디자이너들이 다 그렇듯.. 맨땅에 헤딩하면서 개념을 익혔는데..
    이렇게 깔끔하게 정리를 해주시니 너무 감사합니다.
    복 받으실 거에요 엉엉ㅠ 두 번 머겅요 ㅠ

  9. 컴맹 2012.07.10 02:28  댓글주소  수정/삭제  댓글쓰기

    헛! 오늘은 숙제가 있군요.
    9강을 보기전에 해야될것같은데..ㅠㅠ
    좀 생각좀 해봐야겠습니다. (대마왕님이야 워낙 간단한 문제겠지만....전 안그래요..ㅠㅠ)
    오늘도 잘 보고 갑니다.
    좋은 강의 감사합니다.^^

  10. 컴맹 2012.07.11 14:03  댓글주소  수정/삭제  댓글쓰기

    첫번째 이미지 : 풀의 Alpha값이 Blend Value로 입력되었습니다. 그래서 풀이 있는쪽의 알파값이 1에 가깝고, 풀밖의 영역은 0이라서 투명하게 보여지게 됩니다. 결국은 풀이미지가 있는부분만 알파값이 더해져서 어둡게 나오게 됩니다.
    어두운 정도를 조절하려면 MathOperator를 Blend Value 입력값으로 놓고, 풀의 Alpha값과 상수(Constant)값을 연산하도록 설정하고, 상수값을 (0~1사이의 값으로 변화시켜서 어두운정도를 조절할수있습니다.)


    두번째 이미지 : Blend값은 풀의 Alpha값이 입력되고, Input B의 값이 호랑이와 풀의 값을 서로 더했기때문에, 겹쳐지는 부분이 더 밝게 표시됩니다. 풀만 어둡게 하려면 Input B의 값에 상수(Constant)를 MathOperator(A*B)연산자로 연산하고, 상수값을 조절하여 조절가능합니다.


    세번째 이미지 : 호랑이의 UI좌표를 변경하면 됩니다. 현재 보는 화면에서 Constant값을 4로 하면 결과를 얻을 수 있습니다.

    아~ 말로 설명하려니 힘드네요.

    http://scm98.egloos.com/

    이렇게 설정하면 됩니다.
    (맞는답인지는 모르겠네요.^^;;)




    .
    .
    .
    .
    .
    암튼 숙제가 맞든 틀리든 숙제를 했으니 이제 9강으로 Go Go~~~^^

    • Favicon of https://gamedevforever.com 대마왕J 2012.07.11 14:15 신고  댓글주소  수정/삭제

      고생하셨습니다. 감 잡으시는 것 같아요 :)
      이번엔 위에 예시로 든 노드(곱셈과 덧셈 연산자)를 건드리지 말고, 단순히 더 추가만 해서 만들어 보세요. 1번과 2번만요 :)

  11. 본본본 2013.05.23 11:19  댓글주소  수정/삭제  댓글쓰기

    오...정말 큰 도움이 되고있습니다. 멋진 강좌 감사합니다 (_ _)