Neu in WebGPU (Chrome 113)

François Beaufort
François Beaufort
GitHub

Nach jahrelanger 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 Chrome ships WebGPU.

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

Und das ist noch nicht alles.

WebCodecs-Quelle VideoFrame in importExternalTexture() verwenden

WebGPU stellt eine API zum Erstellen von undurchsichtigen „externen Textur“-Objekten aus HTMLVideoElement über importExternalTexture() bereit. 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, GPUExternalTexture-Objekte aus VideoFrame-Objekten von WebCodecs zu erstellen. Diese Funktion ist wichtig für Apps zur erweiterten Videoverarbeitung, die bereits WebCodecs verwenden und WebGPU in die Videoverarbeitungspipeline einbinden möchten. Die Diskussion findet derzeit im Issue gpuweb/gpuweb#1380 statt.

Feature aktivieren

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

Damit die Funktion für alle Besucher Ihrer App aktiviert werden kann, läuft derzeit ein Ursprungstest, das mit Chrome 118 (8. Dezember 2023) endet. Wenn Sie am Test teilnehmen möchten, registrieren Sie sich und fügen Sie entweder im HTML- oder im 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 das Hochladen von Videos mit WebCodecs können Sie sich damit vertraut machen.

Neuigkeiten zu WebGPU

Eine Liste aller Themen, die in der Reihe What's New in WebGPU behandelt wurden.

Chrome 153–154

Chrome 151–152

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