Novità di WebGPU (Chrome 121)

François Beaufort
François Beaufort
GitHub

Supporta WebGPU su Android

Il team di Chrome è lieto di annunciare che WebGPU è ora abilitata per impostazione predefinita in Chrome 121 sui dispositivi con Android 12 e versioni successive con GPU Qualcomm e ARM.

Il supporto verrà esteso gradualmente per includere una gamma più ampia di dispositivi Android, inclusi quelli con Android 11 nel prossimo futuro. Questo ampliamento dipenderà da ulteriori test e ottimizzazioni per garantire un'esperienza uniforme in una gamma più ampia di configurazioni hardware. Vedi il problema chromium:1497815.

Screenshot di esempio di WebGPU in esecuzione su Chrome per Android.
Esempio di WebGPU in esecuzione su Chrome per Android.

Usa DXC al posto di FXC per la compilazione dello shaker su Windows

Chrome ora utilizza la potenza di DXC (DirectX Compiler) per compilare Shaper su macchine Windows D3D12 dotate di hardware grafico SM6+. In precedenza, WebGPU faceva affidamento su FXC (FX Compiler) per la compilazione dello shaker su Windows. Sebbene funzionale, FXC non disponeva dell'insieme di funzionalità e delle ottimizzazioni delle prestazioni presenti in DXC.

I test iniziali mostrano un aumento medio del 20% della velocità di compilazione del computing shaker quando si utilizza DXC rispetto a FXC.

Query con timestamp nei passaggi di computing e rendering

Le query con timestamp consentono alle applicazioni WebGPU di misurare con precisione (fino al nanosecondo) il tempo impiegato dai comandi GPU per eseguire le operazioni di calcolo e rendering. Sono molto utilizzati per ottenere insight sulle prestazioni e sul comportamento dei carichi di lavoro GPU.

Quando la funzionalità "timestamp-query" è disponibile in un GPUAdapter, ora puoi:

Vedi l'esempio seguente e riscontri il problema 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();

A causa dei problemi di attacco a tempo, le query timestamp vengono quantificate con una risoluzione di 100 microsecondi, il che offre un buon compromesso tra precisione e sicurezza. Nel browser Chrome, puoi disattivare la quantizzazione dei timestamp attivando le "Funzionalità per sviluppatori WebGPU" flag all'indirizzo chrome://flags/#enable-webgpu-developer-features durante lo sviluppo dell'app. Per saperne di più, consulta Quantizzazione delle query timestamp.

Poiché di tanto in tanto le GPU possono reimpostare il contatore dei timestamp, il che può generare valori imprevisti, come delta negativi tra i timestamp, ti consiglio di controllare le modifiche delle differenze git che aggiungono il supporto delle query timestamp al seguente esempio di boid Compute.

Screenshot dell'esempio di Compute Boids con query sul timestamp.
Esempio di Compute Boids con una query timestamp.

Punti di ingresso predefiniti ai moduli Shar

Per migliorare l'esperienza degli sviluppatori, ora puoi omettere entryPoint del modulo shaker durante la creazione di una pipeline di calcolo o di rendering. Se non viene trovato alcun punto di ingresso univoco per la fase dello shaker nel codice dello shaker, viene attivato un errore GPUValidationError. Vedi l'esempio seguente e 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 }] },
});

Supporta display-p3 come spazio colore GPUExternalTexture

Ora puoi impostare "display-p3" spazio colore di destinazione quando importi una GPUExternalTexture da video HDR con importExternalTexture(). Scopri in che modo WebGPU gestisce gli spazi colore. Guarda l'esempio che segue e verifica il problema con chromium:1330250.

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

Informazioni sugli heap di memoria

Per aiutarti a prevedere le limitazioni della memoria durante l'allocazione di grandi quantità durante lo sviluppo dell'app, requestAdapterInfo() ora mostra le informazioni di memoryHeaps, come le dimensioni e il tipo di heap di memoria disponibili nell'adattatore. Questa funzionalità sperimentale è accessibile soltanto quando la sezione "Funzionalità per sviluppatori di WebGPU" flag in chrome://flags/#enable-webgpu-developer-features sia abilitato. Vedi l'esempio seguente e issue 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)   { /* ... */ }
}
Screenshot di https://webgpureport.org che mostra heap di memoria nelle informazioni sugli adattatori.
heap di memoria delle informazioni dell'adattatore mostrati su https://webgpureport.org.

Aggiornamenti all'alba

I metodi HasWGSLLanguageFeature e EnumerateWGSLLanguageFeatures su wgpu::Instance sono stati aggiunti per gestire le funzionalità del linguaggio WGSL. Vedi il problema dawn:2260.

La funzionalità wgpu::Feature::BufferMapExtendedUsages non standard consente di creare un buffer GPU con wgpu::BufferUsage::MapRead o wgpu::BufferUsage::MapWrite e qualsiasi altro wgpu::BufferUsage. Vedi l'esempio seguente e riscontri il 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);

Sono state documentate le seguenti funzionalità: condivisione delle texture ANGLE, protetta multi-thread D3D11, sincronizzazione implicita dei dispositivi, formati di texture Norm16, query Inside Passes con timestamp, spazio di archiviazione locale di Pixel, funzionalità di Shader e formati multiplanari.

Il team di Chrome ha creato un repository GitHub ufficiale per Dawn.

Descrive solo alcuni dei punti salienti. Consulta l'elenco completo dei commit.

Novità di WebGPU

Un elenco di tutti gli argomenti trattati nella serie Novità di WebGPU.

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