Nieuw in WebGPU (Chrome 129)

François Beaufort
François Beaufort

HDR-ondersteuning met de modus voor tinttoewijzing van het canvas

Webontwikkelaars hebben beperkte opties om HDR-content te leveren. Ze vertrouwen voornamelijk op de elementen <img> en <video>. Het element <canvas> blijft beperkt tot SDR. Als je dynamische HDR-content in een canvas wilt genereren, moet je de content coderen als HDR-afbeelding voordat je deze weergeeft (bekijk deze demo voor een voorbeeld).

Met de nieuwe parameter GPUCanvasToneMappingMode in de WebGPU-canvasconfiguratie kan WebGPU nu kleuren tekenen die helderder zijn dan wit (#FFFFFF). Dit gebeurt via de volgende modi:

  • "standard": Het standaardgedrag beperkt content tot het SDR-bereik van het scherm. Deze modus wordt bereikt door alle kleurwaarden in de kleurruimte van het scherm te beperken tot het interval [0, 1].

  • "extended": Ontgrendelt het volledige HDR-bereik van het scherm. Deze modus komt overeen met "standard" in het [0, 1]-bereik van het scherm. Begrenzen of projectie wordt uitgevoerd op het uitgebreide dynamische bereik van het scherm, maar niet op [0, 1].

Het volgende codefragment toont hoe je een canvas instelt voor een hoog dynamisch bereik.

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" },
});

Ontdek HDR met WebGPU door het voorbeeld Particles (HDR) en het WebGPU HDR-voorbeeld te checken en de chromestatus-vermelding te bekijken.

Een laptop met een HDR-scherm waarop een levendige afbeelding wordt getoond.
Het voorbeeld Particles (HDR) op een HDR-scherm.

Uitgebreide ondersteuning voor subgroepen

Na de aankondiging van subgroep-experimenten zijn de ingebouwde functies voor subgroepen nu beschikbaar voor gebruik in zowel berekeningsshaders als fragmentshaders. Ze zijn niet meer beperkt tot alleen berekeningsshaders. Ga naar probleem 354738715.

De subgroup_size ingebouwde waarde is op dit moment buggy in fragment shaders. Vermijd het voorlopig.

Daarnaast zijn de volgende ingebouwde functies voor subgroepen toegevoegd:

  • subgroupAdd(value): Retourneert de som van alle actieve aanroepen van value's in de subgroep.
  • subgroupExclusiveAdd(value): Retourneert de exclusieve scansom van alle actieve aanroepen van value in de subgroep.
  • subgroupMul(value): Retourneert de vermenigvuldiging van alle actieve aanroepen value in de subgroep.
  • subgroupExclusiveMul(value): Retourneert de exclusieve scanvermenigvuldiging van alle actieve aanroepen value in de subgroep.

  • subgroupAnd(value): Retourneert de binaire EN van alle actieve aanroepen values in de subgroep.
  • subgroupOr(value): Retourneert de binaire OR van alle actieve aanroepen values in de subgroep.
  • subgroupXor(value): Retourneert de binaire XOR van alle actieve aanroepen value in de subgroep.

  • subgroupMin(value): Retourneert de minimale waarde van alle actieve aanroepen values in de subgroep.
  • subgroupMax(value): Retourneert de maximale waarde van alle actieve aanroepen value in de subgroep.

  • subgroupAll(value): Retourneert waar als value waar is voor alle actieve aanroepen in de subgroep.
  • subgroupAny(value): Retourneert waar als value waar is voor een actieve aanroep in de subgroep.

  • subgroupElect(): Retourneert waar als deze aanroep de laagste subgroup_invocation_id heeft van de actieve aanroepen in de subgroep.
  • subgroupBroadcastFirst(value): Zendt value uit vanaf de actieve aanroep met de laagste subgroup_invocation_id in de subgroep naar alle andere actieve aanroepen.

  • subgroupShuffle(value, id): Haalt value op van de actieve aanroep waarvan subgroup_invocation_id overeenkomt met id.
  • subgroupShuffleXor(value, mask): Haalt value op van de actieve aanroep waarvan subgroup_invocation_id overeenkomt met subgroup_invocation_id ^ mask. mask moet dynamisch uniform zijn.
  • subgroupShuffleUp(value, delta): Haalt value op van de actieve aanroep waarvan subgroup_invocation_id overeenkomt met subgroup_invocation_id - delta.
  • subgroupShuffleDown(value, delta): Haalt value op van de actieve aanroep waarvan subgroup_invocation_id overeenkomt met subgroup_invocation_id + delta.

  • quadBroadcast(value, id): Zendt value uit vanuit de quad-aanroep met de ID id. id moet een constante expressie zijn.
  • quadSwapX(value): Wisselt value tussen aanroepen in het vierkant in de X-richting.
  • quadSwapY(value): Wisselt value tussen aanroepen in het vierkant in de Y-richting.
  • quadSwapDiagonal(value): Wisselt value tussen aanroepen in het vierkant diagonaal.

Updates voor Dawn

De wgpu::PrimitiveState-structuur bevat nu rechtstreeks de instelling voor diepteknipregeling, waardoor een afzonderlijke wgpu::PrimitiveDepthClipControl-structuur niet meer nodig is. Ga voor meer informatie naar het volgende codefragment en de webgpu-headers PR.

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

Dit zijn maar enkele van de belangrijkste punten. Neem de uitgebreide lijst met doorvoeringen door.

Wat is er nieuw in WebGPU?

Een lijst met alles wat is behandeld in de serie Nieuw in WebGPU.

Chrome 155-156

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