Pada artikel sebelumnya, kita membahas bagaimana Basemark menggunakan WebGL 2.0 untuk melakukan pengujian performa. Kali ini, kita akan mencoba membuat versi buatan sendiri yaitu Geometry Stress Test berbasis WebGPU. Tujuan dari artikel atau tutorial ini adalah untuk menggambar ribuan segitiga acak di layar dan mengukur seberapa cepat GPU kamu menyelesaikannya.
Konsep Stress Test ini menggunakan WebGPU sebagai alat stress test rendering, dengan membebani GPU langsung dari browser dan menyuruhnya menggambar ribuan vertex segitiga secara acak. Langkah-logika dasarnya adalah pertama-tama membuat N segitiga acak di koordinat NDC (-1…+1), kemudian merender semuanya dalam satu pass, mengukur waktu render, dan menghitung operations per second (Ops/sec).
Hasil outputnya menunjukkan informasi seputar WebGPU yang aktif, detail GPU yang digunakan, serta rincian dari Geometry Stress Test seperti jumlah segitiga, vertex, waktu render GPU dalam ms, Ops/Second, dan backend yang digunakan.
Untuk mencoba demo langsung, file yang digunakan dapat ditemukan di “tests/geometry-test/test-geometri.js”. Langkah pertama adalah menyiapkan data geometri dengan mengirim data vertex ke GPU buffer agar bisa dirender, membuat ribuan segitiga acak di ruang NDC, dan masing-masing vertex memiliki 2 nilai (x, y).
Selanjutnya, siapkan Shader Pipeline yang terdiri dari pengaturan shader untuk vertex dan fragment dengan menggunakan wgsl, serta membuat render pipeline untuk menggambar segitiga dengan detail attribut-attribut yang diperlukan.
Terakhir, menjalankan render dan mengukur waktu render GPU dapat dilakukan dengan langkah-langkah yang telah ditentukan. Dengan melakukan test geometry ini, kita dapat melihat bahwa WebGPU mampu menggambar ribuan segitiga primitif dengan latency yang rendah dan memiliki perbedaan performa yang signifikan dibandingkan dengan WebGL 2, tergantung pada arsitektur GPU yang digunakan.
Selanjutnya, kita akan mencoba membuat Compute Pass WebGPU untuk simulasi fisika ringan dalam artikel berikutnya. Terima kasih dan tetap ikuti perkembangan selanjutnya!
