Novidades da WebGPU (Chrome“129)

François Beaufort
François Beaufort
GitHub

Compatibilidade com HDR no modo de mapeamento de tons da tela

Os desenvolvedores da Web têm opções limitadas para oferecer 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 mostrar (confira um exemplo nesta demonstração).

O novo parâmetro GPUCanvasToneMappingMode na configuração de tela do WebGPU agora permite que o WebGPU desenhe cores mais claras que o branco (#FFFFFF). Isso é feito pelos seguintes modos:

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

  • "extended": desbloqueia toda a faixa de HDR da tela. Esse modo corresponde a "standard" no intervalo [0, 1] da tela. O ajuste ou a 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 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 o HDR com WebGPU na amostra de partículas (HDR) e no exemplo de HDR da WebGPU, além da entrada do chromestatus.

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

Suporte a subgrupos expandidos

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

O valor integrado subgroup_size está com bugs nos shaders 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 values ativas no subgrupo.
  • subgroupExclusiveAdd(value): retorna a soma exclusiva da verificação de todas as invocações ativas values no subgrupo.
  • subgroupMul(value): retorna a multiplicação de todas as invocações ativas values no subgrupo.
  • subgroupExclusiveMul(value): retorna a multiplicação exclusiva da verificação de todas as invocações ativas values no subgrupo.

  • subgroupAnd(value): retorna o AND binário de todas as invocações ativas values no subgrupo.
  • subgroupOr(value): retorna o OR binário de todas as invocações ativas values no subgrupo.
  • subgroupXor(value): retorna o XOR binário de todas as invocações ativas values no subgrupo.

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

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

  • subgroupElect(): retorna "true" se esta invocação tiver o menor subgroup_invocation_id entre as invocações ativas no subgrupo.
  • subgroupBroadcastFirst(value): transmite value da invocação ativa com o menor subgroup_invocation_id 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 value da invocação ativa cujo subgroup_invocation_id corresponde 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 da invocação do quad com ID igual a id. id precisa ser uma expressão constante.
  • quadSwapX(value): troca value entre invocações no quadrilátero na direção X.
  • quadSwapY(value): troca value entre invocações no quadrante na direção Y.
  • quadSwapDiagonal(value): troca value entre invocações no quadrante na diagonal.

Atualizações do amanhecer

A struct wgpu::PrimitiveState agora inclui diretamente a configuração de controle de corte de profundidade, eliminando a necessidade de uma struct 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 abrange apenas alguns dos principais destaques. Confira a lista completa de commits.

Novidades no WebGPU

Uma lista de tudo o que foi abordado na série O que há de novo no WebGPU.

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

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