Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di WebGPU (Chrome 113)

François Beaufort

Dopo anni di sviluppo, il team di Chrome annuncia che la prima release di WebGPU è ora disponibile per impostazione predefinita in Chrome su ChromeOS, macOS e Windows. Per scoprire di più, dai un'occhiata a Chrome spedisce WebGPU.

Abbiamo anche iniziato ad aggiungere documentazione completa per WebGPU su MDN.

E non è finita qui.

Utilizza il codice sorgente WebCodec `VideoFrame` in `importExternalTexture()`

WebGPU espone un'API per creare una "texture esterna" opaca oggetti da HTMLVideoElement a importExternalTexture(). Puoi utilizzare questi oggetti per campionare i fotogrammi video in modo efficiente, potenzialmente in modo 0-copia direttamente dai dati YUV di origine.

Tuttavia, la specifica WebGPU iniziale non consente la creazione di oggetti GPUExternalTexture da oggetti WebCodec VideoFrame. Questa funzionalità è importante per le app di elaborazione video avanzata che già utilizzano WebCodec e vorrebbero integrare WebGPU nella pipeline di elaborazione video. Al momento è in corso una discussione per il problema gpuweb/gpuweb#1380.

Attiva la funzionalità

Per impostazione predefinita, questa funzionalità non è attiva in Chrome, ma può essere sperimentata in Chrome 113 attivandola esplicitamente. Puoi attivarla localmente abilitando le "Funzionalità per sviluppatori WebGPU" flag alle chrome://flags/#enable-webgpu-developer-features.

Per abilitarla per tutti i visitatori della tua app, è attualmente in corso una prova dell'origine che terminerà in Chrome 118 (8 dicembre 2023). Per partecipare alla prova, registrati e includi un elemento meta con il token della prova dell'origine nell'intestazione HTML o HTTP. Per ulteriori informazioni, consulta il post Inizia a utilizzare le prove dell'origine.

Codice di esempio

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

Guarda l'esempio sperimentale Caricamento di video con WebCodecs per sperimentare questo esempio.

Novità di WebGPU (Chrome 113)

Utilizza il codice sorgente WebCodec `VideoFrame` in `importExternalTexture()`

Attiva la funzionalità

Codice di esempio