Novedades de WebGPU (Chrome 131)

François Beaufort
François Beaufort
GitHub

Distancias de corte en WGSL

Las distancias de recorte te permiten restringir el volumen de recorte de las primitivas con semiespacios definidos por el usuario en la salida de la etapa de vértices. Definir tus propios planos de recorte te brinda un mayor control sobre lo que es visible en tus escenas de WebGPU. Esta técnica es particularmente útil para aplicaciones como el software de CAD, en el que el control preciso de la visualización es fundamental.

Cuando la función "clip-distances" esté disponible en un GPUAdapter, solicita un GPUDevice con esta función para obtener compatibilidad con las distancias de recorte en WGSL y habilita explícitamente esta extensión en tu código WGSL con enable clip_distances;. Una vez habilitado, puedes usar el array integrado clip_distances en tu sombreador de vértices. Este array contiene distancias a un plano de recorte definido por el usuario:

  • Una distancia de recorte de 0 significa que el vértice se encuentra en el plano.
  • Una distancia positiva significa que el vértice está dentro del semiespacio del clip (el lado que deseas conservar).
  • Una distancia negativa significa que el vértice está fuera del semiespacio de recorte (el lado que deseas descartar).

Consulta el siguiente fragmento, la entrada de chromestatus y el 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()

Una vez que se llamó a GPUCanvasContext configure() con un diccionario de configuración, el método GPUCanvasContext getConfiguration() te permite verificar la configuración del contexto del lienzo. Incluye los miembros device, format, usage, viewFormats, colorSpace, toneMapping y alphaMode. Esto es útil para tareas como verificar si el navegador admite lienzo HDR, como se muestra en el ejemplo de partículas (HDR). Consulta el siguiente fragmento, la entrada de chromestatus y el 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.
}

Las primitivas de punto y línea no deben tener sesgo de profundidad.

Como se anunció anteriormente, la especificación de WebGPU ahora considera un error de validación establecer depthBias, depthBiasSlopeScale y depthBiasClamp en un valor distinto de cero cuando la topología de una canalización de renderización es un tipo de línea o punto. Consulta el problema 352567424.

Funciones integradas de análisis inclusivo para subgrupos

Como parte de la experimentación de subgrupos, se agregaron las siguientes funciones integradas de subgrupos en el problema 361330160:

  • subgroupInclusiveAdd(value): Muestra la suma del análisis inclusivo de todas las invocaciones activas value en el subgrupo.
  • subgroupInclusiveMul(value): Muestra la multiplicación de análisis inclusiva de todas las invocaciones activas value en el subgrupo.

Compatibilidad experimental con la renderización indirecta múltiple

La función de GPU indirecta de varias operaciones de dibujo te permite emitir varias llamadas de dibujo con un solo comando de GPU. Esto es particularmente útil en situaciones en las que se debe renderizar una gran cantidad de objetos, como sistemas de partículas, creación de instancias y escenas grandes. Los métodos GPURenderPassEncoder drawIndirect() y drawIndexedIndirect() solo pueden emitir una sola llamada de dibujo a la vez desde una región determinada de un búfer de GPU.

Hasta que esta función experimental se estandarice, habilita la marca "Compatibilidad con WebGPU no segura" en chrome://flags/#enable-unsafe-webgpu para que esté disponible en Chrome.

Con la función de GPU no estándar "chromium-experimental-multi-draw-indirect" disponible en un GPUAdapter, solicita un GPUDevice con esta función. Luego, crea un GPUBuffer con el uso de GPUBufferUsage.INDIRECT para almacenar las llamadas de dibujo. Puedes usarlo más adelante en los nuevos métodos GPURenderPassEncoder multiDrawIndirect() y multiDrawIndexedIndirect() para emitir llamadas de dibujo dentro de un pase de renderización. Consulta el siguiente fragmento y el 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();

Opción de compilación del módulo de sombreador de matemáticas estrictas

Se agregó una opción para desarrolladores booleana strictMath a GPUShaderModuleDescriptor para que puedas habilitar o inhabilitar la matemática estricta durante la compilación del módulo sombreador. Está disponible detrás de la marca "WebGPU Developer Features" en chrome://flags/#enable-webgpu-developer-features, lo que significa que es una función diseñada solo para usarse durante el desarrollo. Consulta el problema 42241455.

Actualmente, esta opción es compatible con Metal y Direct3D. Cuando se inhabilita la matemática estricta, el compilador puede optimizar tus sombreadores de las siguientes maneras:

  • Ignora la posibilidad de valores NaN e Infinity.
  • Tratar -0 como +0
  • Reemplaza la división por una multiplicación más rápida por el recíproco.
  • Reordenar operaciones en función de las propiedades asociativas y 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 });

Se quitó requestAdapterInfo() de GPUAdapter.

El método asíncrono requestAdapterInfo() de GPUAdapter es redundante, ya que ya puedes obtener GPUAdapterInfo de forma síncrona con el atributo info de GPUAdapter. Por lo tanto, se quitó el método requestAdapterInfo() de GPUAdapter no estándar. Consulta el intención de quitar.

Actualizaciones de Dawn

El ejecutable tint_benchmark mide el costo de traducir sombreadores de WGSL a cada idioma de backend. Consulta la nueva documentación para obtener más información.

Esto solo abarca algunos de los aspectos más destacados. Consulta la lista exhaustiva de confirmaciones.

Novedades de WebGPU

Una lista de todo lo que se analizó en la serie Novedades de 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