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

Novedades de WebGPU (Chrome 121)

François Beaufort

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 con Android 12 y versiones posteriores que funcionan con GPUs de Qualcomm y ARM.

La compatibilidad se expandirá gradualmente para abarcar una mayor variedad de dispositivos Android, incluidos los que ejecutan Android 11 en un futuro cercano. 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 la potencia de DXC (compilador de DirectX) para compilar sombreadores en máquinas D3D12 de Windows equipadas con hardware de gráficos SM6+. Anteriormente, WebGPU dependía de FXC (FX Compiler) para la compilación de sombreadores en Windows. Si bien era funcional, FXC carecía del conjunto de funciones y las optimizaciones de rendimiento presentes en DXC.

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

Consultas de marcas de tiempo en pases de renderización y cómputos

Las consultas de marcas de tiempo permiten que las aplicaciones de WebGPU midan con precisión (hasta el nanosegundo) cuánto tiempo tardan sus comandos de GPU en ejecutar pases de procesamiento y cálculo. Se usan mucho 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 GPUAdapter, ahora puedes hacer lo siguiente:

Solicita un GPUDevice con la función "timestamp-query".
Crea un GPUQuerySet del 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().
Copia los resultados de la GPUBuffer a la CPU para leer los valores de la marca de tiempo.
Decodifica los valores de marca de tiempo como un BigInt64Array.

Consulta el siguiente ejemplo y emite 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 las preocupaciones sobre los ataques de sincronización, las consultas de marcas de tiempo se cuantifican con una resolución de 100 microsegundos, lo que proporciona un buen equilibrio entre precisión y seguridad. En el navegador Chrome, puedes inhabilitar la cuantificación de marcas de tiempo habilitando la marca "WebGPU Developer Features" en chrome://flags/#enable-webgpu-developer-features durante el desarrollo de tu app. Consulta Cuantificación de consultas de marcas de tiempo para obtener más información.

Como las GPUs pueden restablecer el contador de marcas de tiempo ocasionalmente, lo que puede generar valores inesperados, como deltas negativos entre las marcas de tiempo, te recomiendo que consultes los cambios de git diff que agregan compatibilidad con las consultas de marcas de tiempo al siguiente ejemplo de Compute Boids.

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

Puntos de entrada predeterminados a los módulos de sombreadores

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

Se admite display-p3 como espacio de color GPUExternalTexture

Ahora puedes establecer el espacio de color de destino "display-p3" cuando importas un 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 de montones de memoria

Para ayudarte a anticipar las limitaciones de memoria cuando asignas grandes cantidades durante el desarrollo de tu app, requestAdapterInfo() ahora expone información de memoryHeaps, como el tamaño y el tipo de montones de memoria disponibles en el adaptador. Solo se puede acceder a esta función experimental cuando se habilita 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 en la que se muestran los montones de memoria en la información del adaptador. — Se muestran los montones de memoria de la información del adaptador en https://webgpureport.org.

Actualizaciones de Dawn

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 wgpu::Feature::BufferMapExtendedUsages no estándar 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: ANGLE Texture Sharing, D3D11 multithread protected, Implicit Device Synchronization, Norm16 texture formats, Timestamp Query Inside Passes, Pixel Local Storage, Shader Features y Multi Planar Formats.

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

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