Benchmark CPU vs GPU: Uji Coba WebGPU dengan Mandelbrot Compute Shader

Beberapa waktu lalu kita coba bereksperimen dengan matrix multiplication di WebGPU.

Sekarang, kita akan mencoba eksperimen menguji performa CPU dan GPU dalam melakukan komputasi numerik intensif yang akan menghasilkan fractal Mandelbrot set.
Uji ini ditulis dalam JavaScript + React, memanfaatkan teknologi WebGPU dan bahasa WGSL (WebGPU Shading Language).

Tujuan Benchmark

Tujuan utamanya adalah mengukur seberapa besar percepatan dan kecepatan yang bisa diberikan GPU dibandingkan CPU dalam tugas yang sifatnya paralel.
Mandelbrot set dipilih karena algoritma ini sangat legendaris, dimana dia melakukan beberapa hal ini:

• Setiap piksel bisa dihitung secara independen (paralel sempurna)
• Beban komputasi tinggi dan mudah divisualisasikan
• Cocok untuk mengukur efisiensi compute pipeline WebGPU

Dengan begitu, pengguna bisa langsung melihat perbandingan waktu komputasi CPU vs GPU secara visual, sekaligus mengenali kemampuan perangkat mereka.

Demo:

https://webgpu-benchmark-js.vercel.app/mandelbrot-benchmark/

Source code:

https://github.com/mkhuda/webgpu-benchmark-js/tree/main/tests/cpu-gpu-compute-benchmark

Bagian Utama Script

Selanjutnya, saya akan menjelaskan sedikit mengenai core code dari demo kali ini:

1. computeShaderWGSL — Inti Komputasi GPU

Bagian ini adalah kode shader dalam bahasa WGSL. WGSL adalah bahasa resmi WebGPU (mirip GLSL di WebGL, tapi lebih aman dan modern).

Fungsi utamanya menghitung nilai iterasi setiap titik pada bidang kompleks untuk menentukan apakah titik tersebut bagian dari fractal Mandelbrot atau tidak.

@compute @workgroup_size(8, 8)
fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
  let cx = (f32(global_id.x) / params.width - 0.75) * 2.5;
  let cy = (f32(global_id.y) / params.height - 0.5) * 2.0;
  var zx = 0.0;
  var zy = 0.0;
  var i: u32 = 0;
  while (i < u32(params.max_iter) && zx * zx + zy * zy < 4.0) {
    let temp_zx = zx * zx - zy * zy + cx;
    zy = 2.0 * zx * zy + cy;
    zx = temp_zx;
    i = i + 1;
  }
  output[index] = i;
}

Shader ini dijalankan di ratusan bahkan ribuan thread GPU secara paralel, menjadikannya jauh lebih cepat daripada versi CPU yang hanya menghitung piksel satu per satu dalam iterasi for-loop.

2. calculateMandelbrotCPU()

Fungsi ini melakukan hal yang sama, tetapi di sisi CPU.
Menjadi pembanding yang ideal karena algoritma dan logika matematikanya identik.

3. Visualisasi

Hasil perhitungan (iterasi tiap piksel) dikonversi ke warna melalui fungsi drawMandelbrot() yang menghasilkan gradasi warna sesuai jumlah iterasi.

Semakin banyak iterasi, semakin mendekati batas kompleks fractal dan tampil dalam spektrum warna cerah. Namun pada kasus kali ini saya membuat fractal antara CPU dan GPU dengan komputasi yang sama, agar bisa sedikit apple-to-apple benchmarknya.

Hasil & Penggunaan

Saat dijalankan, aplikasi menampilkan dua kanvas: satu hasil CPU dan satu hasil GPU.

Setelah eksekusi, muncul informasi waktu komputasi (ms) dan faktor percepatan (speed-up factor).
Pada perangkat dengan GPU modern, hasilnya bisa menunjukkan percepatan hingga puluhan kali lipat.

Benchmark seperti ini bisa digunakan untuk:

• Menguji efisiensi pipeline WebGPU browser
• Mengetahui perbedaan performa komputasi CPU vs GPU
• Menjadi dasar eksperimen WebGPU berikutnya (misalnya simulasi fisika, noise, atau AI compute)

Kesimpulan

Demo ini menunjukkan kekuatan WebGPU dalam membuka akses komputasi paralel langsung dari browser.

Dengan WGSL compute shader, JavaScript kini bisa melakukan tugas-tugas yang sebelumnya hanya mungkin di CUDA atau OpenCL.