Neu bei WebGPU (Chrome 121)

François Beaufort
François Beaufort
GitHub

Unterstützung von WebGPU unter Android

Das Chrome-Team freut sich, Ihnen mitteilen zu können, dass WebGPU jetzt in Chrome 121 auf Geräten mit Android 12 und höher und mit Qualcomm- und ARM-GPUs standardmäßig aktiviert ist.

Der Support wird nach und nach auf weitere Android-Geräte ausgeweitet, einschließlich Geräten mit Android 11. Diese Erweiterung hängt von weiteren Tests und Optimierungen ab, damit sie bei einer breiteren Palette von Hardwarekonfigurationen reibungslos funktionieren. Siehe Problem „chromium:1497815“.

Screenshot des WebGPU-Beispiels, das in Chrome für Android ausgeführt wird.
WebGPU-Beispiel in Chrome für Android.

Für die Shader-Kompilierung unter Windows DXC statt FXC verwenden

Chrome nutzt jetzt die Leistungsfähigkeit von DXC (DirectX Compiler), um Shader auf Windows D3D12-Computern mit SM6+-Grafikhardware zu kompilieren. Früher setzte WebGPU für die Shader-Kompilierung unter Windows auf FXC (FX Compiler). FXC funktionierte zwar, aber es fehlen Funktionen und Leistungsoptimierungen, die in DXC möglich waren.

Erste Tests zeigen bei Verwendung von DXC im Vergleich zu FXC einen durchschnittlichen Anstieg der Kompilierungsgeschwindigkeit des Compute-Shaders um 20 %.

Zeitstempelabfragen in Computing- und Renderingdurchläufen

Durch Zeitstempelabfragen können WebGPU-Anwendungen bis auf die Nanosekunde genau messen, wie viel Zeit ihre GPU-Befehle für die Ausführung von Rechen- und Renderingdurchläufen benötigen. Sie werden häufig verwendet, um Einblicke in die Leistung und das Verhalten von GPU-Arbeitslasten zu gewinnen.

Wenn die Funktion „"timestamp-query"“ in einem GPUAdapter verfügbar ist, hast du jetzt folgende Möglichkeiten:

  • Fordern Sie ein GPUDevice mit der Funktion "timestamp-query" an.
  • Erstellen Sie eine GPUQuerySet vom Typ "timestamp".
  • Verwenden Sie GPUComputePassDescriptor.timestampWrites und GPURenderPassDescriptor.timestampWrites, um zu definieren, wo Zeitstempelwerte in GPUQuerySet geschrieben werden sollen.
  • Zeitstempelwerte werden mithilfe von resolveQuerySet() in eine GPUBuffer aufgelöst.
  • Lesen Sie Zeitstempelwerte zurück, indem Sie die Ergebnisse aus dem GPUBuffer in die CPU kopieren.
  • Decodieren Sie Zeitstempelwerte als BigInt64Array.

Im folgenden Beispiel sehen Sie die Ausgabe von 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();

Aufgrund von Bedenken bezüglich Zeitüberschreitungen werden Zeitstempelabfragen mit einer Auflösung von 100 Mikrosekunden quantisiert, was einen guten Kompromiss zwischen Präzision und Sicherheit bietet. Im Chrome-Browser können Sie die Zeitstempelquantisierung deaktivieren, indem Sie das „WebGPU Developer Features“Flag chrome://flags/#enable-webgpu-developer-features während der Entwicklung Ihrer App aktivieren. Weitere Informationen finden Sie unter Quantisierung von Zeitstempelabfragen.

Da GPUs den Zeitstempelzähler gelegentlich zurücksetzen können, was zu unerwarteten Werten wie negativen Deltas zwischen Zeitstempeln führen kann, sollten Sie sich die Git-Diff-Änderungen ansehen, die Unterstützung für Zeitstempelabfragen im folgenden Compute Boids-Beispiel bieten.

Screenshot des Compute Boids-Beispiels mit Zeitstempelabfrage.
Compute Boids-Beispiel mit Zeitstempelabfrage.

Standardeinstiegspunkte für Shader-Module

Für eine bessere Entwicklung können Sie jetzt beim Erstellen einer Computing- oder Rendering-Pipeline entryPoint Ihres Shader-Moduls weglassen. Wenn im Shader-Code kein eindeutiger Einstiegspunkt für die Shader-Phase gefunden wird, wird ein GPUValidationError ausgelöst. Sehen Sie sich das folgende Beispiel und issue dawn:2254 an.

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 }] },
});

Display-p3 als GPUExternalTexture-Farbraum unterstützen

Du kannst jetzt den Zielfarbraum "display-p3" festlegen, wenn du mit importExternalTexture() eine GPUExternalTexture aus HDR-Videos importierst. Sehen Sie sich an, wie WebGPU Farbräume verarbeitet. Sehen Sie sich das folgende Beispiel an und geben Sie chromium:1330250 aus.

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

Informationen zum Arbeitsspeicher-Heaps

Damit Sie Speichereinschränkungen vermeiden können, wenn Sie während der Entwicklung Ihrer App große Mengen zuweisen, zeigt requestAdapterInfo() jetzt Informationen zu memoryHeaps an, z. B. die Größe und den Typ der im Adapter verfügbaren Arbeitsspeicher-Heaps. Auf diese experimentelle Funktion kann nur zugegriffen werden, wenn das Flag „WebGPU Developer Features“ unter chrome://flags/#enable-webgpu-developer-features aktiviert ist. Sehen Sie sich das folgende Beispiel und issue dawn:2249 an.

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 von https://webgpureport.org mit Speicher-Heaps in Adapterinformationen
Siehe Adapterinfo-Arbeitsspeicher-Heaps auf https://webgpureport.org.

Updates zum Morgengrauen

Die Methoden HasWGSLLanguageFeature und EnumerateWGSLLanguageFeatures in wgpu::Instance wurden zur Verarbeitung von WGSL-Sprachfunktionen hinzugefügt. Siehe Problem dawn:2260.

Mit dem nicht standardmäßigen wgpu::Feature::BufferMapExtendedUsages-Feature können Sie einen GPU-Puffer mit wgpu::BufferUsage::MapRead oder wgpu::BufferUsage::MapWrite und einem beliebigen anderen wgpu::BufferUsage erstellen. Im folgenden Beispiel und Problem dawn:2204 können Sie nachlesen.

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);

Folgende Funktionen wurden dokumentiert: ANGLE Texture Sharing, D3D11 multithread geschützt, Implizite Gerätesynchronisierung, Norm16 Texturformate, Zeitstempelabfrage Inside Passes, Pixel Local Storage, Shader Features und Multiplanare Formate.

Das Chrome-Team hat ein offizielles GitHub-Repository für Dawn erstellt.

Dies sind nur einige der wichtigsten Punkte. Hier finden Sie eine vollständige Liste der Commits.

Neu bei WebGPU

Hier finden Sie eine Liste aller Inhalte, die in der Reihe What's New in WebGPU behandelt wurden.

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