2011년 11월 29일 화요일

[포프의 쉐이더 입문강좌] 01. 쉐이더란 무엇이죠? Part 1

이전편 보기

제1장 쉐이더란 무엇이죠?


쉐이더의 정의
제가 학생들을 가르치면서 제일 처음 듣는 질문 중 하나가 '도대체 쉐이더가 뭐에요?'였습니다. 사실 뒤돌아보면 제가 쉐이더를 처음 접할 때도 스스로 이런 질문을 던지곤 했었는데 그 누구도 저에게 이해하기 쉽도록 '쉐이더란 바로 이런 것이다!' 라고 설명을 해준 적이 없더군요. 또한, 기존의 자료들도 찾아봤는데 학생들이 쉽게 이해할만한 정의를 내려주는 자료를 찾을 수 없었습니다. 그래서 제 맘대로(?) 아주 쉽게 정의를 내렸습니다. 쉐이더란 화면에 출력할 픽셀의 위치와 색상을 계산하는 함수입니다. 어휘적/구조적인 측면에서 쉐이더를 살펴보면 이를 자세히 이해할 수 있을 겁니다.

어휘적 접근
사실 영어만 잘해도 거저 주워 먹는 것이 많은 분야가 컴퓨터 프로그래밍입니다. 쉐이더만 해도 크게 예외는 아닌데요. 쉐이더(shader)란 '색의 농담, 색조, 명암 효과를 주다.'라는 뜻을 가진 shade란 동사와 행동의 주체를 나타내는 접미사 '-er'을 혼합한 단어입니다. 즉, 색의 농담, 색조, 명암 등의 효과를 주는 주체가 쉐이더란 뜻이지요. 컴퓨터 그래픽에서 색이라 하면 당연히 화면에 등장하는 픽셀의 색상이므로 이를 다시 정리하면 다음과 같습니다.

쉐이더는 픽셀의 농담, 색조, 명암을 결정한다.

여기서 농담, 색조, 명암이라고 하니 '아니, 그렇다면 쉐이더가 출력하는 결과가 3개나 된다는 말인가요?'라고 하시는 분들이 계실 듯한데 그런 것은 아닙니다. 쉐이더의 최종결과는 농담, 색조, 명암 효과를 전부 짬뽕해서 나온 RGBA색상 값 하나입니다. (쉐이더가 반드시 한가지 색상만을 출력해야 하는 것은 아닙니다. 고급 쉐이더 기법들에서는 다수의 결과를 동시에 출력하는 경우가 있습니다.) 미술시간에 수채화 그려봤던 것 기억하시죠? 일단 밑그림을 완성하면 물감의 색을 고르고, 여기에 물을 혼합시키는 양을 바꿔가면서 다양한 명암효과를 냅니다. 하지만, 일단 그림이 완성되면 캔버스에 있는 결과는 결국 최종색상뿐이죠? 쉐이더도 이와 마찬가지입니다. 온갖 기법들을 이리저리 섞어서 픽셀들의 최종 색상 값을 구하는 것이 바로 쉐이더입니다.

구조적 접근
저희가 이 책에서 다루는 쉐이더는 정점쉐이더(vertex shader)와 픽셀쉐이더(pixel shader)인데 위의 어휘적 접근에서 살펴봤던 쉐이더의 정의는 이 중 하나에만 적용됩니다. 어떤 것일까요? 네, 그렇습니다. 픽셀쉐이더 입니다. 그렇다면 정점쉐이더란 무엇일까요? 이걸 이해하려면 3D 그래픽파이프라인의 구조를 살펴봐야겠군요.

3D 파이프라인이 존재하는 이유 중 하나는 3차원 공간에 존재하는 물체를 컴퓨터 모니터라는 2차원 평면 위에 보여주기 위해서입니다. 우선 3D 그래픽파이프라인을 극단적으로 간략화시킨 그림 1.1을 살펴봅시다. (이 그림은 정점쉐이더 및 픽셀쉐이더의 역할을 이해하기 위해서 극단적으로 간략화시킨 버전입니다. 실제 그래픽 파이프라인은 이 그림에 나와 있는 것보다 훨씬 복잡합니다.)

그림 1.1 극단적으로 간략화시킨 3D 파이프라인


그림 1.1에서 정점쉐이더가 입력 값으로 받는 것은 3D 모델 자체입니다. 3D 모델은 폴리곤(polygon, 다각형)으로 구성하는 것이 업계표준인데, 폴리곤이란 결국 삼각형들의 집합에 지나지 않습니다. 삼각형은 3개의 정점(vertex, 꼭짓점이라고도 합니다) 으로 이뤄져 있죠? 그러니 정점데이터가 정점쉐이더의 입력 값이라고 해도 전혀 틀린 게 아니겠네요.

정점쉐이더가 수행하는 가장 중요한 임무는 3D 물체를 구성하는 정점들의 위치를 화면좌표로 변환하는 것입니다. 이를 화가에 비유한다면 투시원근법을 사용하여 실제세계에 있는 물체들을 캔버스 위에 옮겨 그리는 과정이라 할까요? 이렇게 물체의 위치를 다른 공간으로 옮기는 과정을 공간변환(space transformation)이라고 부르는데 이에 대한 자세한 설명은 다음 장에서 드리도록 하겠습니다. 조금 전에 3D 모델은 결국 정점들의 집합이라고 말씀드렸었죠? 따라서 모든 정점을 하나씩 공간 변환하면 3D 물체 자체를 공간 변환하는 것과 똑같은 결과를 얻을 수 있습니다. 이게 바로 정점쉐이더가 하는 일이지요. 그렇다면 정점쉐이더 함수는 몇 번이나 호출될까요? 다음 문장을 보시면 답을 아실 수 있겠네요.

정점쉐이더의 주된 임무는 각 정점의 공간을 변환하는 것이다.

네, 그렇습니다. 정점쉐이더는 3D 물체를 구성하는 정점의 수만큼 실행됩니다.

정점쉐이더가 반드시 출력하는 결과 값은 화면공간 안에 존재하는 정점의 위치(이외에도 다양한 정보를 정점쉐이더의 결과 값에 담을 수 있습니다. 자세한 내용은 이 책의 뒷부분에서 살펴볼 것입니다.)입니다. 이 위치를 3개씩 그룹 지으면 화면에 출력할 삼각형을 만들 수 있지요.

자, 그렇다면 이 삼각형 안에 픽셀이 몇 개나 들어갈까요? 화면을 구성하는 단위는 픽셀이니까 화면에 뭔가 그림을 그리려면 픽셀을 어디에 몇 개나 그려야 하는지를 알아야겠죠? 이게 바로 래스터라이저(rasterizer)란 장치가 하는 일입니다. 래스터라이저는 정점쉐이더가 출력하는 정점의 위치를 차례대로 3개씩 모아 삼각형을 만든 뒤, 그 안에 들어갈 픽셀들을 찾아냅니다. 자, 그러면 픽셀쉐이더 함수는 몇 번이나 호출될까요? 래스터라이저가 찾아내는 픽셀 수 만큼이겠죠?

그렇다면 위에서 보여드렸던 초 간략 파이프라인의 마지막 단계인 픽셀쉐이더가 하는 일은 무엇일까요? 이미 위에서 살펴본 것 같지만 그래도 다시 한번 반복해 드리지요.

픽셀쉐이더의 주된 임무는 화면에 출력할 최종색상을 계산하는 것이다.

이제 정점쉐이더와 픽셀쉐이더의 임무를 합치면 아까 제 맘대로 내렸던 쉐이더의 정의가 나오죠?

쉐이더란 화면에 존재하는 각 픽셀의 위치와 색상을 계산하는 함수이다.

솔직히 이 정도 말씀을 드려도 쉐이더를 처음 접하시는 분들은 아직도 감이 안 잡히실 겁니다. 사실 쉐이더를 짜 보지 않으면 이해가 어렵습니다. 3D 물체를 화면에 그릴 때, 그 물체를 구성하는 픽셀들의 위치와 색을 프로그래머 맘대로 조작하는 거라고 하면 이해가 좀 더 되실까요? 아직도 이해가 안되시더라도 크게 걱정은 마세요 이 책을 읽으시다 보면 '아~ 이런 거였구나~'하고 갑자기 이해가 되실 겁니다. ^^


댓글 23개:

  1. 잘봤어용.. 수고 하셨어용

    답글삭제
  2. 포프님, 감사드립니다.

    답글삭제
  3. 그래픽을 공부하고 있으면서도 Vertex와 Pixel을 같은 개념으로 생각하게되네요. -_-;
    그러니깐, Vetrex는 폴리곤을 구성하는 각 꼭지점이고, Pixel은 이 Vertex로 만들어지는 폴리곤을 구성하는 점인건가요?
    Vetrex Shader가 폴리곤을 구성해서 지오메트리를 만들어내면, Pixel Shader가 각 Vertex의 RGB값으로 인터폴레이션을 거쳐 색을 표현. 맞나요?

    답글삭제
  4. @Cootang2님.. "Vetrex는 폴리곤을 구성하는 각 꼭지점이고, Pixel은 이 Vertex로 만들어지는 폴리곤을 구성하는 점인건가요?" -> 이건 맞아요.. 그냥 화면에 보이는 점 하나하나를 픽셀로 생각하세요.. 바탕화면 해상도가 1920 x 1080이라면 가로로 1920의 픽셀이 세로로 1080 개의 픽셀이 있다.. 이렇게요.. 삼각형을 화면에 그릴때 그 삼각형이 화면에서 차지하는 영역에 색을 그려줘야 하니까 각 픽셀별로 색을 입혀준다~ 정도.

    "Pixel Shader가 각 Vertex의 RGB값으로 인터폴레이션을 거쳐 색을 표현. 맞나요?" -> 이건 맞을 수도 아닐 수도 있어요. 요즘은 아닌 경우가 더 많아요... 버텍스에서 색을 가져와서 보간(인터폴레이션)해서 혼합하면 맞지만.. 버텍스 색에 전혀 상관없이 제맘대로 픽셀쉐이더에서 색을 찍어낼 수도 있거든요.. 요즘은 버텍스 자체의 색을 이용하지 않는 경우가 더 많아요.

    답글삭제
  5. 쉐이더 강좌를 보시는 분들께 한말씀 드리겠습니다. 이 강좌를 처음 감수를 맡게 되었을때 저는 쉐이더 프로그래밍을 전혀 할 줄 몰랐습니다. 물론 용책이나 해골책을 보고 따라해보긴 했는데 결국 수박 겉핡기라 왜 그렇게 되는지 이해도 못하고 했습니다. 그런데 이 책을 감수 하면서 렌더몽키라는 것도 알게 되고 정말 간단하게 쉐이더를 짜는 법을 알게 되었습니다. 중수 이상 되시는분들은 이글을 대충 스윽스윽 넘기면서 읽으시면 되지만 정말 처음 쉐이더를 접하시는분들께서는 정독하시고 꼭 실습을 해보시기 바랍니다. 제가 이런저런 쉐이더책을 봤는데 ( ShaderX, 일본사람이쓴 쉐이더책 등 ) 이 강좌만큼 이해를 쉽게 하진 못합니다. 이 강좌를 모두 마친 후 저 두책을 보게 되면 이해가 훨씬 빠를 것 입니다. 정말 좋은 강좌입니다. 많이많이 봐주세요. ( 이 책을 보면서 렌더링 파이프라인에 대해 잘 이해하시면 버텍스쉐이더나 픽셀쉐이더는 얼마든지 이해할 수 있다고 봅니다. )
    처음 접하시는분들께 전하는 말이 었습니다. 꼭 실습까지 해보세요.

    답글삭제
  6. 빨리 다음편 보여줘요 현기증 날 것 같단 말예요

    답글삭제
  7. 너무 좋은 글입니다!!! 그런데 감질감질...감질나요...총 몇주동안 연재되나요??

    답글삭제
  8. @ozlael 두주에 한번씩보시면 현기증 덜나요~ 매주 꾸준히 올리기위해 초보에게 적당한 분량으로 자르고 있다는~ 양해부탁

    @animaNyong 총 11강이니 한 20주 걸릴까요? 한학기 수업분량이라고 생각하셔도 ^^

    답글삭제
  9. 오옷.. 기다리고있었습니다. 열심히 따라가겠습니다.
    강의형식이면.. 과제같은 같이 시도해볼만한 꺼리도 있는건가요?! ㅎㅎ

    답글삭제
  10. @zany 과제떠윈 없고.... 무조건 따라서 해야하는 실습은 있어요....

    답글삭제
  11. 실습은 뭘로 하나요? DX 혹은 OpenGL? OpenGL은 조금 공부해봐서 따라갈수 있겠는데, DX는 아는게 하나도 없네요. -_-

    답글삭제
  12. @coontang2 렌더몽키와 DX요. 뭐 아는게 하나도 없어도 크게 문제 없으실거에요.. DX전혀 모르시던 이경배님도 쉽게 따라하셨으니....

    답글삭제
  13. 렌더 몽키란게 무료판인가요? 회사에서 쓰면 안되는건가요?

    답글삭제
  14. 넵 무료입니다. 회사에서 쓰셔도 됩니다... 책에서 해적질 하라고 할 순 없죠 ^^

    답글삭제
  15. 5년차 인데도 불구하고 쉐이더 작업해 본적이 없어 해골책 수준밖에 안됬었는데 포프님 글 보고 공부좀 해야되겠네요.
    좋은 글 감사합니다.

    답글삭제
  16. @익명: 몇년차이고 상관없이 뭐 쉐이더 만질일 없으면 모르는게당연한거죠.. 저도 그래픽 쪽만 해와서 다른쪽을 전혀 몰라요. AI라던가 이런거 나오면 그냥 GG입니다..

    즐겁게 보시고 언제라도 feedback환영입니다!

    답글삭제
  17. 와~ 오늘 구매했습니다. 잘볼께요~^^

    답글삭제
    답글
    1. 오우 감사합니다. 보시다 궁금한거 있으면 언제든 질문주세요.. ^_^/

      삭제
  18. 하.... 공부하고 있는데, 픽셀 쉐이더가 얼마나 호출되는지에 대한 개념이 없어서 해메는 중에
    하나 재대로 깨닫고 갑니다.!! 감사해요~

    답글삭제
    답글
    1. 도움이 되었다니 다행입니다! 제 책도 사세요~ 쪼옥~ (응? ㅋㅋㅋ)

      삭제
  19. 책 구입했는데요 책에 나온 주소나 amd rendermonkey toolsuit 가서도 렌더몽키다운로드 주소도 없더라구요;; 게다가 렌더몽키는 좀 나온지 매우 오래되어서 그냥 비주얼 스튜디오로 코딩을 하고싶은데 렌더몽키에 쓴 코드랑 fx파일을 비교하니 다르게 나오더라고요 어떻게 하면 되죠? 어디가면 튜토리얼을 볼수 있을까요?

    답글삭제
    답글
    1. 렌더몽키 다운로드는 여기서 받으시면 됩니다. (제가 미리 백업해둠...)

      https://1drv.ms/u/s!ArnTIqazDXx0gxnQZ0-FlSCioNnE

      삭제
    2. 작성자가 댓글을 삭제했습니다.

      삭제