Vertex Shader: τι είναι, εργασίες και αρχή λειτουργίας

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

Vertex Shader είναι ένα προγραμματιζόμενο στάδιο της γραφικής αλυσίδας (graphics pipeline) που επεξεργάζεται κάθε κορυφή ενός τρισδιάστατου μοντέλου ξεχωριστά. Κορυφή (vertex) είναι ένα σημείο στον τρισδιάστατο χώρο που περιέχει χαρακτηριστικά: συντεταγμένες xyz, κανονικά, χρώμα και συντεταγμένες υφής UV.

Σε αντίθεση με τη σταθερή αλυσίδα (fixed-function pipeline), όπου οι μετασχηματισμοί εκτελούνταν σύμφωνα με ένα άκαμπτο αλγόριθμο, το Vertex Shader δίνει στον προγραμματιστή πλήρη έλεγχο επί του μετασχηματισμού των κορυφών. Αυτό επιτρέπει την υλοποίηση διαδικαστικής κινούμενης εικόνας, παραμόρφωσης μοντέλων, σκελετικού skinning και οποιωνδήποτε μαθηματικών μετασχηματισμών στην πλευρά της GPU.

Θέση του Vertex Shader στη γραφική αλυσίδα

Η γραφική αλυσίδα OpenGL ES περιλαμβάνει μια ακολουθία σταδίων από τα δεδομένα εισόδου έως την τελική εικόνα. Vertex Shader βρίσκεται μετά το στάδιο συναρμολόγησης κορυφών (vertex assembly) και πριν από το στάδιο της ραστεροποίησης. Κάθε κορυφή που αποστέλλεται από την CPU μέσω του buffer κορυφών περνά από το Vertex Shader ακριβώς μία φορά και το αποτέλεσμα μεταφέρεται στο επόμενο στάδιο για τη συναρμολόγηση των πρωτόγονων σχημάτων.

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

Vertex Shader δέχεται στην είσοδο χαρακτηριστικά κορυφής από τον buffer κορυφών (VBO) μέσω δεικτών χαρακτηριστικών (vertex attribute pointers) που έχουν ρυθμιστεί στον κώδικα CPU. Ο προγραμματιστής γράφει κώδικα shader σε GLSL (OpenGL Shading Language) ή παρόμοια γλώσσα, ο οποίος μεταγλωττίζεται από το πρόγραμμα οδήγησης GPU σε εντολές μηχανής για το συγκεκριμένο τσιπ.

Διαδικασία επεξεργασίας κορυφής

Για κάθε κορυφή, το Vertex Shader εκτελεί διαδοχικά τρεις λειτουργίες: ανάγνωση χαρακτηριστικών εισόδου — εφαρμογή μετασχηματισμών που ορίζονται από τον προγραμματιστή — εγγραφή αποτελεσμάτων σε μεταβλητές εξόδου. Η ελάχιστη υποχρεωτική έξοδος είναι η θέση της κορυφής στον χώρο αποκοπής (gl_Position). Όλα τα άλλα δεδομένα εξόδου (χρώμα, κανονικά, συντεταγμένες υφής) παρεμβάλλονται και μεταφέρονται στο επόμενο στάδιο — Fragment Shader.

#version 300 es
in vec3 aPosition;
in vec2 aTexCoord;
uniform mat4 uMVP;
out vec2 vTexCoord;

void main() {
    gl_Position = uMVP * vec4(aPosition, 1.0);
    vTexCoord = aTexCoord;
}

Κύριες εργασίες του Vertex Shader

Vertex Shader επιλύει ένα ευρύ φάσμα εργασιών της γραφικής αλυσίδας που σχετίζονται με τον μετασχηματισμό γεωμετρίας. Κάθε εργασία υλοποιείται μέσω μαθηματικών πράξεων σε διανύσματα και πίνακες, που εκτελούνται παράλληλα για χιλιάδες κορυφές ταυτόχρονα.

Μετασχηματισμός συντεταγμένων μέσω MVP

Η βασική και πιο διαδεδομένη εργασία είναι ο πολλαπλασιασμός των συντεταγμένων κορυφής με τους πίνακες model, view και projection (MVP). Πίνακας MVP μετασχηματίζει την κορυφή από τον τοπικό χώρο του μοντέλου στον χώρο αποκοπής (clip space), ο οποίος στη συνέχεια κανονικοποιείται και μετατρέπεται σε συντεταγμένες οθόνης σε αυτόματα στάδια της αλυσίδας.

Σκελετική κινούμενη εικόνα (Skinning)

Για κινούμενους χαρακτήρες, το Vertex Shader υλοποιεί σκελετική κινούμενη εικόνα (skinning). Κάθε κορυφή είναι συνδεδεμένη με πολλά οστά με συγκεκριμένα βάρη. Vertex blending — το σταθμισμένο άθροισμα μετασχηματισμών από συνδεδεμένα οστά — επιτρέπει ομαλή παραμόρφωση του δέρματος του χαρακτήρα κατά την κίνηση του σκελετού.

Διαδικαστική παραμόρφωση γεωμετρίας

Το Vertex Shader μπορεί να τροποποιεί τη γεωμετρία βάσει χρόνου ή άλλων παραμέτρων uniform χωρίς τη συμμετοχή της CPU. Wave deformation, μετατοπίσεις θορύβου βάσει θορύβου Perlin και εφέ κυματισμού στο νερό — όλα αυτά τα εφέ υλοποιούνται στο vertex shader χωρίς επαναφόρτωση της γεωμετρίας από τη RAM.

Vertex Shader εναντίον Fragment Shader: διαφορές

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

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

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

Απόδοση Vertex Shader είναι κρίσιμη για εφαρμογές πραγματικού χρόνου, ειδικά στην ανάπτυξη κινητών με περιορισμένη κατανάλωση ενέργειας. Οι κύριοι παράγοντες απόδοσης είναι ο αριθμός κορυφών, η πολυπλοκότητα του κώδικα shader και το εύρος ζώνης μνήμης GPU.

Παράγοντες που επηρεάζουν την απόδοση

• Vertex count — αριθμός κορυφών που αποστέλλονται στην GPU ανά καρέ. Μοντέλα με εκατομμύρια πολύγωνα δημιουργούν υψηλό φορτίο στο vertex shader.
• Shader complexity — αριθμός εντολών στο shader. Ένθετοι βρόχοι και υπό συνθήκη άλματα (divergence) μειώνουν την παράλληλη απόδοση μπλοκ SIMD.
• Bandwidth — ταχύτητα ανάγνωσης δεδομένων κορυφών από τη μνήμη βίντεο. Η μορφή χαρακτηριστικών (float32, float16, κανονικοποιημένος ακέραιος) επηρεάζει άμεσα το εύρος ζώνης.

Μέθοδοι βελτιστοποίησης vertex shader

Για τη μείωση του φορτίου Vertex Shader εφαρμόζονται οι ακόλουθες προσεγγίσεις. Level of Detail (LOD) — εναλλαγή σε απλοποιημένες εκδόσεις μοντέλων όταν η κάμερα απομακρύνεται από το αντικείμενο. Instancing — πολλαπλή σχεδίαση της ίδιας γεωμετρίας με διαφορετικούς πίνακες μετασχηματισμού σε μία κλήση σχεδίασης (draw call).

// Vertex Shader με υποστήριξη στιγμιοτύπων
in vec3 aPosition;
in mat4 aInstanceMatrix;
uniform mat4 uViewProjection;

void main() {
    vec4 worldPos = aInstanceMatrix * vec4(aPosition, 1.0);
    gl_Position = uViewProjection * worldPos;
}

Παραδείγματα κώδικα Vertex Shader

Vertex Shader σε διαφορετικά γραφικά API έχει παρόμοια λογική, αλλά διαφορετική σύνταξη και συμβάσεις ονοματοδοσίας. Ας εξετάσουμε την υλοποίηση ενός βασικού vertex shader σε GLSL για OpenGL ES 3.0 και σε Metal Shading Language για iOS και macOS.

Παράδειγμα σε GLSL για OpenGL ES 3.0

#version 300 es
in vec4 position;
in vec3 normal;
in vec2 texcoord;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat3 normalMatrix;

out vec3 vNormal;
out vec2 vTexCoord;
out vec3 vPosition;

void main() {
    vec4 mvPosition = modelViewMatrix * position;
    vPosition = mvPosition.xyz;
    vNormal = normalMatrix * normal;
    vTexCoord = texcoord;
    gl_Position = projectionMatrix * mvPosition;
}

Παράδειγμα σε Metal Shading Language

#include <metal_stdlib>
using namespace metal;

struct VertexIn {
    float3 position [[attribute(0)]];
    float3 normal   [[attribute(1)]];
};

struct VertexOut {
    float4 position [[position]];
    float3 worldNormal;
};

vertex VertexOut
vertexMain(VertexIn in [[stage_in]],
           constant float4x4& mvp [[buffer(1)]]) {
    VertexOut out;
    out.position = mvp * float4(in.position, 1.0);
    out.worldNormal = in.normal;
    return out;
}