Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di WebGPU (Chrome 121)

François Beaufort

Supporto di WebGPU su Android

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

Il supporto verrà gradualmente esteso a una gamma più ampia di dispositivi Android, inclusi quelli con Android 11, in un futuro non lontano. Questa espansione dipenderà da ulteriori test e ottimizzazioni per garantire un'esperienza fluida su una gamma più ampia di configurazioni hardware. Vedi issue chromium:1497815.

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

Utilizzare DXC anziché FXC per la compilazione degli shader su Windows

Chrome ora utilizza la potenza di DXC (DirectX Compiler) per compilare gli shader sulle macchine Windows D3D12 dotate di hardware grafico SM6+. In precedenza, WebGPU si basava su FXC (FX Compiler) per la compilazione degli shader su Windows. Sebbene funzionale, FXC non disponeva del set di funzionalità e delle ottimizzazioni delle prestazioni presenti in DXC.

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

Query sui timestamp nei passaggi di calcolo e rendering

Le query con timestamp consentono alle applicazioni WebGPU di misurare con precisione (fino al nanosecondo) il tempo necessario ai comandi della GPU per eseguire i passaggi di calcolo e rendering. Vengono utilizzate molto per ottenere informazioni sul rendimento e sul comportamento dei carichi di lavoro della GPU.

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

Richiedi un GPUDevice con la funzionalità "timestamp-query".
Crea un GPUQuerySet di tipo "timestamp".
Utilizza GPUComputePassDescriptor.timestampWrites e GPURenderPassDescriptor.timestampWrites per definire dove scrivere i valori timestamp in GPUQuerySet.
Risolvi i valori timestamp in un GPUBuffer con resolveQuerySet().
Leggi i valori del timestamp copiando i risultati da GPUBuffer alla CPU.
Decodifica i valori timestamp come BigInt64Array.

Vedi l'esempio e 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 di problemi di attacco temporale, le query sui timestamp vengono quantizzate 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 il flag "Funzionalità per sviluppatori WebGPU" all'indirizzo chrome://flags/#enable-webgpu-developer-features durante lo sviluppo dell'app. Per saperne di più, consulta Quantizzazione delle query sui timestamp.

Poiché le GPU potrebbero reimpostare occasionalmente il contatore del timestamp, il che può comportare valori imprevisti come delta negativi tra i timestamp, ti consiglio di dare un'occhiata alle modifiche di git diff che aggiungono il supporto delle query dei timestamp al seguente esempio Compute Boids.

Screenshot dell'esempio Compute Boids con query del timestamp. — Esempio di calcolo di Boids con query timestamp.

Punti di ingresso predefiniti ai moduli shader

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

Supporta display-p3 come spazio colore GPUExternalTexture

Ora puoi impostare lo spazio colore di destinazione "display-p3" quando importi una GPUExternalTexture da video HDR con importExternalTexture(). Scopri come WebGPU gestisce gli spazi colore. Vedi l'esempio e il problema 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 ad anticipare le limitazioni di memoria quando allochi grandi quantità durante lo sviluppo della tua app, requestAdapterInfo() ora espone informazioni su memoryHeaps, come le dimensioni e il tipo di heap di memoria disponibili sull'adattatore. Questa funzionalità sperimentale è accessibile solo quando è attivato il flag "Funzionalità per sviluppatori WebGPU" all'indirizzo chrome://flags/#enable-webgpu-developer-features. Vedi l'esempio seguente e il 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)   { /* ... */ }
}

Screenshot di https://webgpureport.org che mostra gli heap di memoria nelle informazioni sull'adattatore. — Heap di memoria delle informazioni sull'adattatore visualizzati 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 ti consente di creare un buffer GPU con wgpu::BufferUsage::MapRead o wgpu::BufferUsage::MapWrite e qualsiasi altro wgpu::BufferUsage. Vedi l'esempio e il problema dawn:2204 di seguito.

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, D3D11 multithread protected, Sincronizzazione implicita dei dispositivi, Formati texture Norm16, Query timestamp all'interno dei passaggi, Archiviazione locale dei pixel, Funzionalità shader e Formati multiplanari.

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

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