Nouveautés du GPU Web (Chrome 113)

François Beaufort
François Beaufort
GitHub

Après des années de développement, l'équipe Chrome annonce que la première version de WebGPU est désormais disponible par défaut dans Chrome sur ChromeOS, macOS et Windows. Pour en savoir plus, consultez Chrome ships WebGPU.

Nous avons également commencé à ajouter une documentation complète pour WebGPU sur MDN.

Et ce n'est pas tout.

Utiliser la source WebCodecs VideoFrame dans importExternalTexture()

WebGPU expose une API permettant de créer des objets "texture externe" opaques à partir de HTMLVideoElement via importExternalTexture(). Vous pouvez utiliser ces objets pour échantillonner efficacement les images vidéo, potentiellement sans copie directement à partir des données YUV sources.

Toutefois, la spécification WebGPU initiale ne permet pas de créer des objets GPUExternalTexture à partir d'objets VideoFrame WebCodecs. Cette fonctionnalité est importante pour les applications de traitement vidéo avancées qui utilisent déjà WebCodecs et qui souhaitent intégrer WebGPU dans le pipeline de traitement vidéo. La discussion a actuellement lieu dans le problème gpuweb/gpuweb#1380.

Activer la fonctionnalité

Par défaut, cette fonctionnalité n'est pas activée dans Chrome, mais vous pouvez la tester dans Chrome 113 en l'activant explicitement. Vous pouvez l'activer localement en activant l'option "WebGPU Developer Features" (Fonctionnalités pour les développeurs WebGPU) sur chrome://flags/#enable-webgpu-developer-features.

Pour l'activer pour tous les visiteurs de votre application, un test d'origine est en cours et devrait se terminer dans Chrome 118 (8 décembre 2023). Pour participer à la phase d'évaluation, inscrivez-vous et incluez un élément Meta avec le jeton de la phase d'évaluation dans le code HTML ou l'en-tête HTTP. Pour en savoir plus, consultez l'article Premiers pas avec les versions d'essai de l'origine.

Exemple de code

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

Consultez l'exemple expérimental Mise en ligne de vidéos avec WebCodecs pour l'essayer.

Nouveautés de WebGPU

Liste de tous les sujets abordés dans la série Nouveautés de WebGPU.

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

Chrome 131

Chrome 130

Chrome 129

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113