Co nowego w WebGPU (Chrome 129)

François Beaufort
François Beaufort

Obsługa HDR w trybie mapowania odcieni kanwy

Deweloperzy witryn mają ograniczone możliwości dostarczania treści HDR, ponieważ polegają głównie na elementach <img> i <video>. Element <canvas> pozostaje jednak ograniczony do SDR. Generowanie dynamicznych treści HDR na kanwie wymaga zakodowania ich jako obrazu HDR przed wyświetleniem (przykład: prezentacja).

Nowy parametr GPUCanvasToneMappingMode w konfiguracji WebGPU canvas umożliwia teraz WebGPU rysowanie kolorów jaśniejszych niż biały (#FFFFFF). Wykorzystuje do tego te tryby:

  • "standard": domyślne zachowanie ogranicza treści do zakresu SDR ekranu. Ten tryb jest realizowany przez ograniczenie wszystkich wartości kolorów w przestrzeni kolorów ekranu do przedziału [0, 1].

  • "extended": odblokowuje pełny zakres HDR ekranu. W tym trybie "standard" jest dopasowywany w zakresie [0, 1] na ekranie. Skupienie lub projekcja jest wykonywane w rozszerzonym zakresie dynamicznym ekranu, ale nie w przypadku [0, 1].

Fragment kodu poniżej pokazuje, jak skonfigurować obszar roboczy pod kątem szerokiego zakresu dynamiki.

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

Aby zapoznać się z HDR w WebGPU, otwórz przykład Particle (HDR)WebGPU HDR oraz przeczytaj wpisy w chromestatus.

Laptop z ekranem HDR, na którym wyświetlany jest żywy obraz.
Przykład cząsteczek (HDR) wyświetlany na ekranie HDR.

Rozszerzona obsługa podgrup

Po ogłoszeniu eksperymentu dotyczącego podgrup funkcje wbudowane podgrupy są teraz dostępne do użycia zarówno w shaderach obliczeniowych, jak i w shaderach fragmentów. Nie są już ograniczone tylko do shaderów obliczeniowych. Zobacz problem 354738715.

Pamiętaj, że wbudowana wartość subgroup_size jest obecnie niestabilna w shaderach fragmentów. Na razie nie używaj go.

Ponadto dodano następujące wbudowane funkcje podgrup:

  • subgroupAdd(value): zwraca sumę wszystkich aktywnych wywołań value w podgrupie.
  • subgroupExclusiveAdd(value): zwraca sumę wyników skanowania wszystkich aktywnych wywołań value w podgrupie.
  • subgroupMul(value): zwraca iloczyn wszystkich aktywnych wywołań value w podgrupie.
  • subgroupExclusiveMul(value): zwraca mnożnik skanowania wykluczającego wszystkich aktywnych wywołań value w podgrupie.

  • subgroupAnd(value): zwraca binarne AND wszystkich aktywnych wywołań value w podgrupie.
  • subgroupOr(value): zwraca binarne LUB wszystkich aktywnych wywołań value w podgrupie.
  • subgroupXor(value): zwraca binarne XOR wszystkich aktywnych wywołań value w podgrupie.

  • subgroupMin(value): zwraca minimalną wartość wszystkich aktywnych wywołań value w podgrupie.
  • subgroupMax(value): zwraca maksymalną wartość wszystkich aktywnych wywołań value w podgrupie.

  • subgroupAll(value): zwraca wartość prawda, jeśli value ma wartość prawda dla wszystkich aktywnych wywołań w podgrupie.
  • subgroupAny(value): zwraca wartość prawda, jeśli value ma wartość prawda dla dowolnego aktywnego wywołania w podgrupie.

  • subgroupElect(): zwraca wartość „prawda”, jeśli to wywołanie ma najniższą wartość subgroup_invocation_id spośród aktywnych wywołań w podgrupie.
  • subgroupBroadcastFirst(value): rozgłasza value z aktywnej wywołania o najniższym subgroup_invocation_id w podgrupie do wszystkich innych aktywnych wywołań.

  • subgroupShuffle(value, id): zwraca wartość value z aktywnego wywołania, którego wartość subgroup_invocation_id pasuje do id.
  • subgroupShuffleXor(value, mask): zwraca value z aktywnej wywołania, którego subgroup_invocation_id jest zgodne z subgroup_invocation_id ^ mask. mask musi być dynamicznie jednorodna.
  • subgroupShuffleUp(value, delta): zwraca value z aktywnej wywołania, którego subgroup_invocation_id jest zgodne z subgroup_invocation_id - delta.
  • subgroupShuffleDown(value, delta): zwraca value z aktywnej wywołania, którego subgroup_invocation_id jest zgodne z subgroup_invocation_id + delta.

  • quadBroadcast(value, id): przesyła value z poczwórnego wywołania o identyfikatorze id. id musi być wyrażeniem statycznym.
  • quadSwapX(value): powoduje zamianę value między wywołaniami w czworokątu w kierunku X.
  • quadSwapY(value): zamienia value między wywołaniami w kwadrze w kierunku osi Y.
  • quadSwapDiagonal(value): przełącza value między wywołaniami w kwartecie na ukos.

Aktualizacje świtu

Struktura wgpu::PrimitiveState zawiera teraz ustawienie kontroli klipu głębi, co eliminuje potrzebę korzystania z osobnej struktury wgpu::PrimitiveDepthClipControl. Aby dowiedzieć się więcej, zapoznaj się z tym fragmentem kodu i tabelą webgpu-headers PR.

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

Obejmuje to tylko niektóre najważniejsze informacje. Zapoznaj się z pełną listą commitów.

Co nowego w WebGPU

Lista wszystkich tematów omawianych w cyklu Co nowego w WebGPU.

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