Novidades da WebGPU (Chrome“129)

François Beaufort
François Beaufort
GitHub

Suporte a HDR com o modo de mapeamento de tons da tela

Os desenvolvedores da Web têm opções limitadas para fornecer conteúdo HDR, dependendo principalmente dos elementos <img> e <video>. No entanto, o elemento <canvas> continua restrito ao SDR. Para gerar conteúdo HDR dinâmico em uma tela, é necessário codificar o conteúdo como uma imagem HDR antes de exibi-lo. Para conferir um exemplo, consulte esta demonstração.

O novo parâmetro GPUCanvasToneMappingMode na configuração da tela da WebGPU agora permite que a WebGPU desenhe cores mais brilhantes que o branco (#FFFFFF) nos seguintes modos:

  • "standard": o comportamento padrão restringe o conteúdo ao intervalo SDR da tela. Esse modo é alcançado ao limitar todos os valores de cor no espaço de cor da tela ao intervalo [0, 1].

  • "extended": desbloqueia o intervalo HDR completo da tela. Esse modo corresponde a "standard" no intervalo [0, 1] da tela. A limitação ou projeção é feita para o intervalo dinâmico estendido da tela, mas não para [0, 1].

O snippet de código a seguir mostra como configurar uma tela para o alto alcance 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" },
});

Confira a amostra Particles (HDR) e o exemplo de HDR da WebGPU e a entrada chromestatus para conhecer o HDR com a WebGPU.

Um laptop com uma tela HDR mostrando uma imagem vibrante.
O exemplo de partículas (HDR) exibido em uma tela HDR.

Suporte para subgrupos expandidos

Após o anúncio da experimentação de subgrupos, as funções integradas de subgrupos agora estão disponíveis para uso em sombreadores de computação e de fragmentos. Eles não estão mais restritos a sombreadores de computação. Consulte o problema 354738715.

O valor integrado subgroup_size está com bugs em sombreadores de fragmentos. Evite por enquanto.

Além disso, as seguintes funções integradas de subgrupo foram adicionadas:

  • subgroupAdd(value): retorna a soma de todas as invocações value ativas no subgrupo.
  • subgroupExclusiveAdd(value): retorna a soma da verificação exclusiva de todas as invocações ativas values no subgrupo.
  • subgroupMul(value): retorna a multiplicação de todas as invocações value ativas no subgrupo.
  • subgroupExclusiveMul(value): retorna a multiplicação de verificação exclusiva de todas as invocações value ativas no subgrupo.

  • subgroupAnd(value): retorna o AND binário de todas as invocações value ativas no subgrupo.
  • subgroupOr(value): retorna o OU binário de todas as invocações value ativas no subgrupo.
  • subgroupXor(value): retorna a operação XOR binária de todas as invocações value ativas no subgrupo.

  • subgroupMin(value): retorna o valor mínimo de todas as values de invocações ativas no subgrupo.
  • subgroupMax(value): retorna o valor máximo de todas as invocações value ativas no subgrupo.

  • subgroupAll(value): retorna verdadeiro se value for verdadeiro para todas as invocações ativas no subgrupo.
  • subgroupAny(value): retorna verdadeiro se value for verdadeiro para qualquer invocação ativa no subgrupo.

  • subgroupElect(): retorna "true" se esta invocação tiver a menor subgroup_invocation_id entre as invocações ativas no subgrupo.
  • subgroupBroadcastFirst(value): transmite value da invocação ativa com o subgroup_invocation_id mais baixo no subgrupo para todas as outras invocações ativas.

  • subgroupShuffle(value, id): retorna value da invocação ativa cujo subgroup_invocation_id corresponde a id.
  • subgroupShuffleXor(value, mask): retorna o value da invocação ativa com subgroup_invocation_id correspondente a subgroup_invocation_id ^ mask. mask precisa ser dinamicamente uniforme.
  • subgroupShuffleUp(value, delta): retorna o value da invocação ativa com subgroup_invocation_id correspondente a subgroup_invocation_id - delta.
  • subgroupShuffleDown(value, delta): retorna o value da invocação ativa com subgroup_invocation_id correspondente a subgroup_invocation_id + delta.

  • quadBroadcast(value, id): transmite value pela invocação do quad com ID igual a id. id precisa ser uma expressão constante.
  • quadSwapX(value): troca value entre invocações no quad na direção X.
  • quadSwapY(value): troca value entre invocações no quad na direção Y.
  • quadSwapDiagonal(value): troca value entre invocações no quad diagonalmente.

Atualizações do amanhecer

A estrutura wgpu::PrimitiveState agora inclui diretamente a configuração de controle de recorte de profundidade, eliminando a necessidade de uma estrutura wgpu::PrimitiveDepthClipControl separada. Para saber mais, consulte o snippet de código a seguir e o PR webgpu-headers.

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

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

Isso cobre apenas alguns dos principais destaques. Confira a lista completa de confirmações.

Novidades na WebGPU

Uma lista de tudo o que foi abordado na série O que há de novo na 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