WebGPU'nun daha hızlı makine öğrenimi performansı ve daha iyi grafik oluşturma için GPU'nun gücünden nasıl yararlandığını öğrenin.
Yeni WebGPU API, grafik ve makine öğrenimi iş yüklerinde büyük performans artışı sağlar. Bu makalede, gelecekteki geliştirmelere kısaca göz atılarak WebGPU'nun mevcut WebGL çözümüne göre nasıl bir gelişme olduğu incelenmektedir. Ama önce WebGPU'nun neden geliştirildiğiyle ilgili bilgi verelim.
WebGPU'da bağlam
WebGL, Chrome'da 2011'de kullanıma sunulmuştur. WebGL, web uygulamalarının GPU'lardan yararlanmasını sağlayarak Google Earth'ten etkileşimli müzik videolarına, 3D gerçek yapıda adım adım açıklamalı kılavuzlara kadar web'de harika deneyimler sunar. WebGL, ilk kez 1992'de geliştirilen OpenGL API ailesine dayanıyordu. Çok uzun zaman oldu. GPU donanımının o zamandan beri önemli ölçüde geliştiğini de hayal edebilirsiniz.
Bu gelişmeye ayak uydurmak amacıyla, modern GPU donanımıyla daha verimli bir şekilde etkileşim kurmak için yeni bir API türü geliştirildi. Direct3D 12, Metal ve Vulkan gibi API'ler. Bu yeni API'ler, GPU programlama için makine öğrenimindeki patlama ve algoritmaları oluşturma algoritmalarındaki gelişmeler gibi yeni ve zorlu kullanım alanlarını destekledi. WebGPU, WebGL'nin bu yeni modern API sınıfının ilerlemesini Web'e getirmesinin devamıdır.
WebGPU, tarayıcıda yeni GPU programlama olanaklarının çoğunu kullanıma sunar. Modern GPU donanımının işleyiş şeklini daha iyi yansıtırken gelecekte daha gelişmiş GPU özellikleri için de bir temel oluşturur. 2017'den beri W3C'nin "GPU for the Web" (Web için GPU) grubunda yer alan API; Apple, Google, Mozilla, Microsoft ve Intel gibi birçok şirketin işbirliğiyle geliştirilmiştir. 6 yıllık bir çalışmanın ardından, şimdi web platformuna yapılan en büyük yeniliklerden birinin nihayet kullanıma sunulduğunu duyurmanın heyecanını yaşıyoruz!
WebGPU şu anda ChromeOS, macOS ve Windows'da Chrome 113'te kullanılabilir. Yakında başka platformlarda da kullanıma sunulacaktır. Chromium'a katkıda bulunan diğer kullanıcılar ve özellikle de Intel'e bunların gerçekleşmesinde katkıda bulunanlara çok teşekkür ederiz.
Şimdi WebGPU'nun sağladığı heyecan verici kullanım alanlarından bazılarına göz atalım.
Oluşturma için yeni GPU iş yüklerinin kilidini açma
Bilgi işlem gölgelendiriciler gibi WebGPU özellikleri, GPU'ya yeni algoritma sınıflarının taşınmasını sağlar. Örneğin, sahnelere daha dinamik ayrıntılar ekleyebilen, fiziksel olayları simüle edebilen algoritmalar ve daha fazlası! Hatta daha önce yalnızca JavaScript'te yapılabiliyordu ve şimdi GPU'ya taşınabilen iş yükleri de var.
Aşağıdaki videoda, bu metatopların yüzeyini üçgenlemek için kullanılan marş küpleri algoritması gösterilmektedir. Videonun ilk 20 saniyesinde algoritma, JavaScript'te çalışırken yalnızca 8 FPS'de çalışan sayfaya yetişmekte zorlanıyor. Bu da animasyonun kötü olmasına yol açıyor. JavaScript'te yüksek performanslı olmasını sağlamak için ayrıntı düzeyini çok düşürmemiz gerekir.
Aynı algoritmayı, videoda 20 saniye sonra görünen bir hesaplama gölgelendiriciye taşıdığımızda gece ile gündüz farkı ortaya çıkıyor. Sayfa artık 60 FPS'lik sorunsuz bir hızda çalıştığı için performans önemli ölçüde yükseliyor ve diğer efektler için hâlâ pek çok performans olasılığı var. Ayrıca, sayfanın ana JavaScript döngüsü diğer görevler için tamamen serbest bırakılarak sayfayla etkileşimlerin duyarlı olmaya devam etmesi sağlanır.
WebGPU, daha önce pratik olmayan karmaşık görsel efektlere de olanak tanır. Popüler Babylon.js kitaplığında oluşturulan aşağıdaki örnekte okyanus yüzeyi tamamen GPU üzerinde simüle edilmektedir. Gerçekçi dinamikler, birbirine eklenen birçok bağımsız dalgadan oluşur. Ancak her bir dalganın doğrudan simülasyonunu yapmak çok pahalı olacak.
Bu nedenle demoda, Hızlı Fourier Dönüşümü adı verilen gelişmiş bir algoritma kullanılmıştır. Tüm dalgaları karmaşık konum verileri olarak göstermek yerine, hesaplamalar için çok daha verimli olan spektral verileri kullanır. Daha sonra her çerçeve, spektral verilerden dalgaların yüksekliğini temsil eden konumsal verilere dönüştürmek için Fourier Dönüşümünü kullanır.
Daha hızlı makine öğrenimi çıkarımı
WebGPU, son yıllarda GPU'ların en önemli kullanım alanlarından biri olan makine öğrenimini hızlandırmak açısından da faydalıdır.
Reklam öğesi geliştiriciler uzun bir süredir WebGL'nin oluşturma API'sini, makine öğrenimi hesaplamaları gibi oluşturma olmayan işlemleri gerçekleştirecek şekilde yeniden kullanıyorlar. Ancak bu, hesaplamaları başlatma yöntemi olarak üçgen piksellerinin çizilmesini ve daha genel amaçlı bellek erişimi yerine tensör verilerinin doku içinde dikkatli bir şekilde paketlenmesini ve paketlenmesini gerektirir.
WebGL'yi bu şekilde kullanmak, geliştiricilerin kodlarını garip bir şekilde yalnızca çizim için tasarlanmış bir API'nın beklentilerine uygun hale getirmelerini gerektirir. Bu durum, hesaplamalar arasında paylaşılan bellek erişimi gibi temel özelliklerin eksikliğiyle bir araya geldiğinde, işlerin yinelenmesine ve performansın yetersiz kalmasına yol açar.
İşlem gölgelendiricileri, WebGPU'nun başlıca yeni özelliğidir ve bu sorunları ortadan kaldırır. İşlem gölgelendiriciler, GPU'nun muazzam paralel yapısından yararlanan ve oluşturma işlemlerinin katı yapısıyla sınırlandırılmayan daha esnek bir programlama modeli sunar.
İşlem gölgelendiriciler, daha yüksek verimlilik sağlamak amacıyla gölgelendirici grupları içinde veri paylaşımı ve hesaplama sonuçları için daha fazla fırsat sunar. Bu, aynı amaç için WebGL'yi kullanmaya yönelik önceki girişimlere göre önemli kazanımlar sağlayabilir.
Bunun sağlayabileceği verimlilik kazanımlarına örnek olarak, TensorFlow.js'deki bir görüntü difüzyon modelinin ilk bağlantı noktası, WebGL'den WebGPU'ya taşındığında çeşitli donanımlarda 3 kat performans kazancı göstermektedir. Test edilen donanımların bazılarında görüntü 10 saniyeden daha kısa sürede oluşturuldu. Bu, erken erişim noktası olduğundan hem WebGPU'da hem TensorFlow.js'de daha da fazla iyileştirme yapılabileceğini düşünüyoruz. 2023'te Web ML'deki yenilikler başlıklı makaleye göz atın. Google I/O oturumu.
Ancak WebGPU yalnızca GPU özelliklerini web'e taşımakla ilgili değildir.
Öncelikle JavaScript için tasarlanmıştır
Bu kullanım alanlarını mümkün kılan özellikler, bir süredir platforma özgü masaüstü ve mobil uygulama geliştiricilerinin kullanımına sunulmuş durumda. Biz de, bu özellikleri web platformunun doğal bir parçası gibi hissettirmek bizim için çok zordu.
WebGPU, WebGL ile olağanüstü işler yapan on yılı aşkın geliştiricilerin geri bildirimlerinin yardımıyla geliştirildi. Karşılaştıkları sorunları, karşılaştıkları darboğazları ve bildirdikleri tüm bu geri bildirimleri bu yeni API'ye aktarabildik.
WebGL'nin küresel durum modelinin sağlam, composable kitaplık ve uygulamalar oluşturmayı zorlaştırdığını ve zayıfladığını gördük. Bu nedenle WebGPU, geliştiricilerin GPU komutlarını gönderirken takip etmeleri gereken durum miktarını önemli ölçüde azaltır.
WebGL uygulamalarında hata ayıklamanın zahmetli olduğunu duyduk. Bu nedenle WebGPU, performansınızı etkilemeyen daha esnek hata işleme mekanizmaları içerir. Ayrıca, API'den aldığınız her mesajın kolay anlaşılabilir ve işlem yapılabilir olmasını sağlamak için gayretle çalıştık.
Ayrıca, sıklıkla çok fazla JavaScript çağrısı yapmanın ek yükünün karmaşık WebGL uygulamalarının engel teşkil ettiğini gördük. Sonuç olarak WebGPU API daha az konuşkandır ve daha az işlev çağrısıyla daha fazlasını başarabilirsiniz. Başlangıçta ağır doğrulama gerçekleştirmeye odaklanarak kritik çekim döngüsünü mümkün olduğunca yalın tutmaya odaklanıyoruz. Ayrıca, çok sayıda çizim komutunu önceden kaydedip tek bir çağrıda tekrar oynatmanıza olanak tanıyan Render Bundles gibi yeni API'ler de sunuyoruz.
Oluşturma paketleri gibi bir özelliğin ne kadar büyük bir fark yaratabileceğini göstermek için Babylon.js'deki başka bir demoyu burada bulabilirsiniz. WebGL 2 oluşturucuları, bu sanat galerisi sahnesini saniyede yaklaşık 500 kez oluşturmak için tüm JavaScript çağrılarını yürütebilir. Bu da oldukça iyi.
Ancak WebGPU oluşturucuları, Anlık Görüntü Oluşturma adlı bir özelliği etkinleştirir. WebGPU oluşturma paketlerinin üzerine kurulan bu özellik, aynı sahnenin 10 kattan daha hızlı gönderilmesine olanak tanıyor. Bu önemli ölçüde azaltılan ek yük, WebGPU'nun daha karmaşık sahneler oluşturmasına ve uygulamaların paralel olarak JavaScript ile daha fazla işlem yapmasına olanak tanır.
Modern grafik API'leri karmaşıklık ve olağanüstü optimizasyon fırsatlarının basitliğiyle tanınıyor. Öte yandan WebGPU, platformlar arası uyumluluğa odaklanır ve çoğu durumda kaynak senkronizasyonu gibi geleneksel olarak zor konuları işler.
Bu, WebGPU'nun öğrenmenin ve kullanımının kolay olması gibi mutlu edici bir yan etkiye sahiptir. Resim ve video yükleme gibi işlemler için web platformunun mevcut özelliklerini kullanır ve eşzamansız işlemler için Promise gibi bilinen JavaScript kalıplarından yararlanır. Bu, gereken standart kod miktarını minimumda tutmaya yardımcı olur. İlk üçgeninizi 50 kod satırının altında olacak şekilde ekranda gösterebilirsiniz.
<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>
Sonuç
WebGPU'nun web platformuna getirdiği tüm yeni olanakları görmek heyecan verici. WebGPU için bulacağınız tüm etkileyici yeni kullanım alanlarını görmek için sabırsızlanıyoruz!
WebGL'yi temel alan dinamik bir kitaplık ve çerçeve ekosistemi oluşturulmuştur ve aynı ekosistem WebGPU'yu benimsemek için de isteklidir. Pek çok popüler Javascript WebGL kitaplığında WebGPU desteği devam ediyor ya da tam olarak kullanılıyor. Bazı durumlarda WebGPU'nun avantajlarından faydalanmak tek bir işareti değiştirmek kadar basit olabilir!
Chrome 113'teki bu ilk sürüm sadece bir başlangıç. İlk sürümümüz Windows, ChromeOS ve MacOS için olsa da, WebGPU'yu yakın gelecekte Android ve Linux gibi diğer platformlarda da kullanıma sunmayı planlıyoruz.
WebGPU'yu başlatmak için çalışan tek şey Chrome ekibi değil. Firefox ve WebKit'te de uygulamalar devam etmektedir.
Buna ek olarak, yeni özellikler halihazırda W3C'de tasarlanmakta olup donanımda kullanılabilir olduğunda ortaya çıkabilmektedir. Örneğin: Chrome'da, makine öğreniminde daha da fazla performans iyileştirmesi için çok yakında gölgelendiricilerde 16 bit kayan nokta sayıları desteğini ve DP4a talimat sınıfını etkinleştirmeyi planlıyoruz.
WebGPU, yatırım yaptığınızda harika bir performans elde etmenizi sağlayan kapsamlı bir API'dir. Bugün bu özelliğin avantajlarını genel hatlarıyla ele alabildik, ancak WebGPU'yu kullanmaya başlamak isterseniz tanıtım amaçlı Codelab'imiz olan İlk WebGPU uygulamanız'a göz atabilirsiniz. Bu codelab'de klasik Conway'in Hayat Oyunu'nun GPU sürümünü oluşturacaksınız. Bu codelab'de işlem adım adım açıklanmıştır. Böylece, GPU geliştirme sürecini ilk kez yapacak olsanız bile deneyebilirsiniz.
WebGPU örnekleri de API hakkında fikir edinmek için iyi bir yerdir. Geleneksel "merhaba üçgeni"nden, daha kapsamlı oluşturma ve bilgi işlem ardışık düzenlerine kadar çeşitlilik gösteren bu örnekler, çeşitli teknikler gösterir. Son olarak, diğer kaynaklarımıza göz atın.