🏗️ Pixel Rendering Pipeline: 한 프레임 동안의 일어나는 일

개요

WebGL에서 화면에 한 프레임을 그리는 동안, GPU는 수백만 개의 픽셀을 병렬로 처리합니다. 이 문서는 한 픽셀의 관점에서 1/60초(한 프레임) 동안 일어나는 모든 일을 상세히 설명합니다.

---

1. 전체 렌더링 파이프라인 구조

1.1 시간축 흐름

시간 t = 0 ms (프레임 시작)
  ↓
[CPU] JavaScript 실행 / 데이터 준비
  ↓
[GPU] Vertex Shader (정점 처리)
  ↓
[GPU] Rasterization (래스터화)
  ↓
[GPU] Fragment Shader (픽셀 처리) ← 우리가 집중할 부분
  ↓
[GPU] Output Merger (최종 색상 결정)
  ↓
[Display] 프레임버퍼 → 모니터 출력
  ↓
시간 t = 16.67 ms (60 FPS 기준, 다음 프레임 시작)

1.2 파이프라인 단계

단계	처리 위치	처리 대상	역할
Application	CPU	데이터	프로그램 로직
Vertex Shader	GPU	정점(vertices)	3D → 2D 좌표 변환
Rasterization	GPU	기하학	기하학 → 픽셀 변환
Fragment Shader	GPU	픽셀(fragments)	픽셀의 색 결정
Output Merger	GPU	프레임버퍼	최종 색상 기록

---

2. 한 픽셀의 라이프사이클

시나리오: 1024×1024 정사각형 캔버스에서 원 그리기

초기 상태:

캔버스 해상도: 1024 × 1024 (1,048,576개 픽셀)
렌더링 방식: Fragment Shader SDF
프레임율: 60 FPS (프레임당 16.67ms)

2.1 Stage 0: CPU 단계 (시간: t-1ms ~ t0ms)

1단계 - JavaScript 데이터 준비

// HTML5 Canvas와 WebGL 컨텍스트 확인
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl2');

// Uniform 데이터 준비 (모든 Fragment Shader에 동일하게 전달)
const resolutionLoc = gl.getUniformLocation(program, 'u_resolution');
gl.uniform2f(resolutionLoc, 1024.0, 1024.0);

이 단계에서의 CPU 작업:

• Canvas 컨텍스트 확인
• Shader program 검증
• Uniform 값 준비
• Vertex buffer 확인
• Texture 바인딩

메모리 위치: CPU RAM → GPU VRAM

2단계 - GPU로 명령 전달

// GPU 렌더링 명령 발행
gl.clear(gl.COLOR_BUFFER_BIT);  // 프레임버퍼 초기화
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);  // 렌더링 시작

이 호출에서:

• GPU에 명령 큐(Command Queue)에 작업 추가
• CPU는 즉시 반환 (비동기)
• GPU가 백그라운드에서 처리 시작

2.2 Stage 1: GPU Vertex Shader 단계 (병렬 처리)

개념

Vertex Shader는 각 정점에서 실행됩니다. 전체 화면을 덮는 직사각형(2개 삼각형)을 그리므로 4개의 정점에서만 실행됩니다.

#version 300 es
in vec4 position;  // 정점 위치

void main() {
    gl_Position = position;  // 클립 공간 좌표로 변환
}

실행:

Vertex 0: (-1, -1) → gl_Position = (-1, -1, 0, 1)
Vertex 1: ( 1, -1) → gl_Position = ( 1, -1, 0, 1)
Vertex 2: (-1,  1) → gl_Position = (-1,  1, 0, 1)
Vertex 3: ( 1,  1) → gl_Position = ( 1,  1, 0, 1)

처리 시간: 매우 빠름 (수 나노초)

2.3 Stage 2: Rasterization 단계

개념

정점 4개로 정의된 두 개의 삼각형을 픽셀 단위로 변환합니다.

삼각형 1: Vertex 0, 1, 2
삼각형 2: Vertex 1, 2, 3

결과: 1024 × 1024 = 1,048,576개의 Fragment 생성

각 Fragment에 할당되는 정보:

Fragment (512, 256):
  - 화면 좌표: (512, 256)
  - gl_FragCoord: (512.5, 256.5)  (픽셀 중심)
  - Interpolated values: (VaryingData 보간)
  - Depth: 0.0 (깊이 테스트용)

처리 시간: 병렬 처리 (모든 픽셀 동시)

---

3. Fragment Shader 실행 단계 (핵심)

3.1 한 픽셀의 Fragment Shader 실행

타겟 픽셀: (512, 256)

Step 1: Fragment Shader 호출

#version 300 es
precision highp float;

uniform vec2 u_resolution;
out vec4 outColor;

float circleSDF(vec2 p, float radius) {
    return length(p) - radius;
}

void main() {
    // ===== 픽셀 (512, 256)의 Shader 실행 시작 =====
    
    // Step 1: 현재 픽셀 좌표 읽기
    // gl_FragCoord.xy = (512.5, 256.5)  ← GPU가 자동 제공
    
    // Step 2: 정규화 좌표 계산
    vec2 uv = gl_FragCoord.xy / u_resolution * 2.0 - 1.0;
    // uv = (512.5, 256.5) / (1024.0, 1024.0) * 2.0 - 1.0
    // uv = (1.00098, 0.50098) * 2.0 - 1.0
    // uv = (2.00196, 1.00196) - 1.0
    // uv ≈ (1.00196, 0.00196)
    
    // Step 3: 종횡비 보정 (정사각형이므로 영향없음)
    uv.x *= u_resolution.x / u_resolution.y;
    // uv.x *= 1024.0 / 1024.0 = 1.0 (변화없음)
    
    // Step 4: 거리 계산
    float sdf = circleSDF(uv, 0.3);
    // sdf = length((1.00196, 0.00196)) - 0.3
    // sdf = √(1.00196² + 0.00196²) - 0.3
    // sdf = √1.00394 - 0.3
    // sdf ≈ 1.00196 - 0.3
    // sdf ≈ 0.70196  (외부)
    
    // Step 5: 경계 처리
    float edge = fwidth(sdf) * 1.5;
    // fwidth: 인접 픽셀 간 미분값
    // 화면 해상도에 따라 동적 계산
    
    // Step 6: smoothstep으로 보간
    float fill = smoothstep(edge, -edge, sdf);
    // edge ≈ 0.001 이라 가정
    // smoothstep(0.001, -0.001, 0.70196)
    // sdf > edge이므로 → fill = 0.0
    
    // Step 7: 색상 결정
    vec3 mintColor = vec3(0.0, 0.85, 0.64);
    vec3 color = mix(vec3(0.0), mintColor, fill);
    // color = mix((0.0, 0.0, 0.0), (0.0, 0.85, 0.64), 0.0)
    // color = (0.0, 0.0, 0.0)  ← 검정색
    
    // Step 8: 출력
    outColor = vec4(color, 1.0);
    // outColor = (0.0, 0.0, 0.0, 1.0)  ← 완전 불투명한 검정색
}

처리 시간: 픽셀당 약 200~500 나노초 (수천 게이트 연산)

Step 2: 병렬 처리의 규모

동시에 실행되는 Fragment Shader:

GPU 코어 그룹 1: 픽셀 (0, 0), (1, 0), (2, 0), (3, 0) 동시 실행
GPU 코어 그룹 2: 픽셀 (4, 0), (5, 0), (6, 0), (7, 0) 동시 실행
GPU 코어 그룹 3: 픽셀 (8, 0), (9, 0), (10, 0), (11, 0) 동시 실행
...
GPU 코어 그룹 N: 픽셀 (1020, 1023), (1021, 1023), (1022, 1023), (1023, 1023) 동시 실행

총 1,048,576개 픽셀을 약 262,144개의 "워프(warp)"로 나누어 처리
(NVIDIA GPU 기준 한 워프 = 32개 스레드)

결과적으로 모든 픽셀의 색상이 약 16ms 내에 계산됨

3.2 다양한 픽셀의 처리 예시

픽셀 A: 원의 내부 (256, 512)

uv = (256.5, 512.5) / 1024.0 * 2.0 - 1.0
   ≈ (-0.499, 0.001)

sdf = length((-0.499, 0.001)) - 0.3
    = √(0.249 + 0.000001) - 0.3
    ≈ 0.499 - 0.3
    ≈ 0.199  (경계 근처)

fill = smoothstep(0.001, -0.001, 0.199)
     ≈ 0.8  (부분적으로 채워짐)

color = mix((0.0, 0.0, 0.0), (0.0, 0.85, 0.64), 0.8)
      ≈ (0.0, 0.68, 0.512)  ← 진한 민트색

픽셀 B: 원의 중심 (512, 512)

uv ≈ (0.0, 0.0)

sdf = length((0.0, 0.0)) - 0.3
    = 0.0 - 0.3
    = -0.3  (내부)

fill = smoothstep(0.001, -0.001, -0.3)
     = 1.0  (완전히 채워짐)

color = mix((0.0, 0.0, 0.0), (0.0, 0.85, 0.64), 1.0)
      = (0.0, 0.85, 0.64)  ← 밝은 민트색

픽셀 C: 원의 외부 (768, 768)

uv ≈ (0.501, 0.501)

sdf = length((0.501, 0.501)) - 0.3
    = √(0.502) - 0.3
    ≈ 0.709 - 0.3
    = 0.409  (외부)

fill = smoothstep(0.001, -0.001, 0.409)
     = 0.0  (채워지지 않음)

color = (0.0, 0.0, 0.0)  ← 검정색

---

4. Stage 3: Output Merger 단계

4.1 프레임버퍼 기록

각 Fragment Shader가 outColor를 반환하면, GPU의 Output Merger 단계가 이 값을 프레임버퍼(Framebuffer)에 기록합니다.

픽셀 (512, 256):
  outColor = (0.0, 0.0, 0.0, 1.0)
  → 프레임버퍼[512][256] = (0.0, 0.0, 0.0, 1.0)

픽셀 (256, 512):
  outColor ≈ (0.0, 0.68, 0.512, 1.0)
  → 프레임버퍼[256][512] = (0.0, 0.68, 0.512, 1.0)

픽셀 (512, 512):
  outColor = (0.0, 0.85, 0.64, 1.0)
  → 프레임버퍼[512][512] = (0.0, 0.85, 0.64, 1.0)

메모리 위치: GPU VRAM (프레임버퍼 메모리)

4.2 추가 처리 (선택사항)

Blending (알파 블렌딩)

if (gl_FragCoord가 이미 다른 물체로 채워짐) {
    최종색 = 기존색 * (1 - alpha) + 새색 * alpha
}

Depth Test (깊이 테스트)

if (현재 픽셀의 깊이 < 프레임버퍼의 깊이) {
    프레임버퍼에 기록
} else {
    버림 (뒤에 있으므로 보이지 않음)
}

현재 예제는 깊이 테스트 없으므로 모든 픽셀이 기록됩니다.

---

5. Stage 4: 디스플레이 단계 (t ≈ 15ms)

5.1 프레임버퍼 → 디스플레이 메모리 전송

GPU 프레임버퍼 (VRAM)
  ↓ (PCIe 버스)
디스플레이 제어기
  ↓
모니터 메모리
  ↓
화면 렌더링

시간: 약 1ms (고속 전송)

5.2 모니터 갱신

모니터 갱신율: 60 Hz (16.67ms마다)

시간축:
t=0ms:    프레임 1 렌더링 시작
t=15ms:   프레임 1 프레임버퍼 완성
t=16.67ms: 모니터가 프레임 1 표시 시작
          프레임 2 렌더링 시작 (동시)
t=32ms:   프레임 2 프레임버퍼 완성
t=33.33ms: 모니터가 프레임 2 표시 시작

사용자가 보는 것:

• 원이 검정 배경에 민트색으로 칠해진 이미지
• 각 픽셀의 색상이 Fragment Shader 계산 결과

---

6. 병렬 처리의 구체적 흐름

6.1 시간축으로 본 GPU 처리

t=0ms
  Vertex Shader (4개 정점) 완료 ← 매우 빠름

t=0.1ms
  Rasterization 완료 ← 픽셀 생성

t=0.2ms
  Fragment Shader 시작
  ├─ GPU 코어 그룹 1~256: 동시 실행
  ├─ 각 그룹: 약 4,096개 픽셀 처리
  └─ 총 1,048,576개 픽셀 병렬 처리

t=5ms
  모든 Fragment Shader 완료
  (1,048,576개 픽셀 × 200나노초 / 256개 병렬 처리)

t=5.5ms
  Output Merger 단계 (색상 기록)

t=6ms
  프레임 완성 (프레임버퍼 사용 가능)

t=15ms
  GPU 유휴 상태 (CPU가 다음 프레임 준비)

t=16.67ms
  모니터 갱신, 다음 프레임 시작

6.2 "클럭 주기" 단위 동작

GPU 클럭: 약 1.5~2.0 GHz (현대 GPU)
클럭 주기: 약 0.5~0.67 나노초

한 픽셀의 Fragment Shader 실행:
  - 명령어 개수: 약 200~300개
  - 클럭 주기: 약 400~600 클럭
  - 실제 시간: 약 200~400 나노초

1,048,576개 픽셀 처리:
  - 순차 처리 시간: 약 209ms (불가능)
  - 256개 동시 처리: 약 4ms (실제)
  - 1024개 동시 처리: 약 1ms (최신 GPU)

---

7. 메모리 이동 경로

7.1 한 프레임 동안의 데이터 흐름

┌─────────────────────────────────────────┐
│          CPU (Main Memory)           │
│  Shader source code                  │
│  Canvas context                      │
│  Uniform values (u_resolution)       │
│  Vertex positions                    │
└───────────────┬─────────────────────────┘
               │ (glDrawArrays 호출)
               ↓
┌─────────────────────────────────────────┐
│        GPU Command Queue             │
│      (PCIe Bus를 통해 전송)            │
└──────────────┬──────────────────────────┘
               │
               ↓
┌─────────────────────────────────────────┐
│         GPU VRAM (Video Memory)      │
│  ├─ Vertex Buffer                    │
│  ├─ Compiled Shaders                 │
│  ├─ Uniforms (상수 메모리)             │
│  └─ Framebuffer (출력 버퍼)            │
│     ├─ 프레임 시작: 검정색로 초기화        │
│     ├─ 프레임 중: 각 픽셀 색상 기록       │
│     └─ 프레임 종료: 완성된 이미지         │
└──────────────┬──────────────────────────┘
               │
               ↓
┌─────────────────────────────────────────┐
│      Display Memory (VRAM의 일부)     │
│  (프레임버퍼 복사본)                    │
└──────────────┬──────────────────────────┘
               │
               ↓
┌─────────────────────────────────────────┐
│         Monitor (Display)            │
│  (60 Hz로 갱신)                       │
└─────────────────────────────────────────┘

7.2 메모리 대역폭

프레임 크기: 1024 × 1024 × 4 바이트 (RGBA) = 4MB

프레임버퍼 쓰기:
  - 1,048,576개 픽셀 × 4 바이트 = 4MB
  - 메모리 대역폭: 약 200~300 GB/s (현대 GPU)
  - 전송 시간: 약 13~20 나노초 (매우 빠름)

전체 메모리 접근 시간:
  - Vertex buffer 읽기: 0.1ms
  - Uniform 읽기: 매우 빠름 (캐시)
  - Framebuffer 쓰기: 약 3ms
  - 총합: 약 3.5ms

---

8. 동기화 포인트

8.1 CPU-GPU 동기화

// 프레임 1
gl.drawArrays(...);  // GPU 명령 발행 (비동기)
// CPU는 즉시 반환 (GPU가 처리 중)

// 만약 여기서 동기화를 원하면:
gl.finish();  // GPU 작업이 모두 완료될 때까지 대기
              // → 성능 저하 (병렬 처리 불가)

// 올바른 방법:
gl.drawArrays(...);  // GPU 명령 발행
// CPU는 다음 프레임 준비 시작 (병렬 처리)

8.2 GPU 파이프라인 내부 동기화

Vertex Shader 완료
         ↓
    [동기화]
         ↓
Rasterization 시작
         ↓
Fragment Shader 시작
         ↓
    [동기화]
         ↓
Output Merger 시작

GPU는 이 동기화를 자동으로 처리합니다. 개발자는 명시적으로 제어할 필요 없습니다.

---

9. 병목 현상 분석

9.1 가능한 병목

케이스 1: Fragment Shader 계산 복잡도 높음
┌─────────────────────┐
│  Vertex: 0.1ms      │
│  Rasterize: 0.1ms   │
│  Fragment: 12ms     │ ← 병목
│  Merge: 1ms         │
│  총합: 13.2ms       │ (60 FPS 유지)
└─────────────────────┘

케이스 2: Framebuffer 쓰기 속도 제한
┌─────────────────────┐
│  Vertex: 0.1ms      │
│  Rasterize: 0.1ms   │
│  Fragment: 3ms      │
│  Merge: 8ms         │ ← 병목
│  총합: 11.2ms       │ (60 FPS 유지)
└─────────────────────┘

케이스 3: 정점 개수 많음
┌─────────────────────┐
│  Vertex: 5ms        │ ← 병목
│  Rasterize: 2ms     │
│  Fragment: 3ms      │
│  Merge: 1ms         │
│  총합: 11ms         │ (60 FPS 유지)
└─────────────────────┘

9.2 최적화 전략

Fragment Shader 최적화:
  - 불필요한 계산 제거
  - 정밀도 낮춤 (highp → mediump)
  - 루프 언롤링
  
메모리 최적화:
  - 텍스처 압축
  - 메모리 정렬 개선
  
병렬 처리 활용:
  - 정점/픽셀 동시 처리
  - 여러 프레임 파이프라인

---

10. 실전 측정 방법

10.1 프레임 시간 측정

let frameTime = 0;

function renderLoop() {
    const frameStart = performance.now();
    
    // Fragment Shader 실행
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    
    // GPU 작업 대기 (성능 측정용)
    gl.finish();  // 프로덕션에서는 사용 금지
    
    const frameEnd = performance.now();
    frameTime = frameEnd - frameStart;
    
    console.log(`Frame time: ${frameTime.toFixed(2)}ms`);
    console.log(`FPS: ${(1000 / frameTime).toFixed(1)}`);
    
    requestAnimationFrame(renderLoop);
}

10.2 WebGL Timer Query (정확한 측정)

const query = gl.createQuery();

gl.beginQuery(gl.TIME_ELAPSED, query);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
gl.endQuery(gl.TIME_ELAPSED);

// 나중에 결과 확인
setTimeout(() => {
    const gpuTime = gl.getQueryParameter(query, gl.QUERY_RESULT);
    console.log(`GPU time: ${gpuTime / 1000000}ms`);
}, 1);

---

11. 정리: 한 프레임의 완벽한 타임라인

t=0ms
  ├─ JavaScript: 데이터 준비
  ├─ gl.clear(gl.COLOR_BUFFER_BIT) 호출
  └─ gl.drawArrays(...) 호출 (GPU 명령 발행)

t=0.05ms
  ├─ GPU: Vertex Shader 실행 (4개 정점)
  └─ 결과: 클립 공간 좌표 4개

t=0.1ms
  ├─ GPU: Rasterization
  └─ 결과: 1,048,576개 Fragment 생성

t=0.15ms
  ├─ GPU: Fragment Shader 시작 (256개 병렬)
  └─ 픽셀 (512, 256):
     1. gl_FragCoord 읽기
     2. uv 정규화
     3. sdf 계산
     4. fill 계산
     5. color 결정
     6. outColor 기록

t=5ms
  └─ GPU: 모든 픽셀 계산 완료

t=5.5ms
  ├─ GPU: Output Merger
  └─ 프레임버퍼에 모든 색상 기록 완료

t=6ms
  └─ 프레임 렌더링 완료 (CPU는 다음 프레임 준비)

t=16.67ms
  ├─ 모니터: 이 프레임 표시 시작 (60 Hz)
  └─ GPU: 다음 프레임 렌더링 시작

---

12. 용어집

용어	정의
Fragment	픽셀과 유사하지만, 최종 색상 결정 전의 중간 데이터 단위
Framebuffer	GPU VRAM의 영역으로, 모든 픽셀의 색상 데이터를 저장
Rasterization	3D 기하학 데이터를 2D 픽셀로 변환하는 과정
Warp	GPU의 32개 스레드 묶음 (병렬 처리 단위)
fwidth()	인접 픽셀 간의 미분값 (화면 해상도 독립적 계산용)
smoothstep()	선형 보간 함수 (경계 부드럽게 처리)
Uniform	모든 픽셀에서 동일한 값 (읽기 전용)