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 canvas WebGPU ora consente a WebGPU di disegnare colori più brillanti del bianco (#FFFFFF), 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 e consulta la voce di chromestatus.

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

Supporto dei sottogruppi espansi

In seguito all'annuncio della sperimentazione dei sottogruppi, le funzioni integrate dei sottogruppi sono ora disponibili per l'uso sia in Compute Shar che in Snippet Shader. 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 lo XOR binario 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 chiamate value attive 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 dalla chiamata attiva con il subgroup_invocation_id più basso nel sottogruppo a tutte le altre chiamate attive.

  • subgroupShuffle(value, id): restituisce value dalla chiamata 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 dalla chiamata attiva il cui subgroup_invocation_id corrisponde a subgroup_invocation_id + delta.

  • quadBroadcast(value, id): trasmette value dalla chiamata 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 punti salienti. Consulta l'elenco completo dei commit.

Novità di WebGPU

Un elenco di tutti gli argomenti trattati 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