Esta página foi traduzida pela API Cloud Translation.

Novidades da WebGPU (Chrome'113)

François Beaufort

Após anos de desenvolvimento, a equipe do Chrome anunciou que a primeira versão da WebGPU já está disponível por padrão no Chrome no ChromeOS, macOS e Windows. Acesse O Chrome fornece a WebGPU para saber mais.

Também começamos a adicionar uma documentação abrangente sobre a WebGPU no MDN.

E tem mais.

Usar a fonte `VideoFrame` do WebCodecs em `importExternalTexture()`

A WebGPU expõe uma API para criar "textura externa" opaca Objetos de HTMLVideoElement a importExternalTexture(). Você pode usar esses objetos para criar amostras dos frames de vídeo de maneira eficiente, possivelmente sem cópia, diretamente dos dados YUV de origem.

No entanto, a especificação da WebGPU inicial não permite a criação de objetos GPUExternalTexture a partir de objetos VideoFrame do WebCodecs. Esse recurso é importante para apps avançados de processamento de vídeo que já usam o WebCodecs e gostariam de integrar a WebGPU no pipeline de processamento de vídeo. A discussão está acontecendo no problema gpuweb/gpuweb#1380.

Ativar o recurso

Por padrão, esse recurso não é ativado no Chrome, mas pode ser testado no Chrome 113, ativando explicitamente a funcionalidade. Ative os "Recursos para desenvolvedores WebGPU" localmente. flag em chrome://flags/#enable-webgpu-developer-features.

Se quiser ativar esse recurso para todos os visitantes do app, um teste de origem está em andamento e vai terminar no Chrome 118 (8 de dezembro de 2023). Para participar do teste, inscreva-se e inclua um metaelemento com o token do teste de origem no cabeçalho HTML ou HTTP. Para saber mais, consulte a postagem Começar a usar os testes de origem.

Código de amostra

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

Confira o exemplo experimental Upload de vídeo com WebCodecs para testar.