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 con GPU de Qualcomm y ARM.

La compatibilidad se expandirá gradualmente para abarcar una gama más amplia de dispositivos Android, incluidos aquellos 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.

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

Chrome ahora usa la potencia de DXC (Compilador DirectX) para compilar sombreadores en máquinas con Windows D3D12 equipadas con hardware gráfico SM6+. Anteriormente, WebGPU dependía de FXC (compilador de FX) para la compilación de sombreadores en Windows. Si bien era funcional, FXC 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 del sombreador de cómputo cuando se usa DXC en comparación con FXC.

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

Las consultas de marca de tiempo permiten que las aplicaciones WebGPU midan con precisión (hasta un nanosegundo) el tiempo que tardan sus comandos de GPU en ejecutar el procesamiento y el procesamiento. 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, podrás 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 una GPUBuffer con resolveQuerySet().
• Para volver a leer los valores de la marca de tiempo, copia los resultados de GPUBuffer a la CPU.
• Decodifica los valores de marca de tiempo como BigInt64Array.

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

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

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 crees una canalización de cómputos o renderización. Si no se encuentra un punto de entrada único para la etapa del sombreador en el código del sombreador, se activará una GPUValidationError. Consulta el siguiente ejemplo y issue 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 establecer el espacio de color de destino "display-p3" cuando importas un GPUExternalTexture de 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 los 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 pilas de memoria disponibles en el adaptador. Solo se puede acceder a esta función experimental cuando está habilitada la marca “Funciones para desarrolladores de WebGPU” 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)   { /* ... */ }
}

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 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, D3D11 multiproceso protegido, Sincronización de dispositivos implícita, Formatos de textura Norm16, Consulta de marca de tiempo dentro de los pases, Almacenamiento local de píxeles, Funciones de sombreador y Formatos multiplanos.

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 exhaustiva de confirmaciones.

Novedades de WebGPU

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

Chrome 131

• Cómo recortar distancias en WGSL
• GPUCanvasContext getConfiguration()
• Las primitivas de punto y línea no deben tener sesgo de profundidad
• Funciones integradas de análisis inclusivo para subgrupos
• Compatibilidad experimental con la función indirecta de varios dibujos
• Cálculo estricto de la opción de compilación de módulos del sombreador
• Cómo quitar GPUAdapter requestAdapterInfo()
• Actualizaciones del amanecer

Chrome 130

• Combinación de fuentes dobles
• Mejoras en el tiempo de compilación del sombreador en Metal
• Baja de GPUAdapter requestAdapterInfo()
• Actualizaciones del amanecer

Chrome 129

• Compatibilidad con HDR con el modo de ajuste de tonos del lienzo
• Compatibilidad expandida con subgrupos
• Actualizaciones de Dawn

Chrome 128

• Experimenta con subgrupos
• Se dio de baja la configuración del sesgo de profundidad para líneas y puntos
• Oculta la advertencia de DevTools de error no capturado si se usa preventDefault
• WGSL interpola el muestreo primero y, luego,
• Actualizaciones de Dawn

Chrome 127

• Compatibilidad experimental con OpenGL ES en Android
• Atributo de información de GPUAdapter
• Mejoras en la interoperabilidad de WebAssembly
• Se mejoraron los errores del codificador de comandos
• Actualizaciones de Dawn

Chrome 126

• Se aumentó el límite de maxTextureArrayLayers
• Optimización de carga de búfer para el backend de Vulkan
• Mejoras en el tiempo de compilación de sombreadores
• Los búferes de comandos enviados deben ser únicos
• Actualizaciones de Dawn

Chrome 125

• Subgrupos (función en desarrollo)
• Cómo renderizar una porción de textura 3D
• Actualizaciones de Dawn

Chrome 124

• Texturas de almacenamiento de solo lectura y de lectura y escritura
• Asistencia para service workers y trabajadores compartidos
• Nuevos atributos de información del adaptador
• Correcciones de errores
• Actualizaciones del amanecer

Chrome 123

• Compatibilidad con funciones integradas de DP4a en WGSL
• Parámetros de puntero sin restricciones en WGSL
• Azúcar de sintaxis para desreferenciar compuestos en WGSL
• Estado de solo lectura independiente para los aspectos de plantilla y profundidad
• Actualizaciones del amanecer

Chrome 122

• Expande el alcance con el modo de compatibilidad (función en desarrollo)
• Aumento del límite de maxVertexAttributes
• Actualizaciones de Dawn

Chrome 121

• Compatibilidad con WebGPU en Android
• Usa DXC en lugar de FXC para la compilación de sombreadores en Windows
• Consultas de marca de tiempo en pases de renderización y procesamiento
• Puntos de entrada predeterminados a los módulos de sombreadores
• Compatibilidad con display-p3 como espacio de color GPUExternalTexture
• Información de los montones de memoria
• Actualizaciones de Dawn

Chrome 120

• Compatibilidad con valores de punto flotante de 16 bits en WGSL
• Supera los límites
• Cambios en el estado del búfer de profundidad
• Actualizaciones de la información de los adaptadores
• Cuantización de consultas de marca de tiempo
• Funciones de limpieza de primavera

Chrome 119

• Texturas de punto flotante de 32 bits filtrables
• Formato de vértices unorm10-10-10-2
• Formato de textura rgb10a2uint
• Actualizaciones de Dawn

Chrome 118

• Compatibilidad con ImageData y HTMLImageElement en copyExternalImageToTexture()
• Compatibilidad experimental con la textura de almacenamiento de lectura y escritura, y de solo lectura
• Actualizaciones de Dawn

Chrome 117

• Se anuló la configuración del búfer de vértices
• Cómo anular el grupo de vinculaciones
• Silencia los errores de la creación de canalización asíncrona cuando se pierde el dispositivo
• Actualizaciones sobre la creación de módulos de sombreadores SPIR-V
• Cómo mejorar la experiencia de los desarrolladores
• Canalizaciones de almacenamiento en caché con diseño generado automáticamente
• Actualizaciones de Dawn

Chrome 116

• Integración de WebCodecs
• Dispositivo perdido que muestra requestDevice() de GPUAdapter
• Mantén la reproducción de video fluida si se llama a importExternalTexture()
• Cumplimiento de las especificaciones
• Mejora la experiencia de los desarrolladores
• Actualizaciones de Dawn

Chrome 115

• Extensiones de lenguaje WGSL compatibles
• Compatibilidad experimental con Direct3D 11
• Obtén una GPU discreta de forma predeterminada con alimentación de CA
• Cómo mejorar la experiencia de los desarrolladores
• Actualizaciones del amanecer

Chrome 114

• Optimiza JavaScript
• getCurrentTexture() en un lienzo sin configurar arroja InvalidStateError
• Actualizaciones de WGSL
• Actualizaciones de Dawn

Chrome 113

• Cómo usar la fuente de VideoFrame de WebCodecs en importExternalTexture()