WebGPU'daki Yenilikler (Chrome 113)

François Beaufort
François Beaufort
GitHub

Yıllar süren geliştirme sürecinin ardından Chrome ekibi, WebGPU'nun ilk sürümünün artık varsayılan olarak ChromeOS, macOS ve Windows'daki Chrome'da kullanılabileceğini duyurdu. Daha fazla bilgi edinmek için Chrome'un WebGPU desteği sayfasına göz atın.

Ayrıca MDN'de WebGPU için kapsamlı dokümanlar eklemeye başladık.

Hepsi bu kadar da değil.

importExternalTexture() içinde WebCodecs VideoFrame kaynağını kullanın

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

Ancak ilk WebGPU spesifikasyonu, WebCodecs VideoFrame nesnelerinden GPUExternalTexture nesnelerinin oluşturulmasına izin vermiyor. Bu özellik, halihazırda WebCodecs kullanan ve WebGPU'yu video işleme hattına entegre etmek isteyen gelişmiş video işleme uygulamaları için önemlidir. Tartışma şu anda gpuweb/gpuweb#1380 sorunu üzerinde sürmektedir.

Özelliği etkinleştirme

Varsayılan olarak, bu özellik Chrome'da etkin değildir, ancak bu işlev açık bir şekilde etkinleştirilerek Chrome 113'te denenebilir. chrome://flags/#enable-webgpu-developer-features adresindeki "WebGPU Geliştirici Özellikleri" işaretini etkinleştirerek yerel olarak etkinleştirebilirsiniz.

Uygulamanızı ziyaret eden tüm kullanıcıları etkinleştirmek için şu anda devam eden bir kaynak denemesi var ve bu deneme Chrome 118'de (8 Aralık 2023) sona erecek şekilde ayarlandı. Denemeye katılmak için kaydolun ve HTML ya da HTTP başlığına kaynak deneme jetonuyla birlikte bir meta öğe ekleyin. Daha fazla bilgi edinmek 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.

Bu kodla oynatmak için WebCodecs ile Video Yükleme adlı deneysel örneğe göz atın.

WebGPU'daki Yenilikler

WebGPU'daki Yenilikler serisinde ele alınan her şeyin listesi.

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113