Fragment Shader — co to jest, zadania i zasada działania

Co to jest Fragment Shader?

Fragment Shader (shader fragmentów lub pikseli) — to programowalny etap potoku graficznego, który oblicza końcowy kolor każdego fragmentu obrazu. Fragment to potencjalny piksel, który po przejściu testów głębi i szablonu staje się widocznym pikselem na ekranie.

Fragment Shader jest wykonywany po rasteryzacji, gdy trójwymiarowe prymitywy (trójkąty) zostały już przekształcone w zestaw fragmentów. Na wejściu shader otrzymuje interpolowane atrybuty — współrzędne tekstury, normalne, kolory, które zostały obliczone w Vertex Shader dla wierzchołków trójkąta i liniowo interpolowane dla każdego piksela wewnątrz niego.

Historia ewolucji Fragment Shader

Przed pojawieniem się programowalnych shaderów (przed DirectX 8 / OpenGL 2.0) obliczanie koloru piksela było wykonywane przez stały potok z ograniczonym zestawem operacji. Programowalny Fragment Shader pojawił się w 2001 roku i radykalnie rozszerzył możliwości grafiki: programiści otrzymali pełną kontrolę nad kolorem każdego piksela, co pozwoliło na realizację fotorealistycznego oświetlenia, złożonych materiałów i efektów końcowych.

Jak działa Fragment Shader?

Fragment Shader jest uruchamiany przez GPU dla każdego fragmentu wygenerowanego przez rasteryzator. Każde wywołanie shadera przetwarza jeden fragment, odczytuje jego dane wejściowe, wykonuje kod użytkownika i zapisuje wartość wyjściową — kolor fragmentu w formacie RGBA.

Dane wejściowe i wyjściowe

Dane wejściowe Fragment Shader obejmują interpolowane atrybuty z Vertex Shader (współrzędne tekstury, normalne, kolory), zmienne uniform (źródła światła, macierze) i samplery tekstur. Dane wyjściowe — wektor koloru (gl_FragColor w OpenGL ES 2.0 lub zmienna użytkownika w ES 3.0), który jest zapisywany do bufora koloru.

#version 300 es
precision mediump float;

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

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

Główne zadania Fragment Shader

Fragment Shader odpowiada za wizualną jakość obrazu. Wszystkie efekty, które użytkownik widzi na ekranie — kolor, cienie, odbicia, przezroczystość — są obliczane właśnie na tym etapie potoku graficznego.

Teksturowanie

Najczęstsza operacja — pobieranie koloru z tekstury według interpolowanych współrzędnych UV. Sampler2D i funkcja texture() pozwalają uzyskać kolor piksela z atlasu tekstur. Filtracja (bilinearna, trójliniowa, anizotropowa) jest kontrolowana przez parametry samplera i wpływa na ostrość obrazu przy różnych kątach widzenia.

Oświetlenie Phonga

Model oświetlenia Phonga (Phong shading) jest obliczany we Fragment Shader dla każdego piksela, co daje gładsze refleksy niż oświetlenie wierzchołkowe (Gouraud shading). Phong lighting obejmuje trzy składowe: ambient (otoczenia), diffuse (rozproszona) i specular (lustrzana).

// Shader fragmentów z oświetleniem Phonga
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);
}

Efekty końcowe i blending

Fragment Shader pozwala nakładać obróbkę końcową: korekcję kolorów przez tabele LUT, rozmycie (blur), efekt poświaty (bloom) i tonemapping dla renderowania HDR. Wszystkie te efekty działają na poziomie pikseli i są wykonywane w czasie rzeczywistym.

Wydajność Fragment Shader i optymalizacja

Wydajność Fragment Shader — główny czynnik ograniczający FPS w nowoczesnych grach mobilnych. Ponieważ shader jest wywoływany dla każdego piksela, nawet niewielkie zwiększenie złożoności kodu może prowadzić do zauważalnego spadku liczby klatek na sekundę.

Główne problemy wydajnościowe

• Overdraw — ponowne rysowanie tego samego piksela z powodu nakładania się obiektów. Szczególnie krytyczny dla półprzezroczystych obiektów.
• Rozgałęzienia warunkowe — gałęzie w Fragment Shader zmniejszają wydajność wykonywania SIMD, ponieważ GPU musi wykonać obie ścieżki.
• Pobieranie z tekstur — każde pobranie tekstury (texture lookup) ma opóźnienie dziesiątek cykli GPU. Minimalizacja liczby samplerów przyspiesza shader.

Metody optymalizacji Fragment Shader

Dla mobilnych GPU (Qualcomm Adreno, ARM Mali) zaleca się: używanie mediump precision dla zmiennych float, łączenie pobrań tekstur, stosowanie testów early-z do odrzucania niewidocznych fragmentów przed wykonaniem shadera.

Fragment Shader vs Vertex Shader: porównanie

Oba typy shaderów są programowane przez programistę, ale działają na różnych etapach potoku i rozwiązują różne zadania. Fragment Shader jest znacznie bardziej zasobożerny ze względu na liczbę wywołań.

Przykłady kodu Fragment Shader

Fragment Shader może być prosty (pobieranie z tekstury) lub złożony (wielowarstwowe oświetlenie). Rozważmy dwa praktyczne przykłady: podstawowe teksturowanie i efekt gradientu z użyciem czasu.

Podstawowe teksturowanie w 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);
}

Przykład w 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;
}