Fragment Shader — apa itu, tugas dan prinsip kerja

Apa itu Fragment Shader?

Fragment Shader (shader fragmen atau piksel) — adalah tahap yang dapat diprogram dari pipa grafis yang menghitung warna akhir setiap fragmen gambar. Fragmen adalah piksel potensial yang, setelah melewati tes kedalaman dan stensil, menjadi piksel yang terlihat di layar.

Fragment Shader dijalankan setelah rasterisasi, ketika primitif tiga dimensi (segitiga) telah diubah menjadi kumpulan fragmen. Shader menerima di input atribut terinterpolasi — koordinat tekstur, normal, warna yang dihitung di Vertex Shader untuk titik sudut segitiga dan diinterpolasi secara linear untuk setiap piksel di dalamnya.

Sejarah evolusi Fragment Shader

Sebelum munculnya shader yang dapat diprogram (sebelum DirectX 8 / OpenGL 2.0), perhitungan warna piksel dilakukan oleh pipa tetap dengan serangkaian operasi terbatas. Fragment Shader yang dapat diprogram muncul pada tahun 2001 dan secara radikal memperluas kemampuan grafis: pengembang mendapatkan kendali penuh atas warna setiap piksel, yang memungkinkan implementasi pencahayaan fotorealistik, material kompleks, dan efek pasca-pemrosesan.

Bagaimana cara kerja Fragment Shader?

Fragment Shader dijalankan oleh GPU untuk setiap fragmen yang dihasilkan oleh rasterizer. Setiap panggilan shader memproses satu fragmen, membaca data inputnya, menjalankan kode pengguna, dan menulis nilai output — warna fragmen dalam format RGBA.

Data input dan output

Data input Fragment Shader mencakup atribut terinterpolasi dari Vertex Shader (koordinat tekstur, normal, warna), variabel uniform (sumber cahaya, matriks), dan sampler tekstur. Data output — vektor warna (gl_FragColor di OpenGL ES 2.0 atau variabel pengguna di ES 3.0) yang ditulis ke buffer warna.

#version 300 es
precision mediump float;

in vec2 vTexCoord;
uniform sampler2D uTexture;
out vec4 fragColor;

void main() {
    fragColor = texture(uTexture, vTexCoord);
}

Tugas utama Fragment Shader

Fragment Shader bertanggung jawab atas kualitas visual gambar. Semua efek yang dilihat pengguna di layar — warna, bayangan, pantulan, transparansi — dihitung tepat di tahap pipa grafis ini.

Tekstur

Operasi yang paling umum — mengambil warna dari tekstur berdasarkan koordinat UV yang terinterpolasi. Sampler2D dan fungsi texture() memungkinkan mendapatkan warna piksel dari atlas tekstur. Filtrasi (bilinear, trilinear, anisotropik) dikontrol melalui parameter sampler dan mempengaruhi ketajaman gambar pada sudut pandang yang berbeda.

Pencahayaan Phong

Model pencahayaan Phong (Phong shading) dihitung di Fragment Shader untuk setiap piksel, yang memberikan sorotan lebih halus daripada pencahayaan vertex (Gouraud shading). Phong lighting mencakup tiga komponen: ambient (latar), diffuse (diffuse), dan specular (spekular).

// Fragment shader dengan pencahayaan 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);
}

Efek pasca-pemrosesan dan blending

Fragment Shader memungkinkan penerapan pasca-pemrosesan: koreksi warna melalui tabel LUT, pengaburan (blur), efek cahaya (bloom), dan tonemapping untuk rendering HDR. Semua efek ini bekerja pada tingkat piksel dan dijalankan secara real-time.

Kinerja Fragment Shader dan optimasi

Kinerja Fragment Shader — faktor utama yang membatasi FPS di game mobile modern. Karena shader dipanggil untuk setiap piksel, bahkan peningkatan kecil dalam kompleksitas kode dapat menyebabkan penurunan frame rate yang signifikan.

Masalah kinerja utama

• Overdraw — penggambaran ulang piksel yang sama karena tumpang tindih objek. Sangat kritis untuk objek semi-transparan.
• Percabangan bersyarat — percabangan di Fragment Shader mengurangi efisiensi eksekusi SIMD, karena GPU harus mengeksekusi kedua jalur.
• Pengambilan tekstur — setiap pengambilan tekstur (texture lookup) memiliki latensi puluhan siklus GPU. Meminimalkan jumlah sampler mempercepat shader.

Metode optimasi Fragment Shader

Untuk GPU mobile (Qualcomm Adreno, ARM Mali) disarankan: menggunakan mediump precision untuk variabel float, menggabungkan pengambilan tekstur, menerapkan tes early-z untuk membuang fragmen yang tidak terlihat sebelum eksekusi shader.

Fragment Shader vs Vertex Shader: perbandingan

Kedua jenis shader diprogram oleh pengembang, tetapi bekerja pada tahap pipa yang berbeda dan menyelesaikan tugas yang berbeda. Fragment Shader secara signifikan lebih membutuhkan sumber daya karena jumlah panggilannya.

Contoh kode Fragment Shader

Fragment Shader bisa sederhana (pengambilan tekstur) atau kompleks (pencahayaan multi-layer). Mari kita lihat dua contoh praktis: tekstur dasar dan efek gradien menggunakan waktu.

Tekstur dasar di 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);
}

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