셰이더 코딩 입문 공부하기 - 게임 그래픽

※ 이 글은 '셰이더 코딩 입문' 서적을 통해 공부한 주관적인 내용을 정리한 글임을 알립니다.
잘못 설명되거나, 풀이된 내용이 있을 수 있으므로 정확한 내용을 위해서는 아래 링크를 통해 도서를 구매하시기 바랍니다.

http://www.yes24.com/Product/Goods/83491565

셰이더 코딩 입문 - YES24

 

그래픽 분야를 전공으로 잡고 나서 셰이더에 대한 공부가 필요할 것 같아 시작하게 되었다. 특히 현재 지망하는 분야가 VFX쪽이므로 이쪽에서 셰이더가 중요하다는 것을 들었다.

 

렌더링

렌더링은 쉽게말해 화면에 띄우는 것인데, 게임 엔진과 같은 엔진에서는 렌더링을 담당하는 엔진이 메쉬를 프레임으로 만들어준다. 이렇게 프레임을 생성하는 과정이 렌더링 라이프라인(rendering pipeline)인 것이다.

메쉬

vertex, edge, face를 들어보았는가?

vertex edge는 익히 들었지만, face의 경우 제대로 파악하게 된 건 webgl 라이브러리 three.js 로 캡스톤 프로젝트를 하면서 였다. 아무리 vertex를 잘 구성해놔야 face정보에 따라서 vertex가 의미있는지 여부가 결정된다. 간단히 face는 vertex 세 개 이상을 나열하여 폴리곤 삼각형을 표현한 것.

 메쉬에서 버텍스 순서는 중요하다. 개인적인 경험을 빗대어 three.js에서는 기존에 모델에서 index라는 요소를 통해 face를 별도로 정의하였지만, 최근에는 vertex list에 face정보까지 모두 포함시켜 나열하도록 구성되어있다. 이때 사용한 index라는 요소가 index buffer역할을 했던 것 같다. face의 버텍스 순서에 따라 렌더링할 방향도 설정하는 것 당연히 알아두자.

벡터

기하과목을 들어보았다면 알 내용들이다. 생략했다.. ㅎ

색상

셰이더 프로그래밍에서는 색상을 실수로 표기한다고 한다. RGBA로 표기할 수도 XYZW로 표기할 수도 있다.

렌더링 파이프라인

간단하게 

버텍스 셰이더 → 형태 조립 → 래스터라이징 → 프래그먼트 셰이더 → 프래그먼트 처리

로 정리할 수 있다.

 

각 단계별로 말하자면 이렇다.

- 버텍스 셰이더가 버텍스의 구조로 인한 메쉬의 형태를 기억하고 저장한다. 

- 이후 edge를 만들어 조립한다.

- 화면에서 표시할 픽셀 단위로 쪼개는 래스터라이징을 한다.

- 프래그먼트는 화면에 픽셀이라고 생각하면 좋은데 여기에 들어갈 색상을 정한다.

- 프래그먼트 처리를 하는데 이때는 오브젝트가 겹치거나 하는 깊이 관계까지 포함하여 생성하고 실제로 보여줄 것을 거른다.

 

셰이더

GLSL을 사용한다!