Novidades da WebGPU (Chrome{/121)

François Beaufort

Suporte à WebGPU no Android

A equipe do Chrome tem o prazer de anunciar que a WebGPU agora está ativada por padrão no Chrome 121 em dispositivos com Android 12 e versões mais recentes e GPUs Qualcomm e ARM.

O suporte será ampliado gradualmente para abranger uma variedade maior de dispositivos Android, incluindo aqueles que executam o Android 11 em um futuro próximo. Essa expansão vai depender de mais testes e otimização para garantir uma experiência perfeita em uma variedade maior de configurações de hardware. Consulte o problema chromium:1497815.

Usar DXC em vez de FXC para compilação de sombreador no Windows

O Chrome agora usa o poder do DXC (DirectX Compiler) para compilar shaders em máquinas Windows D3D12 equipadas com hardware gráfico SM6+. Antes, a WebGPU dependia do FXC (compilador FX) para a compilação de shaders no Windows. Embora funcional, o FXC não tinha o conjunto de recursos e as otimizações de desempenho presentes no DXC.

Os testes iniciais mostram um aumento médio de 20% na velocidade de compilação de sombreadores de computação ao usar o DXC em comparação com o FXC.

Consultas de carimbo de data/hora em transmissões de computação e renderização

As consultas de carimbo de data/hora permitem que os aplicativos da WebGPU meçam com precisão (até o nanossegundo) quanto tempo os comandos da GPU levam para executar os passes de renderização e computação. Eles são usados principalmente para ter insights sobre o desempenho e o comportamento das cargas de trabalho de GPU.

Quando o recurso "timestamp-query" estiver disponível em um GPUAdapter, você poderá fazer o seguinte:

• Solicite uma GPUDevice com o recurso "timestamp-query".
• Crie uma GPUQuerySet do tipo "timestamp".
• Use GPUComputePassDescriptor.timestampWrites e GPURenderPassDescriptor.timestampWrites para definir onde gravar valores de carimbo de data/hora em GPUQuerySet.
• Resolva os valores de carimbo de data/hora em um GPUBuffer com resolveQuerySet().
• Leia os valores de carimbo de data/hora copiando os resultados do GPUBuffer para a CPU.
• Decodificar os valores de carimbo de data/hora como um BigInt64Array.

Confira o exemplo abaixo e informe o problema dawn:1800.

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("timestamp-query")) {
  throw new Error("Timestamp query feature is not available");
}
// Explicitly request timestamp query feature.
const device = await adapter.requestDevice({
  requiredFeatures: ["timestamp-query"],
});
const commandEncoder = device.createCommandEncoder();

// Create a GPUQuerySet which holds 2 timestamp query results: one for the
// beginning and one for the end of compute pass execution.
const querySet = device.createQuerySet({ type: "timestamp", count: 2 });
const timestampWrites = {
  querySet,
  beginningOfPassWriteIndex: 0, // Write timestamp in index 0 when pass begins.
  endOfPassWriteIndex: 1, // Write timestamp in index 1 when pass ends.
};
const passEncoder = commandEncoder.beginComputePass({ timestampWrites });
// TODO: Set pipeline, bind group, and dispatch work to be performed.
passEncoder.end();

// Resolve timestamps in nanoseconds as a 64-bit unsigned integer into a GPUBuffer.
const size = 2 * BigInt64Array.BYTES_PER_ELEMENT;
const resolveBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC,
});
commandEncoder.resolveQuerySet(querySet, 0, 2, resolveBuffer, 0);

// Read GPUBuffer memory.
const resultBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});
commandEncoder.copyBufferToBuffer(resolveBuffer, 0, resultBuffer, 0, size);

// Submit commands to the GPU.
device.queue.submit([commandEncoder.finish()]);

// Log compute pass duration in nanoseconds.
await resultBuffer.mapAsync(GPUMapMode.READ);
const times = new BigInt64Array(resultBuffer.getMappedRange());
console.log(`Compute pass duration: ${Number(times[1] - times[0])}ns`);
resultBuffer.unmap();

Devido a questões de ataque de tempo, as consultas de carimbo de data/hora são quantificadas com uma resolução de 100 microssegundos, o que oferece um bom meio-termo entre precisão e segurança. No navegador Chrome, você pode desativar a quantização de carimbos de data/hora ativando a flag "WebGPU Developer Features" em chrome://flags/#enable-webgpu-developer-features durante o desenvolvimento do app. Consulte Quantização de consultas de carimbos de data/hora para saber mais.

Como as GPUs podem redefinir o contador de carimbo de data/hora de vez em quando, o que pode resultar em valores inesperados, como deltas negativos entre carimbos de data/hora, recomendo que você confira as alterações de diferenças do Git que adicionam suporte à consulta de carimbo de data/hora na amostra do Compute Boids a seguir.

Pontos de entrada padrão para módulos de sombreador

Para melhorar a experiência do desenvolvedor, agora é possível omitir o entryPoint do módulo de shader ao criar um pipeline de computação ou renderização. Se nenhum ponto de entrada exclusivo do estágio do sombreador for encontrado no código dele, um GPUValidationError será acionado. Confira o exemplo a seguir e issue dawn:2254.

const code = `
    @vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
      @builtin(position) vec4f {
       const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
       return vec4f(pos[i], 0, 1);
    }
    @fragment fn fragmentMain() -> @location(0) vec4f {
      return vec4f(1, 0, 0, 1);
    }`;
const module = myDevice.createShaderModule({ code });
const format = navigator.gpu.getPreferredCanvasFormat();
const pipeline = await myDevice.createRenderPipelineAsync({
  layout: "auto",
  vertex: { module, entryPoint: "vertexMain" },
  fragment: { module, entryPoint: "fragmentMain", targets: [{ format }] },
  vertex: { module },
  fragment: { module, targets: [{ format }] },
});

Suporte a display-p3 como espaço de cores GPUExternalTexture

Agora é possível definir o espaço de cores de destino "display-p3" ao importar uma GPUExternalTexture de vídeos HDR com importExternalTexture(). Confira como a WebGPU lida com espaços de cor. Confira o exemplo a seguir e veja o problema chromium:1330250.

// Create texture from HDR video.
const video = document.querySelector("video");
const texture = myDevice.importExternalTexture({
  source: video,
  colorSpace: "display-p3",
});

Informações sobre pilhas de memória

Para ajudar a prever limitações de memória ao alocar grandes quantidades durante o desenvolvimento do app, o requestAdapterInfo() agora expõe informações memoryHeaps, como o tamanho e o tipo de pilhas de memória disponíveis no adaptador. Esse recurso experimental só pode ser acessado quando a flag "WebGPU Developer Features" em chrome://flags/#enable-webgpu-developer-features está ativada. Confira o exemplo a seguir e dawn:2249.

const adapter = await navigator.gpu.requestAdapter();
const adapterInfo = await adapter.requestAdapterInfo();

for (const { size, properties } of adapterInfo.memoryHeaps) {
  console.log(size); // memory heap size in bytes
  if (properties & GPUHeapProperty.DEVICE_LOCAL)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_VISIBLE)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_COHERENT) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_UNCACHED) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_CACHED)   { /* ... */ }
}

Atualizações do Dawn

Os métodos HasWGSLLanguageFeature e EnumerateWGSLLanguageFeatures em wgpu::Instance foram adicionados para processar recursos de idioma WGSL. Consulte o problema dawn:2260.

O recurso wgpu::Feature::BufferMapExtendedUsages não padrão permite criar um buffer de GPU com wgpu::BufferUsage::MapRead ou wgpu::BufferUsage::MapWrite e qualquer outro wgpu::BufferUsage. Confira o exemplo e o problema dawn:2204 a seguir.

wgpu::BufferDescriptor descriptor = {
  .size = 128,
  .usage = wgpu::BufferUsage::MapWrite | wgpu::BufferUsage::Uniform
};
wgpu::Buffer uniformBuffer = device.CreateBuffer(&descriptor);

uniformBuffer.MapAsync(wgpu::MapMode::Write, 0, 128,
   [](WGPUBufferMapAsyncStatus status, void* userdata)
   {
      wgpu::Buffer* buffer = static_cast<wgpu::Buffer*>(userdata);
      memcpy(buffer->GetMappedRange(), data, sizeof(data));
   },
   &uniformBuffer);

Os seguintes recursos foram documentados: Compartilhamento de textura do ANGLE, proteção de vários segmentos do D3D11, sincronização implícita de dispositivos, formatos de textura Norm16, consulta de carimbo de data/hora dentro de transmissões, armazenamento local de pixels, recursos de sombreador e formatos multiplanares.

A equipe do Chrome criou um repositório oficial do GitHub para o Dawn.

Isso abrange 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

• Distâncias de corte na WGSL
• GPUCanvasContext getConfiguration()
• As primitivas de ponto e linha não podem ter viés de profundidade
• Funções integradas de verificação inclusiva para subgrupos
• Suporte experimental para multidraw indireto
• Opção de compilação do módulo do sombreador: matemática rigorosa
• Remover GPUAdapter requestAdapterInfo()
• Atualizações do amanhecer

Chrome 130

• Combinação de fontes duplas
• Melhorias no tempo de compilação de sombreador no Metal
• Descontinuação do método requestAdapterInfo() do GPUAdapter
• Atualizações do amanhecer

Chrome 129

• Suporte a HDR com o modo de mapeamento de tons da tela
• Suporte a subgrupos expandidos
• Atualizações do Dawn

Chrome 128

• Testar subgrupos
• A descontinuação da configuração de viés de profundidade para linhas e pontos
• Ocultar o aviso do DevTools de erro não capturado se preventDefault
• A WGSL interpola a amostragem primeiro e
• Atualizações do Dawn

Chrome 127

• Suporte experimental para OpenGL ES no Android
• Atributo de informações do GPUAdapter
• Melhorias na interoperabilidade do WebAssembly
• Melhoria nos erros do codificador de comando
• Atualizações do amanhecer

Chrome 126

• Aumento do limite de maxTextureArrayLayers
• Otimização de upload de buffer para o back-end do Vulkan
• Melhorias no tempo de compilação de sombreador
• Os buffers de comando enviados precisam ser exclusivos
• Atualizações do Dawn

Chrome 125

• Subgrupos (recurso em desenvolvimento)
• Renderizar para fatia de textura 3D
• Atualizações do Dawn

Chrome 124

• Texturas de armazenamento somente leitura e leitura/gravação
• Suporte a service workers e workers compartilhados
• Novos atributos de informações do adaptador
• Correções de bugs
• Atualizações do Dawn

Chrome 123

• Suporte a funções integradas do DP4a no WGSL
• Parâmetros de ponteiro irrestrito na WGSL
• Açúcar sintático para desreferenciar compósitos na WGSL
• Estado somente leitura separado para aspectos de stencil e profundidade
• Atualizações do Dawn

Chrome 122

• Ampliar o alcance com o modo de compatibilidade (recurso em desenvolvimento)
• Aumento do limite de maxVertexAttributes
• Atualizações do Dawn

Chrome 121

• Suporte à WebGPU no Android
• Usar DXC em vez de FXC para a compilação de shaders no Windows
• Consultas de carimbo de data/hora em transmissões de computação e renderização
• Pontos de entrada padrão para módulos de sombreador
• Suporte a display-p3 como espaço de cores de GPUExternalTexture
• Informações sobre pilhas de memória
• Atualizações do amanhecer

Chrome 120

• Suporte para valores de ponto flutuante de 16 bits na WGSL
• Supere os limites
• Mudanças no estado de profundidade do estêncil
• Atualizações de informações sobre adaptadores
• Quantização de consultas de carimbo de data/hora
• Recursos de limpeza geral

Chrome 119

• Texturas flutuantes filtráveis de 32 bits
• Formato de vértice unorm10-10-10-2
• Formato de textura rgb10a2uint
• Atualizações do amanhecer

Chrome 118

• Suporte a HTMLImageElement e ImageData em copyExternalImageToTexture()
• Suporte experimental para textura de armazenamento de leitura/gravação e somente leitura
• Atualizações do Dawn

Chrome 117

• Buffer de vértice não definido
• Desvincular grupo
• Silenciar erros da criação de pipeline assíncrono quando o dispositivo é perdido
• Atualizações na criação de módulos de sombreador SPIR-V
• Como melhorar a experiência do desenvolvedor
• Pipelines em cache com layout gerado automaticamente
• Atualizações do amanhecer

Chrome 116

• Integração com o WebCodecs
• Dispositivo perdido retornado pelo GPUAdapter requestDevice()
• Manter a reprodução de vídeo suave se importExternalTexture() for chamado
• Conformidade com as especificações
• Como melhorar a experiência do desenvolvedor
• Atualizações do Dawn

Chrome 115

• Extensões de linguagem WGSL com suporte
• Suporte experimental para Direct3D 11
• Receber uma GPU discreta por padrão com alimentação CA
• Como melhorar a experiência do desenvolvedor
• Atualizações do amanhecer

Chrome 114

• Otimizar o JavaScript
• getCurrentTexture() em uma tela não configurada gera InvalidStateError
• Atualizações da WGSL
• Atualizações do Dawn

Chrome 113

• Usar a origem VideoFrame do WebCodecs em importExternalTexture()