Novità di WebGPU (Chrome 129)

François Beaufort
François Beaufort
GitHub

Supporto HDR con modalità di mappatura tonale della tela

Gli sviluppatori web hanno opzioni limitate per la pubblicazione di contenuti HDR, basandosi principalmente sugli elementi <img> e <video>. L'elemento <canvas>, tuttavia, rimane limitato a SDR. La generazione di contenuti HDR dinamici all'interno di una tela richiede la codifica dei contenuti come immagine HDR prima della visualizzazione (per un esempio, consulta questa demo).

Il nuovo parametro GPUCanvasToneMappingMode nella configurazione della tela WebGPU ora consente a WebGPU di disegnare colori più luminosi del bianco (#FFFFFF). Lo fa tramite le seguenti modalità:

  • "standard": il comportamento predefinito limita i contenuti all'intervallo SDR dello schermo. Questa modalità viene eseguita fissando tutti i valori di colore nello spazio colore dello schermo all'intervallo [0, 1].

  • "extended": sblocca l'intera gamma HDR dello schermo. Questa modalità corrisponde a "standard" nell'intervallo [0, 1] dello schermo. Il clipping o la proiezione viene eseguito in base alla gamma dinamica estesa dello schermo, ma non a [0, 1].

Il seguente snippet di codice mostra come configurare una tela per l'alta gamma dinamica.

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

Esplora l'HDR con WebGPU consultando l'esempio di particelle (HDR) e l'esempio HDR di WebGPU, nonché la voce di chromestatus.

Un laptop con uno schermo HDR che mostra un&#39;immagine vivace.
Il Sample Particelle (HDR) visualizzato su uno schermo HDR.

Supporto dei sottogruppi espansi

A seguito dell'annuncio della sperimentazione sui sottogruppi, le funzioni integrate dei sottogruppi sono ora disponibili per l'utilizzo sia negli shader di calcolo che negli shader di frammento. Non sono più limitati solo agli shader di calcolo. Vedi issue 354738715.

Tieni presente che il valore predefinito subgroup_size è attualmente buggato negli shader di frammento. Evitalo per il momento.

Inoltre, sono state aggiunte le seguenti funzioni predefinite per i sottogruppi:

  • subgroupAdd(value): restituisce la somma di tutte le chiamate attive value nel sottogruppo.
  • subgroupExclusiveAdd(value): restituisce la somma della scansione esclusiva di tutte le chiamate attive value nel sottogruppo.
  • subgroupMul(value): restituisce la moltiplicazione di tutti i value di chiamate attive nel sottogruppo.
  • subgroupExclusiveMul(value): restituisce la moltiplicazione della ricerca esclusiva di tutte le invocazioni attive value nel sottogruppo.

  • subgroupAnd(value): restituisce l'operazione AND binaria di tutte le chiamate attive value nel sottogruppo.
  • subgroupOr(value): restituisce l'OR binario di tutte le invocazioni attive value nel sottogruppo.
  • subgroupXor(value): restituisce l'operazione XOR binaria di tutte le chiamate attive value nel sottogruppo.

  • subgroupMin(value): restituisce il valore minimo di tutte le invocazioni attive value nel sottogruppo.
  • subgroupMax(value): restituisce il valore massimo di tutte le invocazioni attive value nel sottogruppo.

  • subgroupAll(value): restituisce true se value è true per tutte le invocazioni attive nel sottogruppo.
  • subgroupAny(value): restituisce true se value è true per qualsiasi chiamata attiva nel sottogruppo.

  • subgroupElect(): restituisce true se questa chiamata ha il valore subgroup_invocation_id più basso tra le chiamate attive nel sottogruppo.
  • subgroupBroadcastFirst(value): trasmette value dall'invocazione attiva con il valore subgroup_invocation_id più basso nel sottogruppo a tutte le altre invocazioni attive.

  • subgroupShuffle(value, id): restituisce value dall'invocazione attiva il cui subgroup_invocation_id corrisponde a id.
  • subgroupShuffleXor(value, mask): restituisce value dall'invocazione attiva il cui subgroup_invocation_id corrisponde a subgroup_invocation_id ^ mask. mask deve essere uniforme in modo dinamico.
  • subgroupShuffleUp(value, delta): restituisce value dall'invocazione attiva il cui subgroup_invocation_id corrisponde a subgroup_invocation_id - delta.
  • subgroupShuffleDown(value, delta): restituisce value dall'invocazione attiva il cui subgroup_invocation_id corrisponde a subgroup_invocation_id + delta.

  • quadBroadcast(value, id): trasmette value dall'invocazione del quad con ID uguale a id. id deve essere un'espressione costante.
  • quadSwapX(value): scambia value tra le invocazioni nel quad nella direzione X.
  • quadSwapY(value): scambia value tra le invocazioni nel quad nella direzione Y.
  • quadSwapDiagonal(value): scambia value tra le invocazioni nel quad in diagonale.

Aggiornamenti di Dawn

La struttura wgpu::PrimitiveState ora include direttamente l'impostazione di controllo del clip di profondità, eliminando la necessità di una struttura wgpu::PrimitiveDepthClipControl separata. Per scoprire di più, consulta il seguente snippet di codice e il PR webgpu-headers.

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

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

Sono riportati solo alcuni dei punti salienti. Consulta l'elenco completo dei commit.

Novità di WebGPU

Un elenco di tutto ciò che è stato trattato nella serie Novità di 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