Vertex Shader: шта је то, задаци и принцип рада

Шта је Vertex Shader?

Vertex Shader је програмабилна фаза графичког цевовода (graphics pipeline) која обрађује сваки врх тродимензионалног модела појединачно. Врх (vertex) је тачка у тродимензионалном простору која садржи атрибуте: xyz координате, нормале, боју и UV текстурне координате.

За разлику од фиксног цевовода (fixed-function pipeline), где су се трансформације извршавале по чврсто задатом алгоритму, Vertex Shader даје програмеру потпуну контролу над трансформацијом врхова. То омогућава имплементацију процедуралне анимације, деформацију модела, скелетни скининг и било која математичка претварања на страни GPU-а.

Место Vertex Shader-а у графичком цевоводу

Графички цевовод OpenGL ES-а укључује секвенцу фаза од улазних података до финалне слике. Vertex Shader се налази после фазе састављања врхова (vertex assembly) и пре фазе растеризације. Сваки врх послат из CPU-а кроз бафер врхова пролази кроз Vertex Shader тачно једном, а резултат се преноси у следећу фазу за састављање примитива.

Како ради Vertex Shader?

Vertex Shader прима на улазу атрибуте врха из бафера врхова (VBO) преко показивача атрибута (vertex attribute pointers) подешених у CPU коду. Програмер пише шейдер код у 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, шумна померања по Перлиновом шуму и ефекти таласа на води — сви ови ефекти се реализују у вертекс шейдеру без поновног учитавања геометрије из RAM меморије.

Vertex Shader vs Fragment Shader: разлике

Иако су оба типа шейдера програмабилне фазе графичког цевовода, Vertex Shader и Fragment Shader решавају принципијелно различите задатке и раде на различитим стадијумима обраде слике.

Кључна разлика је учесталост позива. Vertex Shader се позива једном по врху, док Fragment Shader — за сваки фрагмент (пиксел). У сцени са високом резолуцијом број позива Fragment Shader-а премашује број позива Vertex Shader-а хиљадама пута, што оптимизацију пикселских шейдера чини још критичнијом.

Перформансе и оптимизација Vertex Shader-а

Перформансе Vertex Shader-а су критичне за апликације у реалном времену, посебно у мобилном развоју са ограниченом потрошњом енергије. Главни фактори перформанси су број врхова, сложеност шейдер кода и пропусни опсег меморије GPU-а.

Фактори који утичу на перформансе

• Vertex count — број врхова послатих на GPU по кадру. Модели са милионима полигона стварају високо оптерећење на вертекс шейдер.
• Shader complexity — број инструкција у шейдеру. Угнежђене петље и условни скокови (divergence) смањују паралелне перформансе SIMD блокова.
• Bandwidth — брзина читања података врхова из видео меморије. Формат атрибута (float32, float16, нормализовани цео број) директно утиче на пропусни опсег.

Методе оптимизације вертекс шейдера

За смањење оптерећења 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-јима има сличну логику, али различиту синтаксу и конвенције именовања. Размотримо имплементацију основног вертекс шейдера у 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;
}