Eksperimen WebGPU: Cara Tes Performa GPU Langsung dari Browser

Kenapa Benchmark GPU di Browser?

Selama ini, benchmark GPU dilakukan lewat aplikasi native seperti Geekbench atau 3DMark. Tapi sekarang, dengan hadirnya WebGPU, browser bisa mengakses GPU secara langsung lewat API modern.

DEMO

Berikut adalah demo WebGPU yang bisa kamu jalankan di browser modern (Chrome, Edge, atau Safari 17+). Klik tombol Run Benchmark untuk memulai pengujian:
Live demo: WebGPU benchmark langsung di browser

Kalian bisa baca source code lengkap disini: https://github.com/mkhuda/webgpu-benchmark-js

Hasil Uji

Jika berhasil, hasilnya akan muncul semacam ini:

GPU: Apple M3 (Apple)
Backend     : WebGPU
Vector size : 1,048,576 (approx workload)
Iterations  : 50
GPU time    : 327.300 ms
~Ops/Second : 160,185,762

Angka Ops/Second menunjukkan banyaknya operasi matematis per detik — bukan angka absolut performa GPU, tapi cukup untuk perbandingan relatif antar browser atau device.

Penjelasan Fungsi di WebGPU

Dan berikut penjelasan beberapa bagian penting di dalam WebGPU yang kita gunakan:

1. navigator.gpu.requestAdapter()

Langkah awal untuk meminta adapter GPU dari browser. Di sini kita tahu apakah device mendukung WebGPU dan GPU mana yang dipilih (terkadang integrated, kadang discrete).

const adapter = await navigator.gpu.requestAdapter();

Adapter ini ibarat “driver GPU virtual” di tingkat browser.

2. adapter.requestDevice()

Setelah dapat adapter, kita minta device — ini adalah objek utama untuk semua operasi GPU: membuat buffer, shader, pipeline, dan mengirim perintah.

const device = await adapter.requestDevice();

Dalam WebGPU, device adalah jembatan utama JavaScript ke GPU hardware.

3. Membuat Buffer Data

Buffer digunakan untuk menyimpan data di VRAM (Video RAM) GPU. Di contoh benchmark, kita membuat tiga buffer: A, B, dan C untuk operasi vector addition.

const A = device.createBuffer({ size: bufSize, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
const B = device.createBuffer({ size: bufSize, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
const C = device.createBuffer({ size: bufSize, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC });

Buffer ini diisi lewat device.queue.writeBuffer() dari sisi CPU sebelum dikirim ke GPU.

4. Shader Module (WGSL)

Bagian ini adalah “otak” GPU. Shader ditulis dalam bahasa WGSL (WebGPU Shading Language), yang mirip GLSL tapi lebih modern dan aman tipe-nya.

@group(0) @binding(0) var<storage, read>  A: array<f32>;
@group(0) @binding(1) var<storage, read>  B: array<f32>;
@group(0) @binding(2) var<storage, read_write> C: array<f32>;

@compute @workgroup_size(256)
fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
  let i = gid.x;
  if (i < arrayLength(&C)) {
    var acc = A[i] + B[i];
    acc = acc * 1.000001 + 0.000001 * acc;
    C[i] = acc;
  }
}

Shader ini dijalankan di ratusan workgroups paralel di GPU, menghitung vektor dengan kecepatan tinggi.

5. Command Encoder dan Dispatch

Setelah semua siap, kita membuat command encoder untuk menulis perintah GPU, lalu kirim lewat device.queue.submit().

const encoder = device.createCommandEncoder();
const pass = encoder.beginComputePass();
pass.setPipeline(pipeline);
pass.setBindGroup(0, bindGroup);
pass.dispatchWorkgroups(workgroups);
pass.end();
device.queue.submit([encoder.finish()]);

Bagian inilah yang benar-benar menjalankan komputasi GPU. Di sinilah “benchmark” terjadi — GPU bekerja keras menghitung semua elemen buffer.

6. Sinkronisasi Hasil dengan queue.onSubmittedWorkDone()

WebGPU bersifat asinkronus. Setelah submit, GPU jalan di background. Jadi untuk tahu kapan GPU selesai, kita pakai await queue.onSubmittedWorkDone().

await device.queue.onSubmittedWorkDone();

Waktu antara sebelum dan sesudah inilah yang jadi patokan GPU time kita di contoh ini.

Menampilkan Info GPU

Untuk melengkapi hasil benchmark, kita juga bisa menampilkan nama GPU yang sedang digunakan menggunakan ekstensi WEBGL_debug_renderer_info dari WebGL:

GPU: Apple M3 (Apple)

Catatan: di beberapa browser, info GPU bisa disamarkan demi privasi, jadi hasilnya bisa “Unknown Renderer”.

Analisis Hasil

• Nilai Ops/Second bukan angka pasti performa GPU, tapi cukup bagus untuk perbandingan.
• WebGPU biasanya lebih cepat dari WebGL karena pipeline-nya lebih efisien.
• Thermal throttling dan versi browser bisa memengaruhi hasil.

Kesimpulan

Eksperimen ini menunjukkan bahwa browser modern sekarang bukan cuma buat tampilan web — tapi juga bisa jadi alat belajar GPU compute ringan. Dengan WebGPU, kamu bisa bikin simulasi, animasi fisika, atau bahkan mini engine sendiri tanpa install apa pun.

Catatan: Eksperimen ini untuk pembelajaran dan pengujian ringan. Untuk benchmark profesional, bisa coba Basemark Web Benchmark yang akan kita bahas di artikel selanjutnya.

Artikel selanjutnya kita bahas mengenai Basemark, disini.