Vertex Shader: wat is het, taken en werkingsprincipe

Wat is Vertex Shader?

Vertex Shader is een programmeerbare fase van de grafische pijplijn (graphics pipeline) die elk hoekpunt van een driedimensionaal model afzonderlijk verwerkt. Een hoekpunt (vertex) is een punt in de driedimensionale ruimte met attributen: xyz-coördinaten, normalen, kleur en UV-textuurcoördinaten.

In tegenstelling tot de vaste functie pijplijn (fixed-function pipeline), waar transformaties werden uitgevoerd volgens een vast algoritme, geeft Vertex Shader de ontwikkelaar volledige controle over de transformatie van hoekpunten. Dit maakt procedurele animatie, modelvervorming, skelet-skinnen en wiskundige transformaties aan de GPU-zijde mogelijk.

Plaats van Vertex Shader in de grafische pijplijn

De grafische pijplijn van OpenGL ES omvat een reeks fasen van invoergegevens tot het uiteindelijke beeld. Vertex Shader bevindt zich na de fase van hoekpuntsamenstelling (vertex assembly) en vóór de rasterisatiefase. Elk hoekpunt dat via de vertex buffer van de CPU wordt verzonden, gaat precies één keer door de Vertex Shader en het resultaat wordt doorgegeven aan de volgende fase voor de samenstelling van primitieven.

Hoe werkt Vertex Shader?

Vertex Shader ontvangt de attributen van het hoekpunt uit de vertex buffer (VBO) via attribuut pointers (vertex attribute pointers) die in de CPU-code zijn geconfigureerd. De ontwikkelaar schrijft de shader code in GLSL (OpenGL Shading Language) of een vergelijkbare taal, die door de GPU-driver wordt gecompileerd naar machine-instructies voor de specifieke chip.

Het verwerkingsproces van een hoekpunt

Voor elk hoekpunt voert Vertex Shader achtereenvolgens drie bewerkingen uit: lezen van invoerattributen — toepassen van door de ontwikkelaar gedefinieerde transformaties — schrijven van resultaten naar uitvoervariabelen. De minimaal verplichte uitvoer is de positie van het hoekpunt in de clip space (gl_Position). Alle andere uitvoergegevens (kleur, normalen, textuurcoördinaten) worden geïnterpoleerd en doorgegeven aan de volgende fase — 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;
}

Belangrijkste taken van Vertex Shader

Vertex Shader lost een breed scala aan taken van de grafische pijplijn op die verband houden met geometrietransformatie. Elke taak wordt geïmplementeerd via wiskundige bewerkingen op vectoren en matrices, die parallel worden uitgevoerd voor duizenden hoekpunten tegelijk.

Coördinatentransformatie via MVP

De basis en meest voorkomende taak is het vermenigvuldigen van hoekpuntcoördinaten met de model-, view- en projectiematrices (MVP). MVP-matrix transformeert het hoekpunt van de lokale modelruimte naar de clip space, die vervolgens wordt genormaliseerd en omgezet naar schermcoördinaten in de automatische pijplijnfasen.

Skeletanimatie (Skinnen)

Voor geanimeerde personages implementeert Vertex Shader skeletanimatie (skinnen). Elk hoekpunt is gekoppeld aan meerdere botten met specifieke gewichten. Vertex blending — de gewogen som van transformaties van gekoppelde botten — maakt vloeiende vervorming van de huid van het personage mogelijk bij beweging van het skelet.

Procedurele vervorming van geometrie

Vertex Shader kan geometrie wijzigen op basis van tijd of andere uniform-parameters zonder tussenkomst van de CPU. Wave deformation, ruisverplaatsingen op basis van Perlin noise en rimpelingseffecten op water — al deze effecten worden geïmplementeerd in de vertex shader zonder geometrie uit het RAM te herladen.

Vertex Shader vs Fragment Shader: verschillen

Hoewel beide shader-types programmeerbare fasen van de grafische pijplijn zijn, lossen Vertex Shader en Fragment Shader fundamenteel verschillende taken op en werken ze in verschillende stadia van beeldverwerking.

Het belangrijkste verschil is de aanroepfrequentie. Vertex Shader wordt één keer per hoekpunt aangeroepen, terwijl Fragment Shader wordt aangeroepen voor elk fragment (pixel). In een scène met hoge resolutie overtreft het aantal Fragment Shader-aanroepen het aantal Vertex Shader-aanroepen duizenden keren, wat optimalisatie van pixelshaders nog kritischer maakt.

Prestaties en optimalisatie van Vertex Shader

Prestaties van Vertex Shader zijn cruciaal voor realtime toepassingen, vooral in mobiele ontwikkeling met beperkt energieverbruik. De belangrijkste prestatie factoren zijn het aantal hoekpunten, de complexiteit van de shader code en de bandbreedte van het GPU-geheugen.

Factoren die de prestaties beïnvloeden

• Vertex count — het aantal hoekpunten dat per frame naar de GPU wordt verzonden. Modellen met miljoenen polygonen creëren een hoge belasting op de vertex shader.
• Shader complexity — het aantal instructies in de shader. Geneste lussen en voorwaardelijke sprongen (divergence) verminderen de parallelle prestaties van SIMD-blokken.
• Bandwidth — de snelheid van het lezen van vertexgegevens uit het videogeheugen. Het attribuutformaat (float32, float16, genormaliseerd geheel getal) beïnvloedt rechtstreeks de bandbreedte.

Optimalisatiemethoden voor vertex shaders

Om de belasting van Vertex Shader te verminderen, worden de volgende benaderingen toegepast. Level of Detail (LOD) — overschakelen naar vereenvoudigde versies van modellen wanneer de camera van het object af beweegt. Instancing — het meerdere keren tekenen van dezelfde geometrie met verschillende transformatiematrices in één tekenaanroep (draw call).

// Vertex Shader met instantie-ondersteuning
in vec3 aPosition;
in mat4 aInstanceMatrix;
uniform mat4 uViewProjection;

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

Voorbeelden van Vertex Shader code

Vertex Shader heeft in verschillende grafische API's een vergelijkbare logica, maar een andere syntaxis en naamgevingsconventies. Laten we de implementatie van een basis vertex shader in GLSL voor OpenGL ES 3.0 en in Metal Shading Language voor iOS en macOS bekijken.

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

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