Se usó la API de Cloud Translation para traducir esta página.

Novedades de WebGPU (Chrome 131)

François Beaufort

Distancias de recorte en WGSL

Las distancias de recorte te permiten restringir el volumen de recorte de las primitivas con semiespacios definidos por el usuario en el resultado de la etapa de vértices. Definir tus propios planos de recorte te brinda mayor control sobre lo que se ve en tus escenas de WebGPU. Esta técnica es particularmente útil para aplicaciones como el software de CAD, en el que el control preciso sobre 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 las 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 de recorte (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 getConfiguration() de GPUCanvasContext te permite verificar la configuración del contexto del lienzo. Incluye a los miembros device, format, usage, viewFormats, colorSpace, toneMapping y alphaMode. Esto es útil para tareas como verificar si el navegador admite el 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 puntos y líneas no deben tener sesgo de profundidad

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

Funciones integradas de análisis inclusivo para subgrupos

Como parte de la experimentación con 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 values en el subgrupo.
subgroupInclusiveMul(value): Devuelve la multiplicación del análisis inclusivo de todas las invocaciones activas values en el subgrupo.

Compatibilidad experimental con multi-draw indirect

La función de GPU de dibujo indirecto múltiple 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, instancias y escenas grandes. Los métodos drawIndirect() y drawIndexedIndirect() de GPURenderPassEncoder 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 función experimental "Unsafe WebGPU Support" 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 multiDrawIndirect() y multiDrawIndexedIndirect() de GPURenderPassEncoder 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 con operaciones matemáticas estrictas

Se agregó una opción para desarrolladores strictMath booleana a GPUShaderModuleDescriptor para permitirte habilitar o inhabilitar las operaciones matemáticas estrictas durante la compilación del módulo de 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 la opción de matemáticas estrictas está inhabilitada, el compilador puede optimizar tus sombreadores de las siguientes maneras:

Ignora la posibilidad de valores NaN e Infinity.
Trata -0 como +0.
Reemplaza la división por una multiplicación más rápida por el recíproco.
Reorganizar las operaciones según 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() no estándar de GPUAdapter. Consulta la intención de quitar.

Actualizaciones de Dawn

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

Esto solo abarca algunos de los aspectos destacados clave. Consulta la lista exhaustiva de confirmaciones.