Pelajari cara WebGPU mengoptimalkan kemampuan GPU untuk performa machine learning yang lebih cepat dan rendering grafis yang lebih baik.
WebGPU API yang baru berhasil meningkatkan performa secara signifikan dalam beban kerja grafis dan machine learning. Artikel ini membahas bagaimana WebGPU merupakan peningkatan dari solusi WebGL yang digunakan saat ini, dengan melihat sekilas perkembangannya di masa mendatang. Namun pertama-tama, mari kita lihat beberapa konteks mengapa WebGPU dikembangkan.
Konteks di WebGPU
WebGL hadir di Chrome pada tahun 2011. Dengan memungkinkan aplikasi web memanfaatkan GPU, WebGL memungkinkan pengalaman luar biasa di web—mulai dari Google Earth, video musik interaktif, panduan real estat 3D, dan banyak lagi. WebGL didasarkan pada kelompok API OpenGL yang pertama kali dikembangkan pada tahun 1992. Sudah lama sekali! Dan Anda bisa membayangkan bahwa hardware GPU telah berkembang secara signifikan sejak saat itu.
Untuk mengikuti perkembangan 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 yang menuntut dan baru untuk pemrograman GPU seperti ledakan dalam machine learning dan kemajuan dalam algoritma rendering. WebGPU adalah penerus WebGL yang menghadirkan kemajuan dari kelas baru API modern ini ke Web.
WebGPU membuka banyak kemungkinan pemrograman GPU baru di browser. Hal ini mencerminkan dengan lebih baik cara kerja hardware GPU modern, sekaligus meletakkan 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, dengan senang hati kami umumkan bahwa salah satu tambahan terbesar pada platform Web akhirnya tersedia.
WebGPU kini tersedia di Chrome 113 untuk ChromeOS, macOS, dan Windows, sementara platform lainnya akan segera hadir. Terima kasih banyak kepada kontributor Chromium lainnya, khususnya Intel, yang telah membantu mewujudkan hal ini.
Sekarang, mari kita lihat beberapa kasus penggunaan menarik yang dimungkinkan oleh WebGPU.
Membuka workload GPU baru untuk rendering
Fitur WebGPU seperti shader komputasi memungkinkan class algoritma baru untuk 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 kini dapat dipindahkan ke GPU.
Video berikut menunjukkan algoritma marching cubes yang digunakan untuk melakukan triangulasi permukaan metaball ini. Dalam 20 detik pertama video, algoritma, saat dijalankan di JavaScript, kesulitan mengikuti halaman yang hanya berjalan pada kecepatan 8 FPS, sehingga menghasilkan animasi yang tersendat. Agar tetap berperforma baik di JavaScript, kita perlu banyak menurunkan tingkat detail.
Perbedaannya adalah saat kita memindahkan algoritma yang sama ke shader komputasi, yang akan terlihat di video setelah 20 detik, berbeda antara siang dan malam. Performanya meningkat drastis karena halaman kini berjalan pada 60 FPS yang lancar, dan masih ada banyak kapasitas performa untuk efek lainnya. Selain itu, loop JavaScript utama halaman akan dibebaskan sepenuhnya sehingga dapat menangani tugas lain, sehingga memastikan interaksi dengan halaman tetap responsif.
WebGPU juga memungkinkan efek visual kompleks yang sebelumnya tidak praktis. Dalam contoh berikut, yang dibuat di library Babylon.js yang populer, permukaan samudra disimulasikan sepenuhnya di GPU. Dinamika realistis terbentuk dari banyak gelombang independen yang ditambahkan satu sama lain. Namun, menyimulasikan setiap gelombang secara langsung akan terlalu mahal.
Itu sebabnya demo ini menggunakan algoritma canggih yang disebut Transformasi Fourier Cepat. Alih-alih merepresentasikan semua gelombang sebagai data posisi yang kompleks, metode ini menggunakan data spektral yang jauh lebih efisien untuk melakukan komputasi. Kemudian setiap bingkai menggunakan Transformasi Fourier untuk mengonversi 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.
Untuk waktu yang lama, developer materi iklan telah menggunakan kembali API rendering WebGL untuk melakukan operasi non-rendering seperti komputasi machine learning. Namun, langkah ini memerlukan penggambaran piksel segitiga sebagai cara untuk memulai komputasi, serta mengemas dan mengekstrak data tensor dalam tekstur dengan hati-hati, bukan akses memori yang lebih umum.
Menggunakan WebGL dengan cara ini mengharuskan developer menyesuaikan kode mereka secara canggung dengan ekspektasi API yang dirancang hanya untuk menggambar. Dikombinasikan dengan kurangnya fitur dasar seperti akses memori bersama antar-komputasi, ini menyebabkan pekerjaan duplikat dan performa kurang optimal.
Shader komputasi adalah fitur baru utama WebGPU dan menghilangkan masalah ini. Shader komputasi menawarkan model pemrograman yang lebih fleksibel yang memanfaatkan sifat paralel GPU yang sangat besar dan tidak dibatasi oleh struktur operasi rendering yang ketat.
Shader komputasi memberikan lebih banyak peluang untuk berbagi data dan hasil komputasi dalam grup pekerjaan shader untuk efisiensi yang lebih baik. Hal ini dapat memberikan keuntungan yang signifikan dibandingkan upaya sebelumnya menggunakan WebGL untuk tujuan yang sama.
Sebagai contoh peningkatan efisiensi yang dapat ditimbulkan oleh hal ini, port awal dari 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 porta awal, kami yakin ada lebih banyak peningkatan yang bisa dicapai pada WebGPU dan TensorFlow.js. Lihat Yang baru di 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 khusus platform selama beberapa waktu, dan menjadi tantangan kami untuk mengeksposnya dengan cara yang terasa seperti bagian alami dari platform web.
WebGPU dikembangkan dengan memanfaatkan data dari belakangan dari para developer selama lebih dari satu dekade yang melakukan pekerjaan luar biasa dengan WebGL. Kami dapat mengambil masalah yang mereka hadapi, bottleneck yang dialami, dan masalah yang mereka ajukan serta menyalurkan semua masukan tersebut ke dalam API baru ini.
Kita melihat bahwa model status global WebGL membuat pembuatan library dan aplikasi yang kuat dan composable menjadi sulit dan rapuh. Jadi, WebGPU secara dramatis mengurangi jumlah status yang perlu dilacak developer saat mengirimkan perintah GPU.
Kami mendengar bahwa proses debug aplikasi WebGL merepotkan, jadi WebGPU menyertakan mekanisme penanganan error yang lebih fleksibel yang tidak mengurangi performa Anda. Kami juga berusaha untuk memastikan bahwa setiap pesan yang Anda dapatkan dari API mudah dipahami dan ditindaklanjuti.
Kami juga melihat bahwa sering kali overhead yang melakukan terlalu banyak panggilan JavaScript menjadi hambatan untuk aplikasi WebGL yang kompleks. Hasilnya, WebGPU API tidak terlalu rumit, sehingga Anda dapat mencapai lebih banyak hal dengan panggilan fungsi yang lebih sedikit. Kami berfokus untuk melakukan validasi kelas berat di awal, menjaga loop gambar kritis seramping mungkin. Kami juga menawarkan API baru seperti Render Bundle, yang memungkinkan Anda merekam sejumlah besar perintah gambar di awal dan memutarnya ulang dengan satu panggilan.
Untuk menunjukkan perbedaan dramatis yang dapat dibuat oleh fitur seperti paket render, berikut ini demo lain dari Babylon.js. Perender WebGL 2 dapat menjalankan semua panggilan JavaScript untuk merender tampilan galeri seni ini sekitar 500 kali per detik. Cukup bagus!
Namun, perender WebGPU mereka mengaktifkan fitur yang mereka sebut Rendering Snapshot. Dibangun berdasarkan paket render WebGPU, fitur ini memungkinkan adegan yang sama dikirimkan lebih dari 10x lebih cepat. Pengurangan overhead secara signifikan ini memungkinkan WebGPU merender adegan yang lebih kompleks, sekaligus memungkinkan aplikasi melakukan lebih banyak hal dengan JavaScript secara paralel.
API grafis modern memiliki reputasi akan kompleksitasnya, dengan mengorbankan kemudahan untuk mendapatkan peluang pengoptimalan yang ekstrem. Di sisi lain, WebGPU berfokus pada kompatibilitas lintas platform, yang umumnya akan menangani topik yang sulit secara tradisional, seperti sinkronisasi resource secara otomatis.
Hal ini memberikan efek samping bahwa WebGPU mudah dipelajari dan digunakan. Penargetan yang dioptimalkan mengandalkan fitur platform web yang ada untuk hal-hal seperti pemuatan gambar dan video, serta mengandalkan pola JavaScript yang dikenal luas seperti Promise untuk operasi asinkron. Hal ini membantu meminimalkan jumlah kode boilerplate yang diperlukan. Anda bisa menampilkan segitiga pertama di layar dengan panjang 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 tersebut ingin memanfaatkan WebGPU. Dukungan untuk WebGPU masih dalam proses atau sudah selesai di banyak library WebGL JavaScript yang populer, dan dalam beberapa kasus, memanfaatkan manfaat WebGPU mungkin semudah mengubah satu flag.
Dan rilis pertama di Chrome 113 ini hanyalah permulaan. Meskipun rilis awal kami ditujukan 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 berupaya meluncurkan WebGPU. Implementasi juga sedang berlangsung di Firefox dan WebKit.
Selain itu, fitur baru sudah dirancang di W3C yang dapat dibuka ketika tersedia dalam hardware. Misalnya: Di Chrome, kami berencana mengaktifkan dukungan untuk angka floating point 16 bit dalam shader dan segera menghadirkan class petunjuk DP4a untuk peningkatan performa machine learning yang lebih baik.
WebGPU adalah API ekstensif yang menghadirkan performa luar biasa jika Anda berinvestasi di dalamnya. Hari ini kami 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 Game of Life Conway klasik. Codelab ini memandu Anda melalui proses langkah demi langkah, sehingga Anda dapat mencobanya meskipun ini pertama kalinya Anda melakukan pengembangan GPU.
Contoh WebGPU juga merupakan tempat yang bagus untuk memahami API. Variasi kata tersebut dibuat dari "halo segitiga" tradisional ke pipeline rendering dan komputasi yang lebih lengkap, yang mendemonstrasikan berbagai teknik. Terakhir, lihat referensi kami yang lain.