Pelajari cara WebGPU mengoptimalkan kemampuan GPU untuk performa machine learning yang lebih cepat dan rendering grafis yang lebih baik.
WebGPU API yang baru menghadirkan peningkatan performa yang sangat besar dalam beban kerja grafis dan machine learning. Artikel ini membahas bagaimana WebGPU merupakan peningkatan dari solusi WebGL saat ini, dengan gambaran sekilas mengenai pengembangannya di masa mendatang. Tapi pertama-tama, mari kita bahas beberapa alasan mengapa WebGPU dikembangkan.
Konteks di WebGPU
WebGL tersedia di Chrome pada tahun 2011. Dengan memungkinkan aplikasi web memanfaatkan GPU, WebGL memungkinkan pengalaman menakjubkan di web—mulai dari Google Earth, video musik interaktif, hingga panduan real estat 3D, dan banyak lagi. WebGL didasarkan pada kelompok API OpenGL yang pertama kali dikembangkan pada tahun 1992. Lama sekali! Dan Anda bisa membayangkan bahwa hardware GPU telah berkembang secara signifikan sejak saat itu.
Untuk mengikuti evolusi ini, jenis API baru dikembangkan untuk berinteraksi secara lebih efisien dengan hardware GPU modern. API seperti Direct3D 12, Metal, dan Vulkan. API baru ini telah mendukung kasus penggunaan baru dan yang menuntut untuk pemrograman GPU seperti ledakan dalam machine learning dan kemajuan dalam algoritma rendering. WebGPU adalah penerus WebGL yang menghadirkan kemajuan kelas API modern yang baru ini ke Web.
WebGPU membuka banyak kemungkinan pemrograman GPU baru di browser. Ini lebih mencerminkan cara kerja hardware GPU modern, sekaligus memberikan fondasi untuk kemampuan GPU yang lebih canggih di masa mendatang. API ini telah disertakan dalam grup "GPU for the Web" W3C sejak tahun 2017, dan merupakan kolaborasi antara banyak perusahaan seperti Apple, Google, Mozilla, Microsoft, dan Intel. Dan sekarang, setelah 6 tahun bekerja, kami dengan senang hati mengumumkan bahwa salah satu tambahan terbesar pada platform Web akhirnya tersedia!
WebGPU saat ini tersedia di Chrome 113 di ChromeOS, macOS, dan Windows, sementara platform lainnya akan segera hadir. Terima kasih banyak kepada kontributor Chromium dan Intel lainnya, khususnya yang telah membantu mewujudkan hal ini.
Sekarang, mari kita lihat beberapa kasus penggunaan menarik yang dimungkinkan WebGPU.
Mendapatkan workload GPU baru untuk rendering
Fitur WebGPU seperti shader komputasi memungkinkan class algoritma baru ditransfer di GPU. Misalnya, algoritma yang dapat menambahkan detail yang lebih dinamis ke adegan, menyimulasikan fenomena fisik, dan banyak lagi. Bahkan ada beban kerja yang sebelumnya hanya dapat dilakukan di JavaScript yang sekarang dapat dipindahkan ke GPU.
Video berikut menampilkan algoritme marching kubus yang digunakan untuk mentriangulasi permukaan metaball ini. Dalam 20 detik pertama video, algoritma, saat dijalankan dalam JavaScript, kesulitan untuk mengikuti laman yang hanya berjalan pada kecepatan 8 FPS yang mengakibatkan animasi tersendat. Agar performanya tetap baik di JavaScript, kita perlu banyak menurunkan tingkat detail.
Ini adalah perbedaan malam dan siang saat kami memindahkan algoritma yang sama ke shader komputasi, yang terlihat dalam video setelah 20 detik. Performanya meningkat secara dramatis dengan halaman yang sekarang berjalan pada 60 FPS yang lancar, dan masih banyak kapasitas performa untuk efek lainnya. Selain itu, loop JavaScript utama halaman bebas dari tugas-tugas lain, sehingga memastikan bahwa interaksi dengan halaman tetap responsif.
WebGPU juga memungkinkan efek visual kompleks yang tidak praktis sebelumnya. Pada contoh berikut, yang dibuat di library Babylon.js populer, permukaan laut disimulasikan sepenuhnya menggunakan GPU. Dinamika realistis terbentuk dari banyak gelombang independen yang ditambahkan satu sama lain. Namun, menyimulasikan setiap gelombang secara langsung akan terlalu mahal.
Itulah mengapa demo ini menggunakan algoritma lanjutan yang disebut Fast Fourier Transform. Alih-alih merepresentasikan semua gelombang sebagai data posisi yang kompleks, model ini menggunakan data spektrum yang jauh lebih efisien untuk melakukan komputasi. Kemudian setiap bingkai menggunakan Transformasi Fourier untuk melakukan konversi dari data spektrum ke data posisi yang mewakili ketinggian gelombang.
Inferensi ML yang lebih cepat
WebGPU juga berguna untuk mempercepat machine learning, yang telah menjadi penggunaan utama GPU dalam beberapa tahun terakhir.
Sejak lama, developer materi iklan telah menggunakan kembali API rendering WebGL untuk melakukan operasi non-rendering seperti komputasi machine learning. Namun, hal ini mengharuskan menggambar piksel segitiga sebagai cara untuk memulai komputasi, serta mengemas dan membongkar data tensor dengan hati-hati dalam tekstur, bukan akses memori untuk tujuan yang lebih umum.
Menggunakan WebGL dengan cara ini mengharuskan developer untuk menyesuaikan kode mereka dengan ekspektasi API yang dirancang hanya untuk menggambar. Dikombinasikan dengan kurangnya fitur dasar seperti akses memori bersama antar-komputasi, hal ini menyebabkan pekerjaan duplikat dan performa yang kurang optimal.
Shader komputasi adalah fitur baru utama WebGPU dan menghilangkan titik masalah ini. Shader komputasi menawarkan model pemrograman yang lebih fleksibel yang memanfaatkan sifat paralel GPU secara masif tanpa dibatasi oleh struktur operasi rendering yang ketat.
Shader komputasi memberikan lebih banyak peluang untuk berbagi data dan hasil komputasi dalam kelompok shader komputasi demi efisiensi yang lebih baik. Hal ini dapat meningkatkan signifikan dibandingkan upaya sebelumnya dalam menggunakan WebGL untuk tujuan yang sama.
Sebagai contoh peningkatan efisiensi yang dapat dihasilkan ini, port awal model difusi gambar di TensorFlow.js menunjukkan peningkatan performa 3x lipat pada berbagai hardware saat dipindahkan dari WebGL ke WebGPU. Pada beberapa hardware yang diuji, gambar dirender dalam waktu kurang dari 10 detik. Dan karena ini adalah port awal, kami yakin akan ada lebih banyak peningkatan yang mungkin dilakukan di WebGPU dan TensorFlow.js. Lihat Apa yang baru dari Web ML pada tahun 2023? Sesi Google I/O.
Namun, WebGPU bukan hanya tentang menghadirkan fitur GPU ke web.
Didesain untuk JavaScript terlebih dahulu
Fitur yang memungkinkan kasus penggunaan ini telah tersedia untuk developer desktop dan seluler spesifik per platform selama beberapa waktu, dan sudah menjadi tantangan kami untuk mengeksposnya dengan cara yang terasa seperti bagian alami dari platform web.
WebGPU dikembangkan dengan memanfaatkan informasi dari developer ke belakang selama lebih dari satu dekade yang melakukan pekerjaan luar biasa dengan WebGL. Kami dapat menangani masalah yang dihadapi, hambatan yang dialami, dan masalah yang diajukan, serta menyalurkan semua masukan tersebut ke API baru ini.
Kita melihat bahwa model status global WebGL membuat aplikasi dan library yang dapat disusun menjadi sulit dan rentan. Jadi, WebGPU secara drastis mengurangi jumlah status yang perlu dilacak oleh developer saat mengirimkan perintah GPU.
Kami mendengar bahwa proses debug pada aplikasi WebGL menyulitkan, sehingga WebGPU menyertakan mekanisme penanganan error yang lebih fleksibel sehingga tidak mengurangi performa Anda. Kami telah berupaya untuk memastikan bahwa setiap pesan yang Anda dapatkan dari API mudah dipahami dan ditindaklanjuti.
Kita juga melihat bahwa sering kali overhead melakukan terlalu banyak panggilan JavaScript menjadi bottleneck untuk aplikasi WebGL yang kompleks. Hasilnya, WebGPU API tidak terlalu rumit, sehingga Anda dapat menyelesaikan lebih banyak hal dengan panggilan fungsi yang lebih sedikit. Kami berfokus untuk melakukan validasi berat di awal, menjaga loop gambar penting seramping mungkin. Selain itu, kami menawarkan API baru seperti Paket Render, yang memungkinkan Anda merekam perintah gambar dalam jumlah besar di awal dan memutarnya ulang dengan satu panggilan.
Untuk mendemonstrasikan perbedaan dramatis yang dapat dihasilkan oleh fitur seperti paket render, berikut demo lain dari Babylon.js. Perender WebGL 2 dapat menjalankan semua panggilan JavaScript untuk merender adegan galeri seni ini sekitar 500 kali per detik. Cukup bagus!
Namun, perender WebGPU mereka mengaktifkan fitur yang disebut Rendering Snapshot. Dikembangkan berdasarkan paket render WebGPU, fitur ini memungkinkan tampilan yang sama dikirimkan lebih dari 10x lebih cepat. Pengurangan overhead yang signifikan ini memungkinkan WebGPU untuk merender suasana yang lebih kompleks, sekaligus memungkinkan aplikasi melakukan lebih banyak hal dengan JavaScript secara paralel.
API grafis modern memiliki reputasi kompleksitas, kemudahan perdagangan untuk peluang pengoptimalan yang ekstrem. Di sisi lain, WebGPU berfokus pada kompatibilitas lintas platform, yang secara umum menangani topik yang sulit secara tradisional, seperti sinkronisasi resource secara otomatis.
Hal ini memiliki efek samping yang menyenangkan, yaitu karena WebGPU mudah dipelajari dan digunakan. Solusi ini mengandalkan fitur platform web yang ada untuk hal-hal seperti pemuatan gambar dan video, dan memanfaatkan pola JavaScript terkenal seperti Promise untuk operasi asinkron. Hal ini membantu meminimalkan jumlah kode boilerplate yang diperlukan. Anda bisa menampilkan segitiga pertama di layar dengan kurang dari 50 baris kode.
<canvas id="canvas" width="512" height="512"></canvas>
<script type="module">
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext("webgpu");
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format });
const code = `
@vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
@builtin(position) vec4f {
const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
return vec4f(pos[i], 0, 1);
}
@fragment fn fragmentMain() -> @location(0) vec4f {
return vec4f(1, 0, 0, 1);
}`;
const shaderModule = device.createShaderModule({ code });
const pipeline = device.createRenderPipeline({
layout: "auto",
vertex: {
module: shaderModule,
entryPoint: "vertexMain",
},
fragment: {
module: shaderModule,
entryPoint: "fragmentMain",
targets: [{ format }],
},
});
const commandEncoder = device.createCommandEncoder();
const colorAttachments = [
{
view: context.getCurrentTexture().createView(),
loadOp: "clear",
storeOp: "store",
},
];
const passEncoder = commandEncoder.beginRenderPass({ colorAttachments });
passEncoder.setPipeline(pipeline);
passEncoder.draw(3);
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);
</script>
Kesimpulan
Sangat menyenangkan melihat semua kemungkinan baru yang dihadirkan WebGPU ke platform web dan kami tidak sabar untuk melihat semua kasus penggunaan baru yang keren yang akan Anda temukan untuk WebGPU.
Ekosistem library dan framework yang dinamis telah dibangun berdasarkan WebGL, dan ekosistem yang sama juga antusias untuk menggunakan WebGPU. Dukungan untuk WebGPU sedang dalam proses atau sudah selesai di banyak library WebGL JavaScript populer, dan dalam beberapa kasus, memanfaatkan manfaat WebGPU mungkin semudah mengubah satu flag.
Dan rilis pertama di Chrome 113 ini hanyalah sebuah permulaan. Meskipun rilis awal adalah untuk Windows, ChromeOS, dan MacOS, kami berencana menghadirkan WebGPU ke platform lainnya seperti Android dan Linux dalam waktu dekat.
Dan bukan hanya tim Chrome yang mengerjakan peluncuran WebGPU. Implementasi juga sedang dilakukan di Firefox dan WebKit.
Selain itu, fitur-fitur baru sudah dirancang di W3C yang dapat diekspos jika tersedia di hardware. Misalnya: Di Chrome, kami berencana mengaktifkan dukungan untuk bilangan floating point 16 bit dalam shader dan class petunjuk DP4a segera untuk peningkatan performa machine learning yang lebih baik.
WebGPU adalah API ekstensif yang memberikan performa luar biasa jika Anda berinvestasi di dalamnya. Hari ini kita hanya dapat membahas manfaatnya secara umum, tetapi jika Anda ingin mulai menggunakan WebGPU, lihat Codelab pengantar kami, Aplikasi WebGPU pertama Anda. Dalam codelab ini, Anda akan membangun versi GPU dari Game of Life Conway klasik. Codelab ini memandu Anda melalui prosesnya langkah demi langkah, sehingga Anda dapat mencobanya meskipun ini pertama kalinya Anda melakukan pengembangan GPU.
Sampel WebGPU juga merupakan tempat yang tepat untuk memahami API. Teknik ini bervariasi, mulai dari "halo segitiga" tradisional hingga pipeline rendering dan komputasi yang lebih lengkap, yang mendemonstrasikan berbagai teknik. Terakhir, lihat referensi kami yang lain.