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 de tela da WebGPU agora permite que a WebGPU desenhe cores mais claras do que o branco (#FFFFFF). Ele faz isso pelos 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" },
});

Explore o HDR com a WebGPU conferindo as amostras de Particles (HDR) e WebGPU HDR e a entrada do chromestatus (links em inglês).

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 são mais restritos a shaders 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 do subgrupo foram adicionadas:

  • subgroupAdd(value): retorna a soma de todas as invocações value ativas no subgrupo.
  • subgroupExclusiveAdd(value): retorna a soma de verificação exclusiva de todas as invocações value ativas 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 o XOR binário de todas as values de invocações ativas no subgrupo.

  • subgroupMin(value): retorna o valor mínimo de todas as invocações value 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 "true" se value for verdadeiro para qualquer invocação ativa no subgrupo.

  • subgroupElect(): retorna verdadeiro se essa invocação tiver o subgroup_invocation_id mais baixo 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 value da invocação ativa cujo subgroup_invocation_id corresponde a subgroup_invocation_id - delta.
  • subgroupShuffleDown(value, delta): retorna value da invocação ativa cujo subgroup_invocation_id corresponde 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 as invocações no quadrado na direção X.
  • quadSwapY(value): troca value entre as invocações no quad na direção Y.
  • quadSwapDiagonal(value): troca value entre as invocações no quadrado na diagonal.

Atualizações do amanhecer

O struct wgpu::PrimitiveState agora inclui diretamente a configuração de controle de corte de profundidade, eliminando a necessidade de um struct wgpu::PrimitiveDepthClipControl separado. 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 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