Neu in WebGPU (Chrome 113)

François Beaufort
François Beaufort
GitHub

Nach Jahren der Entwicklung gibt das Chrome-Team bekannt, dass die erste Version von WebGPU jetzt standardmäßig in Chrome unter ChromeOS, macOS und Windows verfügbar ist. Weitere Informationen finden Sie unter WebGPU wird in Chrome unterstützt.

Außerdem haben wir damit begonnen, umfassende Dokumentationen zu WebGPU auf MDN hinzuzufügen.

Und das ist noch nicht alles.

WebCodecs-VideoFrame-Quelle in importExternalTexture() verwenden

WebGPU stellt eine API zum Erstellen undurchsichtiger „externer Textur“-Objekte von HTMLVideoElement bis importExternalTexture() bereit. Mit diesen Objekten können Sie die Videoframes effizient erfassen, möglicherweise direkt aus den YUV-Quelldaten ohne Kopie.

Die ursprüngliche WebGPU-Spezifikation erlaubt jedoch nicht, GPUExternalTexture-Objekte aus WebCodecs-Objekten vom Typ VideoFrame zu erstellen. Diese Funktion ist wichtig für erweiterte Videoverarbeitungs-Apps, die bereits WebCodecs verwenden und WebGPU in die Videoverarbeitungspipeline einbinden möchten. Die Diskussion findet derzeit im Issue gpuweb/gpuweb#1380 statt.

Feature aktivieren

Diese Funktion ist in Chrome standardmäßig nicht aktiviert. Sie kann aber in Chrome 113 getestet werden, indem Sie sie explizit aktivieren. Sie können sie lokal aktivieren, indem Sie das Flag „WebGPU-Entwicklerfunktionen“ bei chrome://flags/#enable-webgpu-developer-features aktivieren.

Damit die Funktion für alle Besucher Ihrer App aktiviert werden kann, läuft derzeit ein Test für Ursprünge, der mit der Veröffentlichung von Chrome 118 am 8. Dezember 2023 endet. Wenn du am Test teilnehmen möchtest, registriere dich und füge entweder im HTML- oder im HTTP-Header ein Meta-Element mit dem Token für den Ursprungstest ein. Weitere Informationen finden Sie im Hilfeartikel Erste Schritte mit Ursprungstests.

Beispielcode

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

Im experimentellen Beispiel Video Uploading with WebCodecs kannst du es ausprobieren.

Das ist neu bei WebGPU

Eine Liste aller Themen, die in der Reihe Was ist neu in WebGPU behandelt wurden.

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