Das ist neu bei WebGPU (Chrome 129)

François Beaufort
François Beaufort
GitHub

HDR-Unterstützung mit Canvas-Tone-Mapping-Modus

Webentwickler haben nur begrenzte Möglichkeiten, HDR-Inhalte bereitzustellen. Sie sind hauptsächlich auf die Elemente <img> und <video> angewiesen. Das <canvas>-Element ist jedoch weiterhin auf SDR beschränkt. Wenn Sie dynamische HDR-Inhalte in einem Canvas generieren, müssen Sie die Inhalte als HDR-Bild codieren, bevor Sie sie anzeigen (Beispiel).

Mit dem neuen Parameter GPUCanvasToneMappingMode in der WebGPU-Canvas-Konfiguration können mit WebGPU jetzt Farben gezeichnet werden, die heller als Weiß (#FFFFFF) sind. Dies ist in den folgenden Modi möglich:

  • "standard": Das Standardverhalten beschränkt Inhalte auf den SDR-Bereich des Bildschirms. In diesem Modus werden alle Farbwerte im Farbraum des Bildschirms auf das Intervall [0, 1] begrenzt.

  • "extended": Schaltet den vollen HDR-Bereich des Displays frei. In diesem Modus wird "standard" im [0, 1]-Bereich des Displays angezeigt. Die Begrenzung oder Projektion erfolgt auf den erweiterten Dynamikbereich des Bildschirms, nicht auf [0, 1].

Das folgende Code-Snippet zeigt, wie Sie einen Canvas für High Dynamic Range konfigurieren.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

Beispiel für Partikel (HDR), WebGPU-HDR-Beispiel und Chrome-Status-Eintrag

Ein Laptop mit einem HDR-Bildschirm, auf dem ein lebendiges Bild angezeigt wird.
Das Beispiel „Partikel (HDR)“ auf einem HDR-Bildschirm.

Unterstützung für erweiterte Untergruppen

Nach der Ankündigung von Untergruppen-Tests können die integrierten Untergruppenfunktionen jetzt sowohl in Compute-Shadern als auch in Fragment-Shadern verwendet werden. Sie sind nicht mehr auf Compute-Shader beschränkt. Siehe Problem 354738715.

Der integrierte Wert subgroup_size ist in Fragment-Shadern derzeit fehlerhaft. Vermeide es vorerst.

Außerdem wurden die folgenden integrierten Funktionen für Untergruppen hinzugefügt:

  • subgroupAdd(value): Gibt die Summe aller aktiven Aufrufe values in der Untergruppe zurück.
  • subgroupExclusiveAdd(value): Gibt die exklusive Scan-Summierung aller aktiven Aufrufe values in der Untergruppe zurück.
  • subgroupMul(value): Gibt das Produkt aller aktiven Aufrufe values in der Untergruppe zurück.
  • subgroupExclusiveMul(value): Gibt die exklusive Scan-Multiplikation aller aktiven Aufrufe values in der Untergruppe zurück.

  • subgroupAnd(value): Gibt das binäre UND aller aktiven Aufrufe values in der Untergruppe zurück.
  • subgroupOr(value): Gibt das binäre ODER aller aktiven Aufrufe values in der Untergruppe zurück.
  • subgroupXor(value): Gibt das binäre XOR aller aktiven Aufrufe values in der Untergruppe zurück.

  • subgroupMin(value): Gibt den Minimalwert aller aktiven Aufrufe values in der Untergruppe zurück.
  • subgroupMax(value): Gibt den Maximalwert aller aktiven Aufrufe values in der Untergruppe zurück.

  • subgroupAll(value): Gibt „true“ zurück, wenn value für alle aktiven Aufrufe in der Untergruppe „true“ ist.
  • subgroupAny(value): Gibt „true“ zurück, wenn value für einen aktiven Aufruf in der Untergruppe „true“ ist.

  • subgroupElect(): Gibt „true“ zurück, wenn dieser Aufruf den niedrigsten subgroup_invocation_id unter den aktiven Aufrufen in der Untergruppe hat.
  • subgroupBroadcastFirst(value): Sendet value vom aktiven Aufruf mit dem niedrigsten subgroup_invocation_id in der Untergruppe an alle anderen aktiven Aufrufe.

  • subgroupShuffle(value, id): Gibt value vom aktiven Aufruf zurück, dessen subgroup_invocation_id mit id übereinstimmt.
  • subgroupShuffleXor(value, mask): Gibt value vom aktiven Aufruf zurück, dessen subgroup_invocation_id mit subgroup_invocation_id ^ mask übereinstimmt. mask muss dynamisch einheitlich sein.
  • subgroupShuffleUp(value, delta): Gibt value vom aktiven Aufruf zurück, dessen subgroup_invocation_id mit subgroup_invocation_id - delta übereinstimmt.
  • subgroupShuffleDown(value, delta): Gibt value vom aktiven Aufruf zurück, dessen subgroup_invocation_id mit subgroup_invocation_id + delta übereinstimmt.

  • quadBroadcast(value, id): Sendet value aus dem Quad-Aufruf mit der ID id. id muss ein konstanter Ausdruck sein.
  • quadSwapX(value): Tauscht value zwischen Aufrufen im Quad in X-Richtung.
  • quadSwapY(value): Tauscht value zwischen Aufrufen im Quad in Y-Richtung.
  • quadSwapDiagonal(value): Tauscht value zwischen Aufrufen im Quad diagonal.

Aktualisierungen zu Dawn

Die wgpu::PrimitiveState-Struktur enthält jetzt direkt die Einstellung für die Tiefenbegrenzung. Eine separate wgpu::PrimitiveDepthClipControl-Struktur ist nicht mehr erforderlich. Weitere Informationen finden Sie im folgenden Code-Snippet und im webgpu-headers-PR.

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;

// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

Dies sind nur einige der wichtigsten Highlights. Vollständige Liste der Commits

Neuigkeiten zu WebGPU

Eine Liste aller Themen, die in der Reihe Neu in WebGPU behandelt wurden.

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