Novedades de WebGPU (Chrome 121)

François Beaufort
François Beaufort
GitHub

Compatibilidad con WebGPU en Android

El equipo de Chrome se complace en anunciar que WebGPU ahora está habilitado de forma predeterminada en Chrome 121 en dispositivos que ejecutan Android 12 y versiones posteriores con la tecnología de GPU Qualcomm y ARM.

La compatibilidad se expandirá gradualmente para abarcar una gama más amplia de dispositivos Android, incluidos los que se ejecutan en Android 11 próximamente. Esta expansión dependerá de más pruebas y optimizaciones para garantizar una experiencia fluida en una gama más amplia de configuraciones de hardware. Consulta el problema chromium:1497815.

Captura de pantalla de la muestra de WebGPU que se ejecuta en Chrome para Android
Ejemplo de WebGPU que se ejecuta en Chrome para Android.

Usa DXC en lugar de FXC para la compilación de sombreadores en Windows

Chrome ahora usa el poder de DXC (compilador de DirectX) para compilar sombreadores en equipos Windows D3D12 equipados con hardware de gráficos SM6+. Anteriormente, WebGPU dependía de FXC (FX Compiler) para la compilación de sombreadores en Windows. Si bien FXC funcionaba, no contaba con el conjunto de funciones ni las optimizaciones de rendimiento presentes en DXC.

Las pruebas iniciales muestran un aumento promedio del 20% en la velocidad de compilación de sombreadores de cómputos cuando se usa DXC en comparación con FXC.

Consultas con marcas de tiempo en pases de procesamiento y renderización

Las consultas de marca de tiempo permiten que las aplicaciones de WebGPU midan con precisión (hasta nanosegundos) cuánto tiempo tardan sus comandos de GPU en ejecutar pases de cómputos y renderización. Se usan en gran medida para obtener estadísticas sobre el rendimiento y el comportamiento de las cargas de trabajo de GPU.

Cuando la función "timestamp-query" está disponible en un objeto GPUAdapter, ahora puedes hacer lo siguiente:

  • Solicita un elemento GPUDevice con la función "timestamp-query".
  • Crea un GPUQuerySet de tipo "timestamp".
  • Usa GPUComputePassDescriptor.timestampWrites y GPURenderPassDescriptor.timestampWrites para definir dónde escribir los valores de marca de tiempo en GPUQuerySet.
  • Resuelve los valores de marca de tiempo en un GPUBuffer con resolveQuerySet().
  • Para volver a leer los valores de marca de tiempo, copia los resultados de GPUBuffer en la CPU.
  • Decodifica valores de marca de tiempo como BigInt64Array.

Consulta el siguiente ejemplo y emite el error 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();

Debido a preocupaciones por ataques por tiempo, las consultas de marca de tiempo se cuantizan con una resolución de 100 microsegundos, lo que proporciona un buen compromiso entre la precisión y la seguridad. En el navegador Chrome, puedes inhabilitar la cuantización de la marca de tiempo habilitando la marca "Funciones del desarrollador de WebGPU" en chrome://flags/#enable-webgpu-developer-features durante el desarrollo de la app. Consulta Cuantización de consultas de marcas de tiempo para obtener más información.

Como las GPU pueden restablecer el contador de marca de tiempo ocasionalmente, lo que puede generar valores inesperados, como deltas negativos entre las marcas de tiempo, te recomendamos que consultes los cambios en git diff que agregan compatibilidad con consultas de marca de tiempo a la siguiente muestra de Compute Boids.

Captura de pantalla de la muestra de Compute Boids con una consulta de marca de tiempo.
Ejemplo de Compute Boids con una consulta de marca de tiempo.

Puntos de entrada predeterminados a los módulos de sombreador

Para mejorar la experiencia del desarrollador, ahora puedes omitir el entryPoint del módulo de sombreador cuando creas una canalización de cómputos o renderización. Si no se encuentra ningún punto de entrada único para la etapa del sombreador en el código, se activará un GPUValidationError. Consulta el siguiente ejemplo y el error 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 }] },
});

Compatibilidad con display-p3 como espacio de color GPUExternalTexture

Ahora puedes configurar el espacio de color de destino "display-p3" cuando importas una GPUExternalTexture desde videos HDR con importExternalTexture(). Consulta cómo WebGPU controla los espacios de color. Consulta el siguiente ejemplo y el problema chromium:1330250.

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

Información sobre los montón de memoria

Para ayudarte a anticipar las limitaciones de memoria a la hora de asignar grandes cantidades durante el desarrollo de tu app, requestAdapterInfo() ahora expone la información de memoryHeaps, como el tamaño y el tipo de montón de memoria disponibles en el adaptador. Solo se puede acceder a esta función experimental cuando está habilitada la marca "WebGPU Developer Features" en chrome://flags/#enable-webgpu-developer-features. Consulta el siguiente ejemplo y el problema 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)   { /* ... */ }
}
Captura de pantalla de https://webgpureport.org con montón de memoria en la información del adaptador.
Los montones de la memoria de información del adaptador se muestran en https://webgpureport.org.

Actualizaciones del amanecer

Se agregaron los métodos HasWGSLLanguageFeature y EnumerateWGSLLanguageFeatures en wgpu::Instance para controlar las funciones del lenguaje WGSL. Consulta el problema dawn:2260.

La función no estándar wgpu::Feature::BufferMapExtendedUsages te permite crear un búfer de GPU con wgpu::BufferUsage::MapRead o wgpu::BufferUsage::MapWrite y cualquier otro wgpu::BufferUsage. Consulta el siguiente ejemplo y el 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);

Se documentaron las siguientes funciones: uso compartido de texturas de ANGLE, protección por múltiples subprocesos D3D11, sincronización implícita de dispositivos, formatos de textura Nor16, marcas de tiempo de pases internos, almacenamiento local de Pixel, funciones de sombreador y formatos multiplanares.

El equipo de Chrome creó un repositorio oficial de GitHub para Dawn.

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

Novedades de WebGPU

Una lista de todo lo que se aborda en la serie Novedades de WebGPU.

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