Das ist neu bei WebGPU (Chrome 129)

François Beaufort
François Beaufort
GitHub

HDR-Unterstützung mit Canvas-Tonmapping-Modus

Webentwickler haben nur begrenzte Möglichkeiten, HDR-Inhalte bereitzustellen. Sie verlassen sich hauptsächlich auf <img>- und <video>-Elemente. Das <canvas>-Element ist jedoch weiterhin auf SDR beschränkt. Wenn Sie dynamische HDR-Inhalte auf einem Canvas generieren möchten, müssen die Inhalte vor der Wiedergabe als HDR-Bild codiert werden. Ein Beispiel dafür finden Sie in dieser Demo.

Mit dem neuen Parameter GPUCanvasToneMappingMode in der WebGPU-Canvas-Konfiguration kann WebGPU jetzt Farben heller als Weiß (#FFFFFF) zeichnen. Dazu stehen die folgenden Modi zur Verfügung:

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

  • "extended": Der volle HDR-Bereich des Displays wird freigeschaltet. Dieser Modus entspricht "standard" im Bereich [0, 1] des Bildschirms. Die Begrenzung oder Projektion erfolgt auf den erweiterten dynamischen Bereich des Bildschirms, aber nicht auf [0, 1].

Im folgenden Code-Snippet sehen Sie, 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" },
});

Weitere Informationen zu HDR mit WebGPU finden Sie im Beispiel „Partikel (HDR)“ und im Beispiel „WebGPU HDR“ sowie im Eintrag in chromestatus.

Ein Laptop mit einem HDR-Bildschirm, auf dem ein lebendiges Bild zu sehen ist.
Das Particles (HDR)-Beispiel auf einem HDR-Bildschirm.

Unterstützung für maximierte Untergruppen

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

Der integrierte Wert subgroup_size ist in Fragment-Shadern derzeit buggy. Vermeiden Sie es vorerst.

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

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

  • subgroupAnd(value): Gibt das binäre AND aller aktiven values in der Untergruppe zurück.
  • subgroupOr(value): Gibt das binäre OR aller aktiven Aufrufe values in der Untergruppe zurück.
  • subgroupXor(value): gibt den binären XOR-Wert aller aktiven values in der Untergruppe zurück.

  • subgroupMin(value): Gibt den Minimalwert aller aktiven value-Aufrufe in der Untergruppe zurück.
  • subgroupMax(value): Gibt den maximalen Wert 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 wahr ist.
  • subgroupAny(value): Gibt „true“ zurück, wenn value für einen aktiven Aufruf in der Untergruppe „true“ ist.

  • subgroupElect(): Gibt „wahr“ zurück, wenn dieser Aufruf die niedrigste subgroup_invocation_id unter den aktiven Aufrufen in der Untergruppe hat.
  • subgroupBroadcastFirst(value): value wird von der aktiven Aufrufinstanz mit der niedrigsten subgroup_invocation_id in der Untergruppe an alle anderen aktiven Aufrufe gesendet.

  • subgroupShuffle(value, id): Gibt value aus der aktiven Aufrufinstanz zurück, deren subgroup_invocation_id mit id übereinstimmt.
  • subgroupShuffleXor(value, mask): Gibt value aus der aktiven Aufrufinstanz zurück, deren subgroup_invocation_id mit subgroup_invocation_id ^ mask übereinstimmt. mask muss dynamisch einheitlich sein.
  • subgroupShuffleUp(value, delta): Gibt value des aktiven Aufrufs zurück, dessen subgroup_invocation_id mit subgroup_invocation_id - delta übereinstimmt.
  • subgroupShuffleDown(value, delta): Gibt value aus der aktiven Aufrufinstanz zurück, deren subgroup_invocation_id mit subgroup_invocation_id + delta übereinstimmt.

  • quadBroadcast(value, id): Überträgt value von der Quad-Aufruf-ID id. id muss ein konstanter Ausdruck sein.
  • quadSwapX(value): Hiermit wird value zwischen Aufrufen im Quad in X-Richtung getauscht.
  • quadSwapY(value): tauscht value zwischen Aufrufen im Quad in Y-Richtung aus.
  • quadSwapDiagonal(value): Hiermit wird value diagonal zwischen den Aufrufen im Quad ausgetauscht.

Dawn-Updates

Das wgpu::PrimitiveState-Attribut enthält jetzt direkt die Einstellung für die Tiefenschnittsteuerung, sodass kein separates wgpu::PrimitiveDepthClipControl-Attribut mehr erforderlich ist. Weitere Informationen finden Sie im folgenden Code-Snippet und im PR für webgpu-headers.

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

Das ist neu bei WebGPU

Eine Liste aller behandelten Themen der Reihe What's New in WebGPU.

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