Neu bei WebGPU (Chrome 121)

François Beaufort
François Beaufort
GitHub

Unterstützung von WebGPU auf Android-Geräten

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

Die Unterstützung wird nach und nach auf weitere Android-Geräte ausgeweitet, einschließlich Geräte mit Android 11. Diese Erweiterung hängt von weiteren Tests und Optimierungen ab, um eine reibungslose Nutzung auf einer breiteren Palette von Hardwarekonfigurationen zu ermöglichen. Siehe Problem chromium:1497815.

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

DXC anstelle von FXC für die Shaderkompilierung unter Windows verwenden

Chrome nutzt jetzt DXC (DirectX Compiler), um Shader auf Windows-D3D12-Computern mit SM6+-Grafikhardware zu kompilieren. Bisher wurde für die Shaderkompilierung unter Windows FXC (FX Compiler) verwendet. FXC war zwar funktionsfähig, aber es fehlten die Funktionen und Leistungsoptimierungen von DXC.

Erste Tests zeigen eine durchschnittliche Steigerung der Compute-Shader-Kompilierungsgeschwindigkeit um 20% bei Verwendung von DXC im Vergleich zu FXC.

Zeitstempelabfragen in Compute- und Render-Tickets

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

Wenn die "timestamp-query"-Funktion in einer GPUAdapter verfügbar ist, haben Sie jetzt folgende Möglichkeiten:

  • Fordern Sie einen GPUDevice mit der Funktion "timestamp-query" an.
  • Erstellen Sie eine GPUQuerySet vom Typ "timestamp".
  • Mit GPUComputePassDescriptor.timestampWrites und GPURenderPassDescriptor.timestampWrites können Sie festlegen, wo Zeitstempelwerte in GPUQuerySet geschrieben werden.
  • Mit resolveQuerySet() können Sie Zeitstempelwerte in GPUBuffer auflösen.
  • Lesen Sie Zeitstempelwerte zurück, indem Sie die Ergebnisse aus dem GPUBuffer in die CPU kopieren.
  • Dekodieren Sie Zeitstempelwerte als BigInt64Array.

Sehen Sie sich das folgende Beispiel an und geben Sie dawn:1800 ein.

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

Aus Sicherheitsgründen werden Zeitstempelabfragen aufgrund von Timing-Angriffen mit einer Auflösung von 100 Mikrosekunden quantisiert. Dies bietet einen guten Kompromiss zwischen Genauigkeit und Sicherheit. Im Chrome-Browser können Sie die Quantisierung von Zeitstempeln deaktivieren, indem Sie während der Entwicklung Ihrer App die Flag „WebGPU Developer Features“ unter chrome://flags/#enable-webgpu-developer-features 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, empfehle ich Ihnen, sich die Git-Diff-Änderungen anzusehen, die dem folgenden Compute Boids-Beispiel die Unterstützung von Zeitstempelabfragen hinzufügen.

Screenshot des Beispiels „Compute Boids“ mit Zeitstempelabfrage
Compute Boids-Beispiel mit Zeitstempelabfrage

Standardeinstiegspunkte in Shadermodule

Für eine bessere Nutzerfreundlichkeit können Sie beim Erstellen einer Compute- oder Renderpipeline jetzt die entryPoint Ihres Shadermoduls weglassen. Wenn im Shadercode kein eindeutiger Einstiegspunkt für die Shaderstufe gefunden wird, wird eine GPUValidationError ausgelöst. Weitere Informationen finden Sie im folgenden Beispiel und in 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 }] },
});

Unterstützung von Display-P3 als Farbraum für GPUExternalTexture

Du kannst jetzt den "display-p3"-Zielfarbraum festlegen, wenn du eine GPUExternalTexture aus HDR-Videos mit importExternalTexture() importierst. Weitere Informationen dazu, wie WebGPU mit Farbräumen umgeht Siehe das folgende Beispiel und das Problem chromium:1330250.

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

Informationen zu Speicherheaps

Damit Sie bei der Entwicklung Ihrer App Speichereinschränkungen bei der Zuweisung großer Mengen antizipieren können, werden in requestAdapterInfo() jetzt memoryHeaps-Informationen wie die Größe und der Typ der Speicherbereiche angezeigt, die auf dem Adapter verfügbar sind. Diese experimentelle Funktion ist nur verfügbar, wenn die Flagge „WebGPU Developer Features“ unter chrome://flags/#enable-webgpu-developer-features aktiviert ist. Weitere Informationen finden Sie im folgenden Beispiel und in 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 von https://webgpureport.org mit Speicherheaps in den Adapterinformationen
Informationen zu Adapter-Speicher-Haufen unter https://webgpureport.org.

Dawn-Updates

Die Methoden HasWGSLLanguageFeature und EnumerateWGSLLanguageFeatures in wgpu::Instance wurden hinzugefügt, um WGSL-Sprachfunktionen zu verarbeiten. Siehe Problem dawn:2260.

Mit der nicht standardmäßigen wgpu::Feature::BufferMapExtendedUsages-Funktion können Sie einen GPU-Puffer mit wgpu::BufferUsage::MapRead oder wgpu::BufferUsage::MapWrite und einer beliebigen anderen wgpu::BufferUsage erstellen. Siehe das folgende Beispiel und das Problem 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);

Die folgenden Funktionen wurden dokumentiert: ANGLE-Texturfreigabe, D3D11-Multithread-Schutz, implizite Gerätesynchronisierung, Norm16-Texturformate, Zeitstempelabfrage innerhalb von Passes, lokaler Pixelspeicher, Shader-Funktionen und Multiplanare Formate.

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

Dies sind nur einige der wichtigsten Highlights. Eine vollständige Liste der Commits

Das ist neu bei WebGPU

Eine Liste aller Themen, die in der Reihe Was ist neu in WebGPU behandelt wurden.

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