---
category: Unified
tags: [auto-consolidated, technical-documentation]
title: [[Fragment Shading|Fragment Shading]]
last_updated: 2026-05-02
---

# [[Fragment Shading|Fragment Shading]]

## 📌 Brief Summary
> 프래그먼트 셰이딩(Fragment Shading)은 렌더링 파이프라인 후반부에서 픽셀 단위의 렌더링 계산(퍼 픽셀 조명 연산 등)을 수행하여 최종 색상 값을 결정하는 프로세스이다 [1, 2]. 다수의 텍스처 룩업이나 복잡한 연산이 포함될 경우 필 레이트([[Fill Rate|Fill Rate]])를 크게 저하시킬 수 있으며 [2], 동일 픽셀에 여러 번 렌더링 연산이 중첩되는 오버드로우([[Overdraw|Overdraw]]) 현상이 발생할 경우 GPU 성능 병목의 주요 원인이 되기도 한다 [3].

---

> 프래그먼트 셰이딩(Fragment Shading)은 그래픽 렌더링 파이프라인의 후반부 단계로, 최종 색상 값을 결정하기 위해 픽셀 단위의 연산을 실행하는 과정이다 [1, 2]. 주로 텍스처 데이터 샘플링, 픽셀 단위 조명(per-pixel lighting), 알파(투명도) 값을 계산하여 표면의 디테일을 구현하는 역할을 수행한다 [1, 3, 4]. 화면에 보이는 픽셀에 대해 계산을 수행하므로, 픽셀이 중첩되어 여러 번 렌더링되는 오버드로우([[Overdraw|Overdraw]])가 발생하거나 복잡한 셰이더를 사용할 경우 GPU 성능 저하 및 프레임 지연의 주요 원인이 된다 [1, 2].

## 📖 Core Content
- **픽셀 단위 연산의 수행:** 프래그먼트 셰이더는 픽셀의 최종 색상 값을 결정하는 픽셀 단위의 계산을 전담한다 [2]. 버텍스 셰이더([[Vertex Shader|Vertex Shader]])와 프래그먼트 셰이더 사이에서는 varying 변수를 통해 데이터가 전달되며 [4], 구워진 노멀 맵(baked normal maps) 등을 활용해 복잡한 표면 디테일을 픽셀 셰이딩(pixel shading) 방식으로 렌더링한다 [1].
- **셰이더 복잡도와 필 레이트(Fill Rate):** 프래그먼트 셰이더 내에서 여러 텍스처를 조회하거나, 수학적 연산 및 조건 논리가 복잡해질 경우 중간 사양의 GPU에서는 필 레이트가 50-70%가량 감소할 수 있다 [2]. 특히 PBR(물리 기반 렌더링) 환경에서는 각 픽셀마다 다수의 텍스처 샘플링(알베도, 노멀, 메탈릭, 러프니스 등) 및 환경 반사 연산을 처리해야 하므로 프래그먼트 처리 시간이 급증하게 된다 [2].
- **오버드로우(Overdraw)의 영향:** 프래그먼트 셰이딩 단계에서 나타나는 오버드로우는 투명한 기하학적 구조가 겹치거나 깊이 정렬(Depth [[Sorting|Sorting]])이 효율적이지 않아 동일한 픽셀 위치에 렌더링 쓰기 작업이 여러 번 중첩되는 현상이다 [3, 5]. 이는 화면에 보이지 않는 픽셀의 연산에까지 GPU 자원을 낭비하게 만든다 [5].
- **정렬 부재와 프래그먼트 바운드([[Fragment-bound|Fragment-bound]]) 현상:** 불투명 객체를 렌더링할 때 객체를 '앞에서 뒤로(Front-to-Back)' 정렬하면 가려진 픽셀 연산을 일찍 종료하는 Early-Z 최적화를 통해 성능을 확보할 수 있다 [3]. 하지만 [[InstancedMesh|InstancedMesh]]처럼 인스턴스들이 정렬되지 않은 상태로 렌더링되는 경우 이 최적화가 불가능해 막대한 오버드로우 비용을 발생시키며, 결과적으로 전체 씬(Scene)의 렌더링이 프래그먼트 연산의 한계에 부딪히는 프래그먼트 바운드 상태에 빠질 수 있다 [3, 6].

---

- **역할 및 데이터 처리:** 
  프래그먼트 셰이더는 정점 셰이더([[Vertex Shader|Vertex Shader]])로부터 Varying 변수를 통해 데이터를 전달받아 픽셀 단위로 처리한다 [5]. 이 셰이더는 픽셀 셰이딩이라 불리는 조명 계산, 노멀 맵을 활용한 미세한 표면 디테일 모사, 그리고 텍스처에 따른 알파(Alpha) 값 연산 등을 담당한다 [3, 4]. 이 밖에도 폰트 벡터 데이터를 바탕으로 프래그먼트 셰이더 내에서 직접 텍스트를 재렌더링하는 기법도 존재한다 [6, 7].

- **성능 병목과 오버드로우(Overdraw):** 
  여러 개의 텍스처 샘플링과 복잡한 수학적 연산 및 조건문이 포함된 PBR(Physically Based Rendering) 재질 같은 복잡한 셰이더는 중간 사양 GPU의 필 레이트([[Fill Rate|Fill Rate]])를 50~70%까지 감소시킬 수 있다 [1]. 특히 동일한 픽셀 위치에 여러 번 쓰기 작업이 중첩되는 오버드로우(Overdraw) 현상이 발생하면 씬(Scene) 전체가 '프래그먼트 바운드([[Fragment-bound|Fragment-bound]])' 상태에 빠져 심각한 프레임 처리 지연이 발생한다 [2].

- **프래그먼트 셰이더 최적화 기법:**
  - **거리 기반 및 가시성 최적화:** 동적 LOD(Level of Detail) 전환을 활용하면 픽셀 레벨의 GPU 프래그먼트 처리 연산을 60~75%가량 줄일 수 있다 [8]. 또한 뎁스 프리패스([[Depth Pre-Pass|Depth Pre-Pass]])를 구현하면 GPU가 값비싼 메인 셰이더 연산에 진입하기 전에 가려진 프래그먼트를 미리 폐기(Discard)하여 프래그먼트 셰이더의 부하를 최대 30%까지 감소시킨다 [9].
  - **재질(Material) 모델 단순화:** 연산량이 많은 `MeshStandardMaterial`은 프래그먼트 프로세서를 포화 상태로 만들 수 있으므로, 하드웨어 성능이 제한적인 환경에서는 픽셀별 스펙큘러 하이라이트만 제공하는 `MeshPhongMaterial`이나 조명 연산을 배제한 플랫 셰이딩(Flat Shaded) 커스텀 셰이더를 사용하여 프래그먼트 연산 비용을 최소화해야 한다 [10, 11].
  - **절차적 렌더링(Procedural Rendering):** 엣지(Edge)나 와이어프레임을 그릴 때 별도의 기하학적 도형을 추가로 그리지 않고, 무게중심 좌표계(Barycentric Coordinate)를 이용해 프래그먼트 셰이더 내에서 절차적으로 엣지까지의 거리를 계산하여 렌더링하는 것이 훨씬 효율적이다 [12].

## ⚖️ Trade-offs & Caveats
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.

---

- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.

## 🔗 Knowledge Connections
- **Related Topics:** [[Overdraw|Overdraw]], Vertex Shader, Fill Rate, [[PBR|PBR]]
- **Projects/Contexts:** Three.js [[WebGL|WebGL]] Rendering Optimization, InstancedMesh Performance [[Bottlenecks|Bottlenecks]]
- **Contradictions/Notes:** 소스에 관련 정보가 부족합니다.

---
*Last updated: 2026-04-19*

---

---

- **Related Topics:** [[Overdraw|Overdraw]], Vertex Shader, [[Level of Detail (LOD)|Level of Detail (LOD]], Physically Based Rendering (PBR)
- **Projects/Contexts:** Three.js, [[WebGL|WebGL]]
- **Contradictions/Notes:** 시각적인 현실감을 제공하는 PBR 모델의 재질은 사실적인 빛 반사를 구현하지만 프래그먼트 셰이더에서 수많은 연산과 텍스처 샘플링을 요구한다. 따라서 내장 GPU(iGPU)와 같은 저사양 하드웨어 환경에서는 성능을 크게 저하시키며, 오히려 연산량이 적은 Phong 모델이나 플랫 셰이딩 재질을 사용하는 것이 높은 프레임 레이트 유지를 위해 필수적이라고 소스는 설명한다 [1, 10, 11].

---
*Last updated: 2026-04-19*

---