Novedades de WebGPU (Chrome 137)

François Beaufort
François Beaufort
GitHub

Publicado el 26 de mayo de 2025

Usa la vista de textura para la vinculación de externalTexture

Ahora se permite usar una GPUTextureView compatible (2D, un solo subrecurso) en lugar de una vinculación de GPUExternalTexture cuando se crea un GPUBindGroup.

Esto simplifica la lógica del sombreador en las canalizaciones de efectos de video en las que se deben controlar GPUExternalTexture (para el video fuente) y GPUTextureView (para el procesamiento intermedio). También reduce la necesidad de compilar sombreadores de forma dinámica según de dónde provenga la textura. Consulta Intent to Ship: WebGPU: GPUTextureView for externalTexture binding.

const texture = myDevice.createTexture({
  size: [42, 42],
  format: navigator.gpu.getPreferredCanvasFormat(),
  usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
});

const code = `
@group(0) @binding(0) var texture : texture_external;
@group(0) @binding(1) var<storage, read_write> buffer: vec2u;
    
@compute @workgroup_size(1) fn main() {
  buffer = textureDimensions(texture);
}`;

const pipeline = myDevice.createComputePipeline({
  layout: "auto",
  compute: { module: myDevice.createShaderModule({ code }) },
});

const bindGroup = myDevice.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [
    { binding: 0, resource: texture.createView() }, // Use texture view for an externalTexture binding
    { binding: 1, resource: { buffer: myBuffer } },
  ],
});

Los búferes se copian sin especificar compensaciones ni tamaño

Una nueva sobrecarga del método GPUCommandEncoder permite a los desarrolladores omitir los parámetros de compensaciones y tamaño cuando usan copyBufferToBuffer() para simplificar la copia de búferes completos. Consulta Intent to Ship: WebGPU: copyBufferToBuffer overload.

const size = 42;
const srcBuffer = myDevice.createBuffer({
  size,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
});
const dstBuffer = myDevice.createBuffer({
  size,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});

// Copy entire buffer.
myCommandEncoder.copyBufferToBuffer(srcBuffer, dstBuffer);

// This is the same as the following.
// myCommandEncoder.copyBufferToBuffer(srcBuffer, 0, dstBuffer, 0, size);

workgroupUniformLoad de WGSL con puntero a atómico

Se agregó una nueva sobrecarga workgroupUniformLoad(ptr) en WGSL para la comodidad del desarrollador. Carga de forma atómica el valor al que apunta ptr y lo muestra a todas las invocaciones en el grupo de trabajo, donde ptr es un puntero a atómico dentro de una variable de grupo de trabajo. Consulta el problema 408241039.

@group(0) @binding(0) var<storage, read_write> buffer : array<u32, 1>;

var<workgroup> wgvar : atomic<u32>;

@compute @workgroup_size(1, 1)
fn main(@builtin(local_invocation_index) lid: u32) {
  if (lid == 0) {
    atomicStore(&(wgvar), 42u);
  }
  buffer[lid] = workgroupUniformLoad(&wgvar);
}

Atributo powerPreference de GPUAdapterInfo

El atributo de cadena powerPreference no estándar de GPUAdapterInfo ahora está disponible cuando el usuario habilitó la marca "WebGPU Developer Features" en chrome://flags/#enable-webgpu-developer-features. Si es compatible, el valor powerPreference puede ser "low-power" o "high-performance" según el valor de GPUPowerPreference que se usó en GPURequestAdapterOptions. Consulta CL 6438860.

function checkPowerPreferenceForGpuDevice(device) {
  const powerPreference = device.adapterInfo.powerPreference;
  if (powerPreference === "high-performance") {
    // High-performance GPU detected. Enabling enhanced graphics settings.
  } else if (powerPreference === "low-power") {
    // Low-power GPU detected. Optimizing for battery life.
  }
}

Quita el atributo compatibilityMode de GPURequestAdapterOptions

Se quitó el atributo experimental GPURequestAdapterOptions compatibilityMode en favor del atributo featureLevel estandarizado que se agregó en Chrome 133. Consulta el problema 366151404.

Actualizaciones de Dawn

Los desarrolladores pueden compilar proyectos de WebGPU en lenguajes como C++, con webgpu.h para orientar a WebAssembly y plataformas específicas. "emdawnwebgpu" ("Emscripten Dawn WebGPU") de Dawn, que se lanzó recientemente, implementa el webgpu.h estandarizado más reciente a través de la API del navegador.

Emdawnwebgpu es una bifurcación (mantenida) de las vinculaciones integradas de Emscripten (ahora sin mantenimiento) (USE_WEBGPU). Todo el desarrollo nuevo se realiza en emdawnwebgpu, y las vinculaciones integradas de Emscripten se quitarán a medida que los desarrolladores hagan la transición a emdawnwebgpu. El encabezado C de emdawnwebgpu es muy similar al de Dawn, mientras que las vinculaciones integradas están significativamente desactualizadas.

Descarga emdawnwebgpu desde la página de versiones de GitHub de Dawn y lee el archivo README.md del paquete para obtener información sobre cómo usarlo. Los archivos fuente se pueden encontrar en el repositorio de Dawn.

Para obtener una guía completa, consulta la documentación actualizada de Cómo compilar una app con WebGPU.

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 abarcó en la serie Novedades de WebGPU.

Chrome 149-150

Chrome 147-148

Chrome 146

Chrome 145

Chrome 144

Chrome 143

Chrome 142

Chrome 141

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

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