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 issue chromium:1497815.

Exemplo da WebGPU em execução no Chrome para Android.

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

O Chrome agora usa a potência do DXC (DirectX Compiler) para compilar sombreadores em máquinas Windows D3D12 equipadas com o 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 um 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 de GPUBuffer para a CPU.
• Decodificar os valores de carimbo de data/hora como um BigInt64Array.

Confira o exemplo a seguir e 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 problemas de ataque de tempo, as consultas de carimbo de data/hora são quantizadas com uma resolução de 100 microssegundos, o que oferece um bom compromisso 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.

Exemplo de Compute Boids com a consulta de carimbo de data/hora.

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

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 para o estágio de sombreador for encontrado no código do sombreador, uma GPUValidationError será acionada. 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 e 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)   { /* ... */ }
}

Montões de memória de informações do adaptador mostrados em https://webgpureport.org.

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 abaixo e informe o problema dawn:2204.

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 130

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

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 amostragem de WGSL é interpolada 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 do 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 amanhecer

Chrome 124

• Texturas de armazenamento somente leitura e leitura/gravação
• Suporte aos 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 amanhecer

Chrome 122

• Expandir o alcance com o modo de compatibilidade (recurso em desenvolvimento)
• Aumentar o 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 passagens 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 Dawn

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 das informações do adaptador
• Quantização de consultas de carimbo de data/hora
• Recursos para fazer faxina

Chrome 119

• Texturas flutuantes de 32 bits com filtro
• Formato de vértice unorm10-10-10-2
• Formato de textura rgb10a2uint
• Atualizações do Dawn

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 Dawn

Chrome 116

• Integração com WebCodecs
• Dispositivo perdido retornado por 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 Dawn

Chrome 114

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

Chrome 113

• Usar a origem VideoFrame do WebCodecs em importExternalTexture()