렌더링 파이프라인: 그래픽이 만들어지는 과정

1. glDrawElements() 또는 glDrawArrays() 줄 뒤에 무슨 일이?

우리가 흔히 쓰는 glDrawElements()나 glDrawArrays() 같은 함수.
이 한 줄의 호출 뒤에, 정확히 무슨 일이 벌어지고,
어떻게 해서 한 줄의 코드가 화면에 그림을 그릴 수 있을까?

---

2. 렌더링 파이프라인 전체 그림

"정점 데이터가 픽셀이 되는 과정"

OpenGL Grphics Pipe Line

 

 

1. Vertex Specification (정점 입력)

• CPU가 넘겨준 정점 데이터를 GPU가 이해하도록 연결
• glVertexAttribPointer() 등을 통해 설정
• 위치, 색상, 텍스처 좌표 등

Vertex Specification

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (void*)offsetof(Vertex, position));
glEnableVertexAttribArray(0);

glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (void*)offsetof(Vertex, normal));
glEnableVertexAttribArray(1);

glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (void*)offsetof(Vertex, texCoord));
glEnableVertexAttribArray(2);

glVertexAttribPointer(3, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (void*)offsetof(Vertex, color));
glEnableVertexAttribArray(3);

 

2.Vertex Shader (정점 변환)

• 각각의 정점에 대해 실행됨
• 주 역할: 모델 좌표 -> 클립 공간으로 변환
• 출력: gl_Position

Vertex Shader 원본 https://webglfundamentals.org/webgl/lessons/webgl-how-it-works.html

gl_Position = projection * view * model * vec4(position, 1.0);

3.Tessellation (정점 세분화) - 선택적

• 정점 간격을 기준으로 더 촘촘한 삼각형을 만들어 고품질 메시 생성
• 프래그먼트 셰이더에서 보간 정확도 증가
• 픽셀당 연산의 의미가 커짐 (특히 PBR, Normal Mapping 등)

4. Geometry Shader (도형 단위 변형) - 선택적

• 삼각형 전체(3개의 정점 단위)를 입력으로 받아 새로운 정점을 추가하거나 제거 가능
• 예: 실시간 실루엣 생성, 그림자용 볼륨 생성

Geometry Shader

5. Vertex Post-Processing (좌표계 보정 & 클리핑)

• 클립 공간에서 NDC로 변환
• 화면 밖 정점 제거(Clipping)
• 보이지 않는 Primitive들을 삭제해 버림.
• vertex의 좌표계가 clipspace에서 window space로 변환됨

6. Primitive Assembly (도형 조립)

• 정점들을 삼각형, 선, 점 등 기하 도형(Primitive)으로 묶음
• 예: 3개의 정점 -> 하나의 삼각형

Primitive Assembly

7. Rasterization (픽셀로 분할)

• 삼각형 내부를 스캔하여 화면상의 픽셀 좌표(Fragment) 생성
• 이때 보간(interpolation)도 같이 수행됨 (예: UV, 색상)

Fragment & interpolation

8. Fragment Shader ( 픽셀 색상 계산)

• 각 프래그먼트에 대해 실행됨
• 텍스처, 조명, 그림자 계산 등 모두 여기서 처리됨
• 출력: 최종 색상(out vec4 FragColor)

원본 https://webglfundamentals.org/webgl/lessons/webgl-how-it-works.html

9. Per-Sample Operations (테스트 & 블렌딩 후처리)

• Depth Test: 더 가까운 픽셀만 화면에 남김
• Stencil, Alpha, Blending 등 후처리
• 통과한 픽셀만 프레임 버퍼에 기록됨

Stencil Testing

Stencil Testing

 

---

이 모든 과정을 거쳐

GPU는 수천 개의 정점 데이터를 병렬로 처리해
매 프레임마다 수백만 개의 픽셀을 그린다.

---

요약 표

단계	역할
Vertex Spec	정점 입력
Vertex Shader	좌표 변환
Tessellation	고해상도 분할
Geometry Shader	도형 조작
Post-Process	클리핑, 변환
Assembly	도형 만들기
Rasterization	픽셀 분할
Fragment Shader	색 계산
Per-Sample	테스트 & 블렌딩