Vertex Shader: apa itu, tugas dan prinsip kerja

Apa itu Vertex Shader?

Vertex Shader adalah tahap yang dapat diprogram dari pipeline grafis (graphics pipeline) yang memproses setiap titik sudut model tiga dimensi secara terpisah. Titik sudut (vertex) adalah titik dalam ruang tiga dimensi yang berisi atribut: koordinat xyz, normal, warna dan koordinat tekstur UV.

Tidak seperti pipeline fungsi tetap (fixed-function pipeline) di mana transformasi dilakukan sesuai algoritma yang kaku, Vertex Shader memberikan pengembang kendali penuh atas transformasi titik sudut. Ini memungkinkan implementasi animasi prosedural, deformasi model, skinning kerangka dan transformasi matematika apa pun di sisi GPU.

Tempat Vertex Shader dalam pipeline grafis

Pipeline grafis OpenGL ES mencakup urutan tahapan dari data masukan hingga gambar akhir. Vertex Shader terletak setelah tahap perakitan titik sudut (vertex assembly) dan sebelum tahap rasterisasi. Setiap titik sudut yang dikirim dari CPU melalui buffer titik sudut melewati Vertex Shader tepat satu kali, dan hasilnya diteruskan ke tahap berikutnya untuk perakitan primitif.

Bagaimana Vertex Shader bekerja?

Vertex Shader menerima atribut titik sudut dari buffer titik sudut (VBO) melalui pointer atribut (vertex attribute pointers) yang dikonfigurasi dalam kode CPU. Pengembang menulis kode shader dalam GLSL (OpenGL Shading Language) atau bahasa serupa, yang dikompilasi oleh driver GPU menjadi instruksi mesin untuk chip tertentu.

Proses pemrosesan titik sudut

Untuk setiap titik sudut, Vertex Shader secara berurutan melakukan tiga operasi: membaca atribut masukan — menerapkan transformasi yang ditentukan oleh pengembang — menulis hasil ke variabel keluaran. Keluaran minimum wajib adalah posisi titik sudut di ruang klip (gl_Position). Semua data keluaran lainnya (warna, normal, koordinat tekstur) diinterpolasi dan diteruskan ke tahap berikutnya — 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;
}

Tugas Utama Vertex Shader

Vertex Shader memecahkan berbagai tugas pipeline grafis yang terkait dengan transformasi geometri. Setiap tugas diimplementasikan melalui operasi matematika pada vektor dan matriks, yang dijalankan secara paralel untuk ribuan titik sudut secara bersamaan.

Transformasi koordinat melalui MVP

Tugas dasar dan paling umum adalah mengalikan koordinat titik sudut dengan matriks model, view dan projection (MVP). Matriks MVP mengubah titik sudut dari ruang lokal model ke ruang klip (clip space), yang kemudian dinormalisasi dan diubah menjadi koordinat layar dalam tahap otomatis pipeline.

Animasi Kerangka (Skinning)

Untuk karakter yang dianimasi, Vertex Shader mengimplementasikan animasi kerangka (skinning). Setiap titik sudut terikat pada beberapa tulang dengan bobot tertentu. Vertex blending — jumlah tertimbang dari transformasi dari tulang yang terikat — memungkinkan deformasi kulit karakter yang halus saat kerangka bergerak.

Deformasi Prosedural Geometri

Vertex Shader dapat memodifikasi geometri berdasarkan waktu atau parameter uniform lainnya tanpa partisipasi CPU. Wave deformation, perpindahan noise berdasarkan noise Perlin dan efek riak di air — semua efek ini diimplementasikan dalam vertex shader tanpa memuat ulang geometri dari RAM.

Vertex Shader vs Fragment Shader: perbedaan

Meskipun kedua jenis shader adalah tahap yang dapat diprogram dari pipeline grafis, Vertex Shader dan Fragment Shader memecahkan tugas yang fundamentally berbeda dan bekerja pada tahap pemrosesan gambar yang berbeda.

Perbedaan utamanya adalah frekuensi panggilan. Vertex Shader dipanggil satu kali per titik sudut, sedangkan Fragment Shader dipanggil untuk setiap fragmen (piksel). Dalam adegan dengan resolusi tinggi, jumlah panggilan Fragment Shader melebihi jumlah panggilan Vertex Shader ribuan kali, yang membuat optimasi shader piksel semakin kritis.

Kinerja dan Optimasi Vertex Shader

Kinerja Vertex Shader sangat penting untuk aplikasi real-time, terutama dalam pengembangan mobile dengan konsumsi daya terbatas. Faktor kinerja utama adalah jumlah titik sudut, kompleksitas kode shader dan bandwidth memori GPU.

Faktor yang mempengaruhi kinerja

• Vertex count — jumlah titik sudut yang dikirim ke GPU per frame. Model dengan jutaan poligon menciptakan beban tinggi pada vertex shader.
• Shader complexity — jumlah instruksi dalam shader. Loop bersarang dan lompatan bersyarat (divergence) mengurangi kinerja paralel blok SIMD.
• Bandwidth — kecepatan membaca data titik sudut dari memori video. Format atribut (float32, float16, bilangan bulat ternormalisasi) secara langsung mempengaruhi bandwidth.

Metode optimasi vertex shader

Untuk mengurangi beban Vertex Shader, pendekatan berikut diterapkan. Level of Detail (LOD) — beralih ke versi model yang disederhanakan saat kamera menjauh dari objek. Instancing — menggambar geometri yang sama beberapa kali dengan matriks transformasi berbeda dalam satu panggilan gambar (draw call).

// Vertex Shader dengan dukungan instansiasi
in vec3 aPosition;
in mat4 aInstanceMatrix;
uniform mat4 uViewProjection;

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

Contoh Kode Vertex Shader

Vertex Shader pada API grafis yang berbeda memiliki logika yang serupa, tetapi sintaks dan konvensi penamaan yang berbeda. Mari kita lihat implementasi vertex shader dasar dalam GLSL untuk OpenGL ES 3.0 dan dalam Metal Shading Language untuk iOS dan macOS.

Contoh dalam GLSL untuk 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;
}

Contoh dalam 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;
}