Novedades de WebGPU (Chrome 129)

François Beaufort
François Beaufort
GitHub

Compatibilidad con HDR con el modo de asignación de tono del lienzo

Los desarrolladores web tienen opciones limitadas para entregar contenido HDR, ya que dependen principalmente de los elementos <img> y <video>. Sin embargo, el elemento <canvas> sigue restringido a SDR. Para generar contenido HDR dinámico dentro de un lienzo, se debe codificar su contenido como una imagen HDR antes de mostrarlo (para ver un ejemplo, consulta esta demo).

El nuevo parámetro GPUCanvasToneMappingMode en la configuración del lienzo de WebGPU ahora permite que WebGPU dibuje colores más brillantes que el blanco (#FFFFFF). Lo hace a través de los siguientes modos:

  • "standard": El comportamiento predeterminado restringe el contenido al rango SDR de la pantalla. Para lograr este modo, se fijan todos los valores de color en el espacio de color de la pantalla al intervalo [0, 1].

  • "extended": Desbloquea el rango completo de HDR de la pantalla. Este modo coincide con "standard" en el rango [0, 1] de la pantalla. La limitación o proyección se realiza en el rango dinámico extendido de la pantalla, pero no en [0, 1].

En el siguiente fragmento de código, se muestra cómo configurar un lienzo para el alto rango dinámico.

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

Explora el HDR con WebGPU. Para ello, consulta el ejemplo de partículas (HDR) y el ejemplo de HDR de WebGPU, y consulta la entrada de chromestatus.

Una laptop con una pantalla HDR que muestra una imagen vibrante.
El sample de Particles (HDR) se muestra en una pantalla HDR.

Compatibilidad expandida con subgrupos

Después del anuncio de la experimentación con subgrupos, las funciones integradas de subgrupos ahora están disponibles para usarse en sombreadores de cómputos y sombreadores de fragmentos. Ya no se limitan solo a los sombreadores de cómputo. Consulta el problema 354738715.

Ten en cuenta que el valor integrado subgroup_size actualmente tiene errores en los sombreadores de fragmentos. Evita esta opción por el momento.

Además, se agregaron las siguientes funciones integradas de subgrupo:

  • subgroupAdd(value): Muestra la suma de todas las invocaciones activas value en el subgrupo.
  • subgroupExclusiveAdd(value): Muestra la suma de análisis exclusiva de todas las invocaciones activas value en el subgrupo.
  • subgroupMul(value): Muestra la multiplicación de todas las invocaciones activas value en el subgrupo.
  • subgroupExclusiveMul(value): Muestra la multiplicación de análisis exclusivos de todas las invocaciones activas value en el subgrupo.

  • subgroupAnd(value): Muestra el operador Y binario de todas las invocaciones activas value en el subgrupo.
  • subgroupOr(value): Muestra el OR binario de todas las invocaciones activas value en el subgrupo.
  • subgroupXor(value): Muestra el XOR binario de todas las invocaciones activas value en el subgrupo.

  • subgroupMin(value): Muestra el valor mínimo de todas las invocaciones activas value en el subgrupo.
  • subgroupMax(value): Muestra el valor máximo de todas las invocaciones activas value en el subgrupo.

  • subgroupAll(value): Muestra un valor verdadero si value es verdadero para todas las invocaciones activas del subgrupo.
  • subgroupAny(value): Muestra verdadero si value es verdadero para cualquier invocación activa en el subgrupo.

  • subgroupElect(): Muestra verdadero si esta invocación tiene el subgroup_invocation_id más bajo entre las invocaciones activas del subgrupo.
  • subgroupBroadcastFirst(value): Transmite value desde la invocación activa con el subgroup_invocation_id más bajo del subgrupo a todas las demás invocaciones activas.

  • subgroupShuffle(value, id): Muestra value de la invocación activa cuyo subgroup_invocation_id coincide con id.
  • subgroupShuffleXor(value, mask): Muestra value de la invocación activa cuyo subgroup_invocation_id coincide con subgroup_invocation_id ^ mask. mask debe ser uniforme de forma dinámica.
  • subgroupShuffleUp(value, delta): Muestra value de la invocación activa cuyo subgroup_invocation_id coincide con subgroup_invocation_id - delta.
  • subgroupShuffleDown(value, delta): Muestra value de la invocación activa cuyo subgroup_invocation_id coincide con subgroup_invocation_id + delta.

  • quadBroadcast(value, id): Emite value desde la invocación cuádruple con un ID igual a id. id debe ser una expresión constante.
  • quadSwapX(value): Intercambia value entre invocaciones en el cuádruple en la dirección X.
  • quadSwapY(value): Intercambia value entre invocaciones en el cuádruple en la dirección Y.
  • quadSwapDiagonal(value): Intercambia value entre invocaciones en el cuádruple diagonalmente.

Actualizaciones de Dawn

La estructura wgpu::PrimitiveState ahora incluye directamente la configuración del control de recorte de profundidad, lo que elimina la necesidad de una estructura wgpu::PrimitiveDepthClipControl independiente. Para obtener más información, consulta el siguiente fragmento de código y la PR de webgpu-headers.

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

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

Esto solo abarca algunos de los aspectos más destacados. Consulta la lista exhaustiva de confirmaciones.

Novedades de WebGPU

Una lista de todo lo que se analizó en la serie Novedades de 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