Se usó la API de Cloud Translation para traducir esta página.

Novedades de WebGPU (Chrome 129)

François Beaufort

Compatibilidad con HDR con el modo de asignación de tonos 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, es necesario codificar su contenido como una imagen HDR antes de mostrarlo (para ver un ejemplo, consulta esta demostración).

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) a través de los siguientes modos:

"standard": El comportamiento predeterminado restringe el contenido al rango del SDR de la pantalla. Este modo se logra al ajustar todos los valores de color en el espacio de color de la pantalla al intervalo [0, 1].
"extended": Desbloquea el rango HDR completo de la pantalla. Este modo coincide con "standard" en el rango [0, 1] de la pantalla. El ajuste o la proyección se realizan 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 un rango dinámico alto.

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. — La muestra de partículas (HDR) que se muestra en una pantalla HDR.

Compatibilidad expandida con subgrupos

Tras el anuncio de la experimentación con subgrupos, las funciones integradas de subgrupos ahora están disponibles para su uso en sombreadores de cómputos y sombreadores de fragmentos. Ya no se limitan solo a los sombreadores de procesamiento. Consulta el problema 354738715.

Ten en cuenta que el valor integrado subgroup_size actualmente tiene errores en los sombreadores de fragmentos. Evítalo por ahora.

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

subgroupAdd(value): Muestra la suma de todas las invocaciones activas values en el subgrupo.
subgroupExclusiveAdd(value): Muestra la suma del análisis exclusivo de todas las invocaciones activas values en el subgrupo.
subgroupMul(value): Devuelve la multiplicación de todas las invocaciones activas values en el subgrupo.
subgroupExclusiveMul(value): Devuelve la multiplicación del análisis exclusivo de todas las invocaciones activas values en el subgrupo.
subgroupAnd(value): Muestra el AND binario de todas las invocaciones value activas en el subgrupo.
subgroupOr(value): Devuelve el OR binario de todas las invocaciones values activas en el subgrupo.
subgroupXor(value): Devuelve el XOR binario de todas las invocaciones value activas en el subgrupo.
subgroupMin(value): Devuelve el valor mínimo de todas las invocaciones activas values en el subgrupo.
subgroupMax(value): Devuelve el valor máximo de todas las invocaciones activas values en el subgrupo.
subgroupAll(value): Devuelve verdadero si value es verdadero para todas las invocaciones activas del subgrupo.
subgroupAny(value): Devuelve verdadero si value es verdadero para cualquier invocación activa en el subgrupo.
subgroupElect(): Devuelve verdadero si esta invocación tiene el valor de subgroup_invocation_id más bajo entre las invocaciones activas del subgrupo.
subgroupBroadcastFirst(value): Emite 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 uniformemente dinámico.
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 de cuádruple con el ID igual a id. id debe ser una expresión constante.
quadSwapX(value): Intercambia value entre las invocaciones en el cuadrante en la dirección X.
quadSwapY(value): Intercambia value entre las invocaciones en el cuadrante en la dirección Y.
quadSwapDiagonal(value): Intercambia value entre las invocaciones en el cuadrante de forma diagonal.

Actualizaciones de Dawn

La estructura wgpu::PrimitiveState ahora incluye directamente el parámetro de configuración de 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 destacados clave. Consulta la lista exhaustiva de confirmaciones.

Novedades de WebGPU (Chrome 129)

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

Compatibilidad expandida con subgrupos

Actualizaciones de Dawn