Nouveautés de WebGPU (Chrome 121)

François Beaufort
François Beaufort
GitHub

Prendre en charge WebGPU sur Android

L'équipe Chrome est heureuse d'annoncer que WebGPU est désormais activé par défaut dans Chrome 121 sur les appareils équipés d'Android 12 ou version ultérieure et fonctionnant avec des GPU Qualcomm et ARM.

La compatibilité sera progressivement étendue à un plus large éventail d'appareils Android, y compris ceux fonctionnant sous Android 11 dans un avenir proche. Cette expansion dépend de la mise en œuvre de tests et d'une optimisation plus poussées visant à garantir une expérience fluide sur un plus large éventail de configurations matérielles. Consultez problème chromium:1497815.

Capture d'écran de l'exemple WebGPU exécuté sur Chrome pour Android.
Exemple WebGPU s'exécutant sur Chrome pour Android.

Utiliser DXC au lieu de FXC pour la compilation de nuanceurs sous Windows

Chrome exploite désormais la puissance de DXC (DirectX Compiler) pour compiler des nuanceurs sur des machines Windows D3D12 équipées de matériel graphique SM6+. Auparavant, WebGPU s'appuyait sur FXC (FX Compiler) pour la compilation du nuanceur sous Windows. Bien que fonctionnel, FXC ne disposait pas de l'ensemble des fonctionnalités et des optimisations de performances présentes dans DXC.

Les premiers tests montrent une augmentation moyenne de 20% de la vitesse de compilation des nuanceurs de calcul lors de l'utilisation de DXC par rapport à FXC.

Horodatage des requêtes dans les passes de calcul et de rendu

Les requêtes d'horodatage permettent aux applications WebGPU de mesurer avec précision (à la nanoseconde près) le temps nécessaire aux commandes GPU pour exécuter les tâches de calcul et de rendu. Ils sont très utilisés pour mieux comprendre les performances et le comportement des charges de travail GPU.

Lorsque la fonctionnalité "timestamp-query" est disponible dans un GPUAdapter, vous pouvez désormais effectuer les opérations suivantes:

  • Demandez une GPUDevice avec la fonctionnalité "timestamp-query".
  • Créez un GPUQuerySet de type "timestamp".
  • Utilisez GPUComputePassDescriptor.timestampWrites et GPURenderPassDescriptor.timestampWrites pour définir où écrire les valeurs d'horodatage dans GPUQuerySet.
  • Résolvez les valeurs d'horodatage dans un GPUBuffer avec resolveQuerySet().
  • Lisez les valeurs d'horodatage en copiant les résultats de GPUBuffer dans le processeur.
  • Décodez les valeurs d'horodatage au format BigInt64Array.

Consultez l'exemple suivant et le problème 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();

En raison des problèmes de temporisation d'attaque, les requêtes d'horodatage sont quantifiées avec une résolution de 100 microsecondes, ce qui offre un bon compromis entre précision et sécurité. Dans le navigateur Chrome, vous pouvez désactiver la quantification de l'horodatage en activant l'indicateur "Fonctionnalités pour les développeurs WebGPU" à chrome://flags/#enable-webgpu-developer-features pendant le développement de votre application. Pour en savoir plus, consultez Quantification des requêtes d'horodatage.

Étant donné que les GPU peuvent parfois réinitialiser le compteur de codes temporels, ce qui peut entraîner des valeurs inattendues telles que des deltas négatifs entre les horodatages, je vous recommande de consulter les modifications des différences de git qui ajoutent la prise en charge des requêtes d'horodatage à l'exemple Compute Boids suivant.

Capture d'écran d'un exemple de boids Compute avec une requête d'horodatage.
Exemple de Boids Compute avec requête d'horodatage.

Points d'entrée par défaut des modules de nuanceurs

Pour améliorer l'expérience des développeurs, vous pouvez désormais omettre la entryPoint de votre module de nuanceur lorsque vous créez un pipeline de calcul ou de rendu. Si aucun point d'entrée unique n'est détecté pour l'étape du nuanceur dans le code du nuanceur, une erreur GPUValidationError est déclenchée. Consultez l'exemple suivant et le code 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 }] },
});

Prise en charge de "display-p3" en tant qu'espace colorimétrique "GPUExternalTexture".

Vous pouvez désormais définir l'espace colorimétrique de destination "display-p3" lorsque vous importez une classe GPUExternalTexture à partir de vidéos HDR avec importExternalTexture(). Découvrez comment WebGPU gère les espaces de couleur. Consultez l'exemple suivant et obtenez chromium:1330250.

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

Informations sur les segments de mémoire

Pour vous aider à anticiper les limites de mémoire lors de l'allocation de grandes quantités lors du développement de votre application, requestAdapterInfo() expose désormais des informations memoryHeaps, telles que la taille et le type des tas de mémoire disponibles sur l'adaptateur. Cette fonctionnalité expérimentale n'est accessible que lorsque l'indicateur "WebGPU Developer Features" (Fonctionnalités pour les développeurs WebGPU) de chrome://flags/#enable-webgpu-developer-features est activé. Consultez l'exemple suivant et le code 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)   { /* ... */ }
}
Capture d'écran du site https://webgpureport.org présentant les segments de mémoire dans les informations sur l'adaptateur.
Tas de mémoire des informations sur l'adaptateur affichés sur https://webgpureport.org.

Mises à jour de l'aube

Ajout des méthodes HasWGSLLanguageFeature et EnumerateWGSLLanguageFeatures sur wgpu::Instance pour gérer les fonctionnalités du langage WGSL. Consultez le problème dawn:2260.

La fonctionnalité wgpu::Feature::BufferMapExtendedUsages non standard vous permet de créer un tampon GPU avec wgpu::BufferUsage::MapRead ou wgpu::BufferUsage::MapWrite et n'importe quel autre wgpu::BufferUsage. Consultez l'exemple suivant et le problème 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);

Les fonctionnalités suivantes ont été documentées: Partage de texture ANGLE, Protection multithread D3D11, Synchronisation implicite des appareils, formats de texture Norm16, Requête d'horodatage dans les cartes, Stockage local Pixel, Fonctionnalités du nuanceur et Formats multiplanaires.

L'équipe Chrome a créé un dépôt GitHub officiel pour Dawn.

Nous n'aborderons ici que certains des points clés. Consultez la liste exhaustive des commits.

Nouveautés de WebGPU

Liste des points abordés dans la série Nouveautés de WebGPU.

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