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'ye WebGPU ile ilgili kapsamlı dokümanlar eklemeye başladık.

Ve dahası.

`importExternalTexture()` konumunda WebCodecs `VideoFrame` kaynağını kullan

WebGPU, HTMLVideoElement ile importExternalTexture() arasında opak "harici doku" nesneleri oluşturmak için bir API sağlar. Video karelerinden verimli bir şekilde örneklendirmek için bu nesneleri kullanabilirsiniz. Örnek olarak doğrudan kaynak YUV verilerinden 0 kopya yapabilirsiniz.

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. Tartışma şu anda gpuweb/gpuweb#1380 sorununda devam ediyor.

Özelliği etkinleştirme

Bu özellik Chrome'da varsayılan olarak etkin değildir, ancak Chrome 113'te bu işlev açıkça etkinleştirilerek 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 üzere şu anda devam eden ve Chrome 118'de (8 Aralık 2023) sona erecek bir kaynak denemesi var. 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.

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