Neu in WebGPU (Chrome 113)

François Beaufort
François Beaufort
GitHub

Nach jahrelanger Entwicklung hat das Chrome-Team bekannt gegeben, dass die erste Version von WebGPU jetzt standardmäßig in Chrome unter ChromeOS, macOS und Windows verfügbar ist. Weitere Informationen finden Sie unter Chrome ships WebGPU.

Außerdem haben wir begonnen, umfassende Dokumentation für WebGPU auf MDN hinzuzufügen.

Und es gibt noch mehr.

WebCodecs-VideoFrame-Quelle in importExternalTexture() verwenden

WebGPU stellt eine API zur Verfügung, mit der undurchsichtige "externe Textur"-Objekte aus HTMLVideoElement über importExternalTexture() erstellt werden können. Mit diesen Objekten können Sie die Videoframes effizient abtasten, möglicherweise ohne Kopieren direkt aus den YUV-Quelldaten.

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

Feature aktivieren

Standardmäßig ist diese Funktion in Chrome nicht aktiviert. Sie kann jedoch in Chrome 113 getestet werden, indem die Funktion explizit aktiviert wird. Sie können sie lokal aktivieren, indem Sie das "WebGPU Developer Features" Flag unter chrome://flags/#enable-webgpu-developer-features aktivieren.

Um die Funktion für alle Besucher Ihrer App zu aktivieren, wird derzeit ein Ursprungstest durchgeführt, der in Chrome 118 (8. Dezember 2023) endet. Wenn Sie am Test teilnehmen möchten, registrieren Sie sich und fügen Sie entweder im HTML- oder HTTP-Header ein Meta-Element mit dem Ursprungstest-Token ein. Weitere Informationen finden Sie im Beitrag 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 für Video-Uploads mit WebCodecs können Sie die Funktion ausprobieren.

Neues in WebGPU

Eine Liste aller Themen, die in der Reihe „Neues in WebGPU“ behandelt wurden.

Chrome 149–150

Chrome 147–148

Chrome 146

Chrome 145

Chrome 144

Chrome 143

Chrome 142

Chrome 141

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