Se usó la API de Cloud Translation para traducir esta página.

Novedades de WebGPU (Chrome 113)

François Beaufort

Después de años de desarrollo, el equipo de Chrome anuncia que la primera versión de WebGPU ya está disponible de forma predeterminada en Chrome en ChromeOS, macOS y Windows. Consulta Chrome ships WebGPU para obtener más información.

También comenzamos a agregar documentación completa para WebGPU en MDN.

Y hay más.

Usa la fuente `VideoFrame` de WebCodecs en `importExternalTexture()`

WebGPU expone una API para crear objetos opacos de "textura externa" a partir de HTMLVideoElement a través de importExternalTexture(). Puedes usar estos objetos para tomar muestras de los fotogramas de video de manera eficiente, posiblemente sin necesidad de copiar datos directamente de los datos YUV fuente.

Sin embargo, la especificación inicial de WebGPU no permite crear objetos GPUExternalTexture a partir de objetos VideoFrame de WebCodecs. Esta capacidad es importante para las apps avanzadas de procesamiento de video que ya usan WebCodecs y desean integrar WebGPU en la canalización de procesamiento de video. Actualmente, se está debatiendo el tema en el problema gpuweb/gpuweb#1380.

Habilita la función

De forma predeterminada, esta función no está habilitada en Chrome, pero se puede experimentar con ella en Chrome 113 habilitando explícitamente la funcionalidad. Puedes activarlo de forma local habilitando la marca "WebGPU Developer Features" en chrome://flags/#enable-webgpu-developer-features.

Para habilitarlo para todos los visitantes de tu app, actualmente se está llevando a cabo una prueba de origen que finalizará en Chrome 118 (8 de diciembre de 2023). Para participar en la prueba, regístrate y agrega un elemento meta con el token de prueba de origen en el encabezado HTML o HTTP. Para obtener más información, consulta la publicación Comienza a usar las pruebas de origen.

Código de muestra

// 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.

Consulta la muestra experimental Video Uploading with WebCodecs para probarlo.