Bu sayfa, Cloud Translation API ile çevrilmiştir.

WebGPU'daki Yenilikler (Chrome 113)

François Beaufort

Chrome Ekibi, yıllar süren geliştirme çalışmalarının ardından WebGPU'nun ilk sürümünün artık ChromeOS, macOS ve Windows'ta varsayılan olarak kullanılabildiğini duyurdu. Daha fazla bilgi edinmek için Chrome, WebGPU'yi kullanıma sundu başlıklı makaleyi inceleyin.

Ayrıca MDN'de WebGPU ile ilgili kapsamlı dokümanlar eklemeye başladık.

Bununla da sınırlı değil.

`importExternalTexture()` uygulamasında WebCodecs `VideoFrame` kaynağını kullanma

WebGPU, HTMLVideoElement ile importExternalTexture() arasında opak "harici doku" nesneleri oluşturmak için bir API sağlar. Bu nesneleri, video karelerini verimli bir şekilde örneklemek için kullanabilirsiniz. Bu işlem, doğrudan kaynak YUV verilerinden 0 kopya olacak şekilde yapılabilir.

Ancak ilk WebGPU spesifikasyonu, WebCodecs VideoFrame nesnelerinden GPUExternalTexture nesneleri oluşturulmasına izin vermez. Bu özellik, halihazırda WebCodecs kullanan ve video işleme ardışık düzenine WebGPU'yu entegre etmek isteyen gelişmiş video işleme uygulamaları için önemlidir. Şu anda gpuweb/gpuweb#1380 sorununda tartışma yapılıyor.

Özelliği etkinleştirme

Bu özellik Chrome'da varsayılan olarak etkin değildir ancak işlev açıkça etkinleştirilerek Chrome 113'te denenebilir. chrome://flags/#enable-webgpu-developer-features adresinde "WebGPU Geliştirici Özellikleri" bayrakını etkinleştirerek yerel olarak etkinleştirebilirsiniz.

Bu özelliği uygulamanızın tüm ziyaretçileri için etkinleştirmek amacıyla şu anda devam eden ve Chrome 118'de (8 Aralık 2023) sona erecek bir kaynak denemesi yapılmaktadır. Deneme sürümüne katılmak için kaydolun ve HTML veya HTTP üst bilgisine kaynak deneme jetonunu içeren bir meta öğe ekleyin. Daha fazla bilgi için Kaynak denemelerini kullanmaya başlama başlıklı makaleyi inceleyin.

Örnek kod

// Access the GPU device.
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// Create VideoFrame from HTMLVideoElement.
const video = document.querySelector("video");
const videoFrame = new VideoFrame(video);

const texture = device.importExternalTexture({ source: videoFrame });
// TODO: Use texture in bind group creation.

WebCodecs ile Video Yükleme deneysel örneğine göz atarak bu özelliği deneyebilirsiniz.