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ışları sağlar. Bu makalede WebGPU'nun, mevcut WebGL çözümüne göre nasıl bir iyileştirme olduğu açıklanmakta ve gelecekteki gelişmelere göz atabilirsiniz. Ama öncelikle WebGPU'nun neden geliştirildiğine dair biraz bilgi verelim.
WebGPU'da bağlam
WebGL, 2011'de Chrome'da kullanıma sunuldu. WebGL, web uygulamalarının GPU'lardan yararlanmasına olanak tanıyarak Google Earth'ten etkileşimli müzik videolarına kadar web'de muhteşem deneyimler vadetmektedir. 3D emlak rehberleri ve daha birçok özellikten yararlanabilirler. WebGL, ilk olarak 1992'de geliştirilen OpenGL API ailesine dayanıyordu. Bu görüşme uzun zaman önce yapıldı. O zamandan beri GPU donanımının ciddi bir değişim geçirdiğini tahmin edebilirsiniz.
Bu evrime ayak uydurmak için modern GPU donanımıyla daha verimli bir şekilde etkileşime geçmek amacıyla yeni nesil API'ler geliştirildi. Direct3D 12, Metal ve Vulkan gibi API'ler Bu yeni API'ler, makine öğrenimindeki patlama ve oluşturma algoritmalarındaki gelişmeler gibi GPU programlaması için yeni ve zorlu kullanım alanlarını desteklemiştir. WebGPU, bu yeni modern API sınıfının ilerlemelerini Web'e getiren WebGL'nin halefidir.
WebGPU, tarayıcıda pek çok yeni GPU programlaması olanağı sunar. Modern GPU donanımının çalışma şeklini daha iyi yansıtırken gelecekte daha gelişmiş GPU özellikleri için bir temel oluşturur. Apple, Google, Mozilla, Microsoft ve Intel gibi birçok şirketin ortak çalışması olan bu API, 2017'den beri W3C'nin "Web için GPU" grubunda yer almaktadır. 6 yıllık çalışmamızın ardından şimdi de web platformundaki en büyük yeniliklerden birinin nihayet kullanıma sunulduğunu bildirmekten mutluluk duyuyoruz.
WebGPU şu anda ChromeOS, macOS ve Windows'da Chrome 113'te kullanılabilir. Yakında diğer platformlarda da kullanıma sunulacaktır. Chromium'a katkıda bulunan diğer kullanıcılara ve özellikle bunun gerçekleşmesine yardımcı olan Intel'e ç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çın
İşlem gölgelendiricileri gibi WebGPU özellikleri, yeni algoritma sınıflarının GPU'da taşınmasını sağlar. Örneğin, sahnelere daha dinamik ayrıntılar ekleyebilen, fiziksel olayları simüle edebilen ve çok daha fazlasını yapabilen algoritmalar! Önceden yalnızca JavaScript'te yapılabilen ve artık GPU'ya taşınabilen iş yükleri bile mevcuttur.
Aşağıdaki videoda, bu metatopların yüzeyini üçgenleştirmek için kullanılan marş küpleri algoritması gösterilmektedir. Videonun ilk 20 saniyesinde algoritma JavaScript'te çalışırken sayfayı yalnızca 8 FPS'de çalıştırmakta zorlanır ve bu da can sıkıcı bir animasyona neden olur. JavaScript'te performansını yüksek tutmak için ayrıntı düzeyini çok düşürmemiz gerekir.
Aynı algoritmayı bir bilgisayar gölgelendiriciye taşıdığımızda gece ve gündüz farkı ortaya çıkar. Bu fark videoda 20 saniye sonra görünür. Sayfa artık 60 FPS'lik sorunsuz bir FPS'de çalışırken performans büyük ölçüde artıyor. Diğer efektler için de hâlâ pek çok performans olanağı var. Buna ek olarak, sayfanın ana JavaScript döngüsü diğer görevler için tamamen serbest bırakılır ve sayfayla etkileşimlerin yanıt vermesi sağlanır.
WebGPU ayrıca, daha önce pratik olmayan karmaşık görsel efektler de sağlar. 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 dalgayla oluşturulur. Ancak her bir dalganın simülasyonunu yapmak çok maliyetli olurdu.
Bu nedenle demoda Fast Fourier Transform (Hızlı Fourier Dönüşümü) adlı gelişmiş bir algoritma kullanılmaktadır. Bu yöntemde tüm dalgaları karmaşık konum verileri olarak temsil etmek yerine, hesaplamaları gerçekleştirmek için çok daha verimli olan spektral veriler kullanılır. Ardından her kare, spektral verilerden dalgaların yüksekliğini temsil eden konum verilerine 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 yaygın bir kullanım alanı haline gelen makine öğrenimini hızlandırmak için de faydalıdır.
Kreatif geliştiriciler uzun süredir, makine öğrenimi hesaplamaları gibi oluşturma dışı işlemler gerçekleştirmek için WebGL'nin oluşturma API'sini yeniden kullanmaktadır. Bununla birlikte, bu, hesaplamaları başlatma yöntemi olarak üçgen piksellerinin çizilmesini ve daha genel amaçlı bellek erişimleri yerine tensör verilerinin doku içinde dikkatli bir şekilde paketlenmesini ve açılmasını gerektirir.
WebGL'yi bu şekilde kullanmak, geliştiricilerin kodlarını yalnızca çizim için tasarlanmış bir API'nin beklentilerine tuhaf bir şekilde uymalarını gerektirir. Hesaplamalar arasında paylaşılan bellek erişimi gibi temel özelliklerin olmaması, işlerin yinelenmesine ve performansın yetersiz olmasına yol açar.
İşlem gölgelendiricileri, WebGPU'nun birincil yeni özelliğidir ve bu sorunları ortadan kaldırır. Compute gölgelendiriciler, GPU'nun çok büyük paralel yapısından yararlanan ve aynı zamanda oluşturma işlemlerinin katı yapısıyla kısıtlanmayan daha esnek bir programlama modeli sunar.
Compute gölgelendiriciler, daha yüksek verimlilik için gölgelendirici iş grupları arasında veri ve hesaplama sonuçlarını paylaşma konusunda daha fazla fırsat sunar. Bu, WebGL'yi aynı amaç için kullanmaya yönelik önceki denemelere kıyasla önemli kazanımlar sağlayabilir.
Bunun sağlayabileceği verimlilik kazanımlarına bir ö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 bazı donanımlarda görüntü 10 saniyeden daha kısa sürede oluşturuldu. Bu ilk bağlantı noktası olduğu için hem WebGPU hem de TensorFlow.js'de daha da fazla iyileştirme mümkün olduğuna inanıyoruz. 2023'te Web ML'de ne gibi yenilikler var? başlıklı makaleye göz atın. Google I/O oturumu.
Ancak WebGPU, yalnızca GPU özelliklerini web'e taşımaktan ibaret değildir.
Önce JavaScript için tasarlanmıştır
Bu kullanım alanlarını sağlayan özellikler, bir süredir platforma özel masaüstü ve mobil cihaz geliştiricileri tarafından kullanılabilir. Ancak bunları, web platformunun doğal bir parçası gibi hissettirecek şekilde kullanıma sunmak bizim için zorlu bir görevdi.
WebGPU, WebGL ile olağanüstü işler yapan, on yılı aşkın süredir bulunan geliştiricilerin görüşleri sayesinde geliştirilmiştir. Karşılaştıkları sorunları, karşılaştıkları performans sorunlarını ve bildirdikleri sorunları alıp tüm bu geri bildirimleri bu yeni API'ye aktardık.
WebGL'nin küresel durum modelinin sağlam, derlenebilir kitaplık ve uygulamalar oluşturmayı zorlaştırdığını ve kırılgan hale getirdiğini gördük. Bu nedenle WebGPU, geliştiricilerin GPU komutlarını gönderirken izlemeleri gereken durum miktarını önemli ölçüde azaltır.
WebGL uygulamalarında hata ayıklamanın sorunlu olduğunu duyduk. Bu nedenle WebGPU, performansınızı azaltmayan daha esnek hata işleme mekanizmaları içerir. API'den aldığınız her mesajın kolay anlaşılır ve işlem yapılabilir olmasını sağlamak için elimizden geleni yaptık.
Ayrıca, çok fazla JavaScript çağrısı yapmanın ek yükünün, karmaşık WebGL uygulamaları açısından bir performans sorunu olduğunu da gördük. Sonuç olarak, WebGPU API'de daha az sohbet edilir. Böylece, daha az işlev çağrısıyla daha fazlasını yapabilirsiniz. Kritik çizim döngüsünü mümkün olduğunca sade tutarak ağır doğrulama işlemini en baştan gerçekleştirmeye odaklanıyoruz. Ayrıca, çok sayıda çizim komutunu önceden kaydedip tek bir çağrıyla tekrar oynatmanıza olanak tanıyan Oluşturma Paketleri 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 aşağıda Babylon.js'den başka bir demoyu izleyebilirsiniz. WebGL 2 oluşturucu, bu sanat galerisi sahnesini saniyede yaklaşık 500 kez oluşturmak için tüm JavaScript çağrılarını yürütebilir. Bu oldukça iyi.
Ancak WebGPU oluşturucuları, Anlık Görüntü Oluşturma adını verdikleri bir özelliği etkinleştirir. WebGPU'ların oluşturma paketlerinin üzerine kurulan bu özellik, aynı sahnenin 10 kattan daha hızlı gönderilmesine olanak tanır. Ek yükü önemli ölçüde azaltan bu özellik, WebGPU'nun daha karmaşık sahneler oluşturmasına olanak tanırken uygulamaların da paralel olarak JavaScript ile daha fazla şey yapmasına olanak tanır.
Modern grafik API'leri karmaşık olmasıyla tanınıyor ve basitliği yerine ekstrem optimizasyon fırsatları sunuyor. Öte yandan WebGPU, platformlar arası uyumluluğa odaklanır ve kaynak senkronizasyonu gibi geleneksel olarak zor konuları çoğu durumda otomatik olarak ele alır.
Bunun, WebGPU'nun öğrenmesinin ve kullanımının kolay olması iyi bir yan etkisi vardır. Resim ve video yükleme gibi işlemler için web platformunun mevcut özelliklerini kullanır ve eşzamansız işlemler için Promises gibi iyi bilinen JavaScript kalıplarından yararlanır. Bu, gereken ortak metin miktarını en aza indirmeye yardımcı olur. 50 satırın altında bir kodla ilk üçgeninizi ekrana yansıtabilirsiniz.
<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 olasılıkları görmek heyecan verici. WebGPU'da karşınıza çıkacak tüm yeni ve etkileyici kullanım örneklerini görmek için sabırsızlanıyoruz!
WebGL etrafında canlı bir kitaplık ve çerçeve ekosistemi oluşturulmuştur ve aynı ekosistem WebGPU'yu benimsemeye isteklidir. WebGPU desteği devam etmekte veya pek çok popüler JavaScript WebGL kitaplığında zaten tamamlanmıştır. Bazı durumlarda WebGPU'nun avantajlarından faydalanmak tek bir işareti değiştirmek kadar basit olabilir!
Chrome 113'teki 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.
Ayrıca, WebGPU'nun kullanıma sunulması üzerinde çalışan sadece Chrome ekibi değil. Firefox ve WebKit'te de uygulamalar devam etmektedir.
Buna ek olarak, W3C'de halihazırda tasarlanmış olup donanımda kullanılabilir olduklarında ortaya çıkabilecek yeni özellikler de mevcuttur. Örneğin: Chrome'da makine öğrenimi performansında daha da fazla iyileştirme sağlamak için kısa süre içinde gölgelendiricilerde 16 bitlik kayan nokta sayıları desteğini ve DP4a talimat sınıfını etkinleştirmeyi planlıyoruz.
WebGPU, yatırım yaparsanız muhteşem performansın kapısını aralayan kapsamlı bir API'dir. Bugün bu aracın avantajlarını yalnızca genel hatlarıyla ele alabiliyoruz. Ancak WebGPU'yu kullanmaya başlamak istiyorsanız Codelab'e giriş niteliğindeki İlk WebGPU uygulamanız başlıklı makaleye göz atın. Bu codelab'de klasik Conway'in Hayat Oyunu'nun GPU sürümünü oluşturacaksınız. Bu codelab'de süreç adım adım açıklanmıştır. Böylece, GPU geliştirmeyi ilk kez yapıyor olsanız bile deneyebilirsiniz.
WebGPU örnekleri de API hakkında fikir edinmek için iyi bir yerdir. Geleneksel "hello üçgeni"nden, daha eksiksiz bir şekilde oluşturma ve hesaplama ile ilgili özellikler sunar. Son olarak diğer kaynaklarımıza göz atın.