Novidades da WebGPU (Chrome 131)

François Beaufort
François Beaufort
GitHub

Distâncias de corte em WGSL

Com as distâncias de corte, é possível restringir o volume de corte de primitivas com semiespaços definidos pelo usuário na saída do estágio de vértice. Definir seus próprios planos de corte oferece mais controle sobre o que fica visível nas cenas do WebGPU. Essa técnica é especialmente útil para aplicativos como softwares de CAD, em que o controle preciso da visualização é crucial.

Quando o recurso "clip-distances" estiver disponível em um GPUAdapter, solicite um GPUDevice com esse recurso para ter suporte a distâncias de corte em WGSL e ative explicitamente essa extensão no seu código WGSL com enable clip_distances;. Depois de ativado, você pode usar a matriz integrada clip_distances no seu shader de vértice. Essa matriz contém distâncias até um plano de corte definido pelo usuário:

  • Uma distância de corte igual a 0 significa que o vértice está no plano.
  • Uma distância positiva significa que o vértice está dentro do meio-espaço de corte (o lado que você quer manter).
  • Uma distância negativa significa que o vértice está fora do meio-espaço de corte (o lado que você quer descartar).

Consulte o snippet a seguir, a entrada do chromestatus e o problema 358408571.

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("clip-distances")) {
  throw new Error("Clip distances support is not available");
}
// Explicitly request clip distances support.
const device = await adapter.requestDevice({
  requiredFeatures: ["clip-distances"],
});

const vertexShaderModule = device.createShaderModule({ code: `
  enable clip_distances;

  struct VertexOut {
    @builtin(clip_distances) my_clip_distances : array<f32, 1>,
    @builtin(position) my_position : vec4f,
  }
  @vertex fn main() -> VertexOut {
    var output : VertexOut;
    output.my_clip_distances[0] = 1;
    output.my_position = vec4f(0, 0, 0, 1);
    return output;
  }
`,
});

// Send the appropriate commands to the GPU...

GPUCanvasContext getConfiguration()

Depois que GPUCanvasContext configure() é chamado com um dicionário de configuração, o método GPUCanvasContext getConfiguration() permite verificar a configuração do contexto da tela. Isso inclui membros device, format, usage, viewFormats, colorSpace, toneMapping e alphaMode. Isso é útil para tarefas como verificar se o navegador é compatível com o canvas HDR, conforme mostrado no exemplo de partículas (HDR). Consulte o snippet a seguir, a entrada do chromestatus e o problema 370109829.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

// Configure the canvas for HDR.
context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

const configuration = context.getConfiguration();
if (configuration.toneMapping.mode === "extended") {
  // The browser supports HDR canvas.
  // Warning! The user still needs a HDR display to enjoy HDR content.
}

Primitivas de ponto e linha não podem ter ajuste de profundidade

Conforme anunciado anteriormente, a especificação WebGPU agora considera um erro de validação definir depthBias, depthBiasSlopeScale e depthBiasClamp como um valor diferente de zero quando a topologia de um pipeline de renderização é do tipo linha ou ponto. Consulte o problema 352567424.

Funções integradas de verificação inclusiva para subgrupos

Como parte da experimentação de subgrupos, as seguintes funções integradas de subgrupo foram adicionadas na edição 361330160:

  • subgroupInclusiveAdd(value): retorna o somatório inclusivo da verificação de todas as invocações values ativas no subgrupo.
  • subgroupInclusiveMul(value): retorna a multiplicação inclusiva da verificação de todas as invocações ativas values no subgrupo.

Suporte experimental para multi-draw indirect

O recurso de GPU de desenho indireto múltiplo permite emitir várias chamadas de desenho com um único comando de GPU. Isso é útil principalmente em situações em que um grande número de objetos precisa ser renderizado, como sistemas de partículas, instanciação e cenas grandes. Os métodos drawIndirect() e drawIndexedIndirect() GPURenderPassEncoder só podem emitir uma única chamada de desenho por vez de uma determinada região de um buffer de GPU.

Até que esse recurso experimental seja padronizado, ative a flag "Suporte a WebGPU não seguro" em chrome://flags/#enable-unsafe-webgpu para disponibilizá-lo no Chrome.

Com o recurso de GPU não padrão "chromium-experimental-multi-draw-indirect" disponível em um GPUAdapter, solicite um GPUDevice com esse recurso. Em seguida, crie um GPUBuffer com o uso GPUBufferUsage.INDIRECT para armazenar as chamadas de desenho. Você pode usá-lo mais tarde nos novos métodos multiDrawIndirect() e multiDrawIndexedIndirect() GPURenderPassEncoder para emitir chamadas de desenho em uma transmissão de renderização. Consulte o snippet a seguir e o problema 356461286.

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("chromium-experimental-multi-draw-indirect")) {
  throw new Error("Experimental multi-draw indirect support is not available");
}
// Explicitly request experimental multi-draw indirect support.
const device = await adapter.requestDevice({
  requiredFeatures: ["chromium-experimental-multi-draw-indirect"],
});

// Draw call have vertexCount, instanceCount, firstVertex, and firstInstance parameters.
const drawData = new Uint32Array([
  3, 1, 0, 0, // First draw call
  3, 1, 3, 0, // Second draw call
]);
// Create a buffer to store the draw calls.
const drawBuffer = device.createBuffer({
  size: drawData.byteLength,
  usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(drawBuffer, 0, drawData);

// Create a render pipeline, a vertex buffer, and a render pass encoder...

// Inside a render pass, issue the draw calls.
myPassEncoder.setPipeline(myPipeline);
myPassEncoder.setVertexBuffer(0, myVertexBuffer);
myPassEncoder.multiDrawIndirect(drawBuffer, /*offset=*/ 0, /*maxDrawCount=*/ 2);
myPassEncoder.end();

Opção de compilação do módulo de sombreador "strict math"

Uma opção booleana para desenvolvedores strictMath foi adicionada ao GPUShaderModuleDescriptor para permitir que você ative ou desative a matemática estrita durante a compilação do módulo de shader. Ele está disponível na flag "Recursos para desenvolvedores do WebGPU" em chrome://flags/#enable-webgpu-developer-features, o que significa que é um recurso destinado apenas ao uso durante o desenvolvimento. Consulte o problema 42241455.

No momento, essa opção é compatível com Metal e Direct3D. Quando a matemática estrita está desativada, o compilador pode otimizar seus shaders das seguintes maneiras:

  • Ignorando a possibilidade de valores NaN e Infinity.
  • Tratando -0 como +0.
  • Substituir a divisão por uma multiplicação mais rápida pelo recíproco.
  • Reorganizar operações com base em propriedades associativas e distributivas.
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const code = `
  // Examines the bit pattern of the floating-point number to
  // determine if it represents a NaN according to the IEEE 754 standard.
  fn isNan(x : f32) -> bool {
    bool ones_exp = (bitcast<u32>(x) & 0x7f8) == 0x7f8;
    bool non_zero_sig = (bitcast<u32>(x) & 0x7ffff) != 0;
    return ones_exp && non_zero_sig;
  }
  // ...
`;

// Enable strict math during shader compilation.
const shaderModule = device.createShaderModule({ code, strictMath: true });

Remover requestAdapterInfo() do GPUAdapter

O método assíncrono requestAdapterInfo() do GPUAdapter é redundante, já que é possível receber o GPUAdapterInfo de maneira síncrona usando o atributo info do GPUAdapter. Por isso, o método requestAdapterInfo() não padrão do GPUAdapter foi removido. Consulte a intenção de remoção.

Atualizações do amanhecer

O executável tint_benchmark mede o custo de traduzir shaders de WGSL para cada linguagem de back-end. Confira a nova documentação para saber mais.

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