Co nowego w WebGPU (Chrome 113)

François Beaufort

Po latach prac zespół Chrome ogłasza, że pierwsza wersja WebGPU jest teraz domyślnie dostępna w Chrome w systemach ChromeOS, macOS i Windows. Więcej informacji znajdziesz w artykule Chrome ships WebGPU.

Zaczęliśmy też dodawać obszerną dokumentację WebGPU w MDN.

Ale to nie wszystko.

Używanie źródła `VideoFrame` WebCodecs w `importExternalTexture()`

WebGPU udostępnia interfejs API do tworzenia nieprzezroczystych obiektów "tekstury zewnętrznej" z HTMLVideoElement za pomocą importExternalTexture(). Możesz używać tych obiektów do wydajnego próbkowania klatek wideo, potencjalnie bez kopiowania bezpośrednio ze źródłowych danych YUV.

Jednak początkowa specyfikacja WebGPU nie pozwala na tworzenie obiektów GPUExternalTexture z obiektów WebCodecs VideoFrame. Ta funkcja jest ważna w przypadku zaawansowanych aplikacji do przetwarzania wideo, które już korzystają z WebCodecs i chcą zintegrować WebGPU z potokiem przetwarzania wideo. Obecnie trwa dyskusja na ten temat w wątku gpuweb/gpuweb#1380.

Włączanie funkcji

Ta funkcja nie jest domyślnie włączona w Chrome, ale można ją przetestować w Chrome 113, włączając ją ręcznie. Możesz ją aktywować lokalnie, włączając flagę „WebGPU Developer Features” (Funkcje deweloperskie WebGPU) w chrome://flags/#enable-webgpu-developer-features.

Aby włączyć tę funkcję dla wszystkich użytkowników aplikacji, trwa obecnie testowanie origin, który zakończy się w Chrome 118 (8 grudnia 2023 r.). Aby wziąć udział w testowaniu origin, zarejestruj się i umieść element meta z tokenem testowania origin w kodzie HTML lub w nagłówku HTTP. Więcej informacji znajdziesz w poście Pierwsze kroki z testami pochodzenia.

Przykładowy 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.

Aby przetestować tę funkcję, zapoznaj się z eksperymentalnym przykładem przesyłania filmów za pomocą WebCodecs.