Fragment Shader — 정의, 작업 및 작동 원리

Fragment Shader란?

Fragment Shader(프래그먼트 또는 픽셀 셰이더)는 이미지의 각 프래그먼트의 최종 색상을 계산하는 그래픽 파이프라인의 프로그래밍 가능한 단계입니다. 프래그먼트는 깊이 및 스텐실 테스트를 통과한 후 화면에서 보이는 픽셀이 될 잠재적 픽셀입니다.

Fragment Shader는 래스터화 후에 실행되며, 3D 프리미티브(삼각형)가 이미 프래그먼트 집합으로 변환된 상태입니다. 셰이더는 Vertex Shader에서 삼각형 정점에 대해 계산되고 삼각형 내부의 각 픽셀에 대해 선형 보간된 보간 속성(텍스처 좌표, 법선, 색상)을 받습니다.

Fragment Shader 진화의 역사

프로그래밍 가능한 셰이더가 등장하기 전(DirectX 8 / OpenGL 2.0 이전)에는 픽셀 색상 계산이 제한된 연산 집합을 가진 고정 파이프라인에 의해 수행되었습니다. 프로그래밍 가능한 Fragment Shader는 2001년에 등장하여 그래픽 기능을 근본적으로 확장했습니다: 개발자는 각 픽셀의 색상을 완전히 제어할 수 있게 되어 사실적인 조명, 복잡한 재질 및 후처리 효과를 구현할 수 있었습니다.

Fragment Shader 작동 방식

Fragment Shader는 래스터라이저가 생성한 각 프래그먼트에 대해 GPU에 의해 실행됩니다. 각 셰이더 호출은 하나의 프래그먼트를 처리하고, 입력 데이터를 읽고, 사용자 코드를 실행하며, 출력 값(RGBA 형식의 프래그먼트 색상)을 씁니다.

입력 및 출력 데이터

Fragment Shader의 입력 데이터에는 Vertex Shader의 보간 속성(텍스처 좌표, 법선, 색상), 균일 변수(광원, 행렬) 및 텍스처 샘플러가 포함됩니다. 출력 데이터는 색상 벡터(OpenGL ES 2.0의 gl_FragColor 또는 ES 3.0의 사용자 정의 변수)로, 컬러 버퍼에 기록됩니다.

#version 300 es
precision mediump float;

in vec2 vTexCoord;
uniform sampler2D uTexture;
out vec4 fragColor;

void main() {
    fragColor = texture(uTexture, vTexCoord);
}

Fragment Shader의 주요 작업

Fragment Shader는 이미지의 시각적 품질을 담당합니다. 사용자가 화면에서 보는 모든 효과(색상, 그림자, 반사, 투명도)는 그래픽 파이프라인의 이 단계에서 계산됩니다.

텍스처링

가장 빈번한 작업은 보간된 UV 좌표를 사용하여 텍스처에서 색상을 샘플링하는 것입니다. Sampler2D와 texture() 함수를 사용하면 텍스처 아틀라스에서 픽셀 색상을 가져올 수 있습니다. 필터링(이중선형, 삼중선형, 이방성)은 샘플러 매개변수를 통해 제어되며 다양한 시야각에서 이미지 선명도에 영향을 줍니다.

Phong 조명

Phong 셰이딩 모델은 Fragment Shader에서 픽셀 단위로 계산되어 정점 조명(Gouraud 셰이딩)보다 더 부드러운 하이라이트를 제공합니다. Phong 조명에는 세 가지 구성 요소가 포함됩니다: 주변(ambient), 확산(diffuse) 및 반사(specular)입니다.

// Fragment shader with Phong lighting
in vec3 vNormal;
in vec3 vPosition;
uniform vec3 uLightDir;
uniform vec3 uLightColor;

void main() {
    vec3 norm = normalize(vNormal);
    float diff = max(dot(norm, uLightDir), 0.0);
    fragColor = vec4(uLightColor * diff, 1.0);
}

후처리 효과 및 블렌딩

Fragment Shader를 사용하면 룩업 테이블(LUT)을 통한 색상 보정, 블러, 블룸 효과 및 HDR 렌더링을 위한 톤매핑과 같은 후처리를 적용할 수 있습니다. 이러한 모든 효과는 픽셀 수준에서 작동하며 실시간으로 실행됩니다.

Fragment Shader 성능 및 최적화

Fragment Shader 성능은 최신 모바일 게임에서 FPS를 제한하는 주요 요소입니다. 셰이더가 각 픽셀에 대해 호출되므로 코드 복잡성이 약간만 증가해도 프레임 속도가 눈에 띄게 떨어질 수 있습니다.

주요 성능 문제

• Overdraw — 객체 겹침으로 인한 동일 픽셀의 재렌더링. 반투명 객체의 경우 특히 중요합니다.
• 조건 분기 — Fragment Shader의 분기는 SIMD 실행 효율성을 떨어뜨립니다. GPU가 두 분기를 모두 실행해야 하기 때문입니다.
• 텍스처 샘플링 — 각 텍스처 샘플링은 수십 GPU 클록 사이클의 지연 시간이 있습니다. 샘플러 수를 최소화하면 셰이더가 빨라집니다.

Fragment Shader 최적화 방법

모바일 GPU(Qualcomm Adreno, ARM Mali)의 경우: float 변수에 mediump precision을 사용하고, 텍스처 샘플링을 결합하고, 셰이더 실행 전에 보이지 않는 프래그먼트를 폐기하기 위해 early-z 테스트를 적용하는 것이 좋습니다.

Fragment Shader vs Vertex Shader: 비교

두 유형의 셰이더 모두 개발자가 프로그래밍할 수 있지만, 파이프라인의 다른 단계에서 작동하고 다른 작업을 해결합니다. Fragment Shader는 호출 횟수로 인해 훨씬 더 리소스 집약적입니다.

Fragment Shader 코드 예제

Fragment Shader는 단순(텍스처 샘플링)하거나 복잡(다중 레이어 조명)할 수 있습니다. 두 가지 실용적인 예를 살펴보겠습니다: 기본 텍스처링과 시간을 사용한 그래디언트 효과입니다.

GLSL의 기본 텍스처링

#version 300 es
precision mediump float;
in vec2 vTexCoord;
in vec3 vColor;
uniform sampler2D uDiffuseMap;
out vec4 fragColor;

void main() {
    vec4 texColor = texture(uDiffuseMap, vTexCoord);
    fragColor = texColor * vec4(vColor, 1.0);
}

Metal Shading Language 예제

#include <metal_stdlib>
using namespace metal;

struct FragmentIn {
    float2 texCoord;
    float3 normal;
};

fragment float4
fragmentMain(FragmentIn in [[stage_in]],
              texture2d<float> tex [[texture(0)]]) {
    constexpr sampler s(filter = linear);
    float4 color = tex.sample(s, in.texCoord);
    return color;
}