Fragment Shader — τι είναι, καθήκοντα και αρχή λειτουργίας

Τι είναι το Fragment Shader;

Fragment Shader (fragment ή pixel shader) — είναι ένα προγραμματιζόμενο στάδιο της γραφικής αλυσίδας που υπολογίζει το τελικό χρώμα κάθε τμήματος της εικόνας. Ένα τμήμα είναι ένα δυνητικό pixel που, αφού περάσει τις δοκιμές βάθους και stencil, γίνεται ορατό pixel στην οθόνη.

Το Fragment Shader εκτελείται μετά τη rasterization, όταν τα τρισδιάστατα πρωτόγονα (τρίγωνα) έχουν ήδη μετατραπεί σε ένα σύνολο τμημάτων. Ο shader λαμβάνει στην είσοδο παρεμβαλλόμενα χαρακτηριστικά — συντεταγμένες υφής, κανονικές, χρώματα που υπολογίστηκαν στο Vertex Shader για τις κορυφές του τριγώνου και γραμμικά παρεμβλήθηκαν για κάθε pixel εντός αυτού.

Ιστορία εξέλιξης του Fragment Shader

Πριν από την εμφάνιση προγραμματιζόμενων shader (πριν από DirectX 8 / OpenGL 2.0) ο υπολογισμός του χρώματος του pixel γινόταν από σταθερή αλυσίδα με περιορισμένο σύνολο λειτουργιών. Προγραμματιζόμενο Fragment Shader εμφανίστηκε το 2001 και επέκτεινε ριζικά τις δυνατότητες γραφικών: οι προγραμματιστές απέκτησαν πλήρη έλεγχο του χρώματος κάθε pixel, επιτρέποντας την υλοποίηση φωτορεαλιστικού φωτισμού, σύνθετων υλικών και εφέ μετα-επεξεργασίας.

Πώς λειτουργεί το Fragment Shader;

Fragment Shader εκκινείται από την GPU για κάθε τμήμα που δημιουργείται από τον rasterizer. Κάθε κλήση shader επεξεργάζεται ένα τμήμα, διαβάζει τα δεδομένα εισόδου του, εκτελεί τον κώδικα χρήστη και γράφει την τιμή εξόδου — το χρώμα του τμήματος σε μορφή RGBA.

Δεδομένα εισόδου και εξόδου

Τα δεδομένα εισόδου του Fragment Shader περιλαμβάνουν παρεμβαλλόμενα χαρακτηριστικά από το Vertex Shader (συντεταγμένες υφής, κανονικές, χρώματα), μεταβλητές uniform (πηγές φωτός, πίνακες) και sampler υφής. Τα δεδομένα εξόδου — διάνυσμα χρώματος (gl_FragColor σε OpenGL ES 2.0 ή μεταβλητή χρήστη σε ES 3.0) που γράφεται στο buffer χρώματος.

#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() επιτρέπουν τη λήψη του χρώματος pixel από τον άτλαντα υφών. Το φιλτράρισμα (διγραμμικό, τριγραμμικό, ανισότροπο) ελέγχεται μέσω παραμέτρων sampler και επηρεάζει την ευκρίνεια της εικόνας σε διαφορετικές γωνίες θέασης.

Φωτισμός Phong

Το μοντέλο φωτισμού Phong (Phong shading) υπολογίζεται στο Fragment Shader για κάθε pixel, δίνοντας πιο ομαλές ανταύγειες από τον φωτισμό κορυφής (Gouraud shading). Phong lighting περιλαμβάνει τρία στοιχεία: ambient (περιβάλλον), diffuse (διάχυτο) και specular (κατοπτρικό).

// Fragment shader με φωτισμό Phong
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);
}

Εφέ μετα-επεξεργασίας και blending

Το Fragment Shader επιτρέπει την εφαρμογή μετα-επεξεργασίας: διόρθωση χρώματος μέσω πινάκων LUT, θόλωμα (blur), εφέ λάμψης (bloom) και tonemapping για απόδοση HDR. Όλα αυτά τα εφέ λειτουργούν σε επίπεδο pixel και εκτελούνται σε πραγματικό χρόνο.

Απόδοση του Fragment Shader και βελτιστοποίηση

Απόδοση του Fragment Shader — ο κύριος παράγοντας που περιορίζει τα FPS στα σύγχρονα παιχνίδια κινητών. Δεδομένου ότι ο shader καλείται για κάθε pixel, ακόμη και μια μικρή αύξηση στην πολυπλοκότητα του κώδικα μπορεί να οδηγήσει σε αισθητή πτώση του ρυθμού καρέ.

Κύρια προβλήματα απόδοσης

• Overdraw — εκ νέου σχεδίαση του ίδιου pixel λόγω επικάλυψης αντικειμένων. Ιδιαίτερα κρίσιμο για ημι-διαφανή αντικείμενα.
• Υπό συνθήκη διακλαδώσεις — οι διακλαδώσεις στο Fragment Shader μειώνουν την αποτελεσματικότητα εκτέλεσης SIMD, καθώς η GPU πρέπει να εκτελέσει και τα δύο μονοπάτια.
• Λήψεις υφής — κάθε λήψη υφής (texture lookup) έχει καθυστέρηση δεκάδων κύκλων GPU. Η ελαχιστοποίηση του αριθμού των sampler επιταχύνει τον shader.

Μέθοδοι βελτιστοποίησης Fragment Shader

Για κινητές GPU (Qualcomm Adreno, ARM Mali) συνιστάται: χρήση mediump precision για μεταβλητές float, συνδυασμός λήψεων υφής, εφαρμογή δοκιμών early-z για απόρριψη αόρατων τμημάτων πριν από την εκτέλεση του shader.

Fragment Shader vs Vertex Shader: σύγκριση

Και οι δύο τύποι 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;
}