Fragment Shader — wat is het, taken en werkingsprincipe

Wat is Fragment Shader?

Fragment Shader (fragment- of pixelshader) — is een programmeerbare fase van de grafische pijplijn die de uiteindelijke kleur van elk fragment van de afbeelding berekent. Een fragment is een potentiële pixel die, na het doorstaan van diepte- en stenciltests, een zichtbare pixel op het scherm wordt.

Fragment Shader wordt uitgevoerd na rasterisatie, wanneer driedimensionale primitieven (driehoeken) al zijn omgezet in een set fragmenten. De shader ontvangt aan de ingang geïnterpoleerde attributen — textuurcoördinaten, normalen, kleuren die in de Vertex Shader voor de hoekpunten van de driehoek zijn berekend en lineair geïnterpoleerd voor elke pixel erin.

Geschiedenis van de evolutie van Fragment Shader

Vóór de komst van programmeerbare shaders (vóór DirectX 8 / OpenGL 2.0) werd de pixelkleurberekening uitgevoerd door een vaste pijplijn met een beperkte set bewerkingen. Programmeerbare Fragment Shader verscheen in 2001 en breidde de grafische mogelijkheden radicaal uit: ontwikkelaars kregen volledige controle over de kleur van elke pixel, wat fotorealistische belichting, complexe materialen en post-effecten mogelijk maakte.

Hoe werkt Fragment Shader?

Fragment Shader wordt door de GPU gestart voor elk fragment dat door de rasterizer is gegenereerd. Elke shader-aanroep verwerkt één fragment, leest de invoergegevens, voert de gebruikerscode uit en schrijft de uitvoerwaarde — de kleur van het fragment in RGBA-formaat.

Invoer- en uitvoergegevens

De invoergegevens van Fragment Shader omvatten geïnterpoleerde attributen van de Vertex Shader (textuurcoördinaten, normalen, kleuren), uniforme variabelen (lichtbronnen, matrices) en textuur samplers. De uitvoergegevens — kleurvector (gl_FragColor in OpenGL ES 2.0 of gebruikersvariabele in ES 3.0) die naar de kleurbuffer wordt geschreven.

#version 300 es
precision mediump float;

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

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

Belangrijkste taken van Fragment Shader

Fragment Shader is verantwoordelijk voor de visuele kwaliteit van het beeld. Alle effecten die de gebruiker op het scherm ziet — kleur, schaduwen, reflecties, transparantie — worden precies in deze fase van de grafische pijplijn berekend.

Textureren

De meest voorkomende bewerking — het ophalen van kleur uit een textuur op basis van geïnterpoleerde UV-coördinaten. Sampler2D en de functie texture() maken het mogelijk de pixelkleur uit een texture-atlas te verkrijgen. Filtratie (bilineair, trilineair, anisotroop) wordt geregeld via samplerparameters en beïnvloedt de scherpte van het beeld onder verschillende kijkhoeken.

Phong-belichting

Het Phong-belichtingsmodel (Phong shading) wordt in Fragment Shader voor elke pixel berekend, wat gladdere highlights geeft dan vertexbelichting (Gouraud shading). Phong lighting omvat drie componenten: ambient (omgevingslicht), diffuse (diffuus) en specular (spiegelend).

// Fragment shader met Phong-belichting
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);
}

Post-effecten en blending

Fragment Shader maakt het mogelijk nabewerking toe te passen: kleurcorrectie via LUT-tabellen, vervaging (blur), gloei-effect (bloom) en tonemapping voor HDR-rendering. Al deze effecten werken op pixelniveau en worden in realtime uitgevoerd.

Prestaties van Fragment Shader en optimalisatie

Prestaties van Fragment Shader — de belangrijkste factor die FPS beperkt in moderne mobiele games. Omdat de shader voor elke pixel wordt aangeroepen, kan zelfs een kleine toename in codecomplexiteit leiden tot een merkbare daling van de framerate.

Belangrijkste prestatieproblemen

• Overdraw — het opnieuw tekenen van dezelfde pixel door overlapping van objecten. Vooral kritisch voor halfdoorzichtige objecten.
• Voorwaardelijke vertakkingen — vertakkingen in Fragment Shader verminderen de efficiëntie van SIMD-uitvoering, omdat de GPU beide paden moet uitvoeren.
• Texture lookups — elke texture lookup heeft een vertraging van tientallen GPU-cycli. Het minimaliseren van het aantal samplers versnelt de shader.

Optimalisatiemethoden voor Fragment Shader

Voor mobiele GPU's (Qualcomm Adreno, ARM Mali) wordt aanbevolen: gebruik mediump precision voor float-variabelen, combineer texture lookups, pas early-z-tests toe om onzichtbare fragmenten vóór shader-uitvoering te verwijderen.

Fragment Shader vs Vertex Shader: vergelijking

Beide shader-types worden door de ontwikkelaar geprogrammeerd, maar werken in verschillende fasen van de pijplijn en lossen verschillende taken op. Fragment Shader is aanzienlijk resource-intensiever vanwege het aantal aanroepen.

Voorbeelden van Fragment Shader-code

Fragment Shader kan eenvoudig zijn (textuur lookup) of complex (meerlaagse belichting). Laten we twee praktische voorbeelden bekijken: basistexturering en een gradiënteffect met behulp van tijd.

Basistexturering in 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);
}

Voorbeeld in 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;
}