Cette page a été traduite par l'API Cloud Translation.

Nouveautés de WebGPU (Chrome 121)

François Beaufort

Assistance pour 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 de GPU Qualcomm et ARM.

La compatibilité sera progressivement étendue à un plus grand nombre d'appareils Android, y compris ceux fonctionnant sous Android 11 dans un avenir proche. Cette expansion dépendra de tests et d'une optimisation supplémentaires pour garantir une expérience fluide sur un plus grand nombre de configurations matérielles. Consultez le problème chromium:1497815.

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

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

Chrome utilise désormais la puissance de DXC (DirectX Compiler) pour compiler les nuanceurs sur les machines Windows D3D12 équipées d'un matériel graphique SM6+. Auparavant, WebGPU s'appuyait sur FXC (FX Compiler) pour la compilation des nuanceurs sur Windows. Bien que fonctionnel, FXC ne disposait pas de l'ensemble de fonctionnalités et des optimisations de performances présents 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.

Requêtes de code temporel dans les passes de calcul et de rendu

Les requêtes d'horodatage permettent aux applications WebGPU de mesurer précisément (à la nanoseconde près) le temps nécessaire à l'exécution des passes de calcul et de rendu de leurs commandes GPU. Elles sont largement utilisées pour obtenir des insights sur les performances et le comportement des charges de travail des GPU.

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

Demandez un GPUDevice avec la fonctionnalité "timestamp-query".
Créez un GPUQuerySet de type "timestamp".
Utilisez GPUComputePassDescriptor.timestampWrites et GPURenderPassDescriptor.timestampWrites pour définir l'emplacement où écrire les valeurs d'horodatage dans GPUQuerySet.
Résolvez les valeurs d'horodatage dans un GPUBuffer avec resolveQuerySet().
Relisez les valeurs d'horodatage en copiant les résultats de GPUBuffer vers le processeur.
Décode les valeurs de code temporel en tant que BigInt64Array.

Consultez l'exemple 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 préoccupations liées aux attaques temporelles, les requêtes d'horodatage sont quantifiées avec une résolution de 100 microsecondes, ce qui constitue un bon compromis entre précision et sécurité. Dans le navigateur Chrome, vous pouvez désactiver la quantification des codes temporels en activant le flag "WebGPU Developer Features" (Fonctionnalités pour les développeurs WebGPU) sur chrome://flags/#enable-webgpu-developer-features lors du développement de votre application. Pour en savoir plus, consultez Quantification des requêtes de code temporel.

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

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

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

Pour améliorer l'expérience des développeurs, vous pouvez désormais omettre le entryPoint de votre module de nuanceur lorsque vous créez un pipeline de calcul ou de rendu. Si aucun point d'entrée unique pour l'étape du nuanceur n'est trouvé dans le code du nuanceur, une GPUValidationError est déclenchée. Consultez l'exemple suivant et le problème 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 comme espace colorimétrique GPUExternalTexture

Vous pouvez désormais définir l'espace colorimétrique de destination "display-p3" lors de l'importation d'une GPUExternalTexture à partir de vidéos HDR avec importExternalTexture(). Découvrez comment WebGPU gère les espaces colorimétriques. Consultez l'exemple et le problème 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 lorsque vous allouez de grandes quantités de mémoire lors du développement de votre application, requestAdapterInfo() expose désormais des informations memoryHeaps telles que la taille et le type de tas de mémoire disponibles sur l'adaptateur. Cette fonctionnalité expérimentale n'est accessible que lorsque l'indicateur "Fonctionnalités pour les développeurs WebGPU" est activé sur chrome://flags/#enable-webgpu-developer-features. Consultez l'exemple suivant et le problème 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 de https://webgpureport.org avec des tas de mémoire dans les informations de l'adaptateur. — Tas de mémoire d'informations sur l'adaptateur affichés sur https://webgpureport.org.

Mises à jour de l'Aube

Les méthodes HasWGSLLanguageFeature et EnumerateWGSLLanguageFeatures sur wgpu::Instance ont été ajoutées pour gérer les fonctionnalités du langage WGSL. Consultez le problème dawn:2260.

La fonctionnalité non standard wgpu::Feature::BufferMapExtendedUsages vous permet de créer un tampon GPU avec wgpu::BufferUsage::MapRead ou wgpu::BufferUsage::MapWrite et tout autre wgpu::BufferUsage. Consultez l'exemple et le problème dawn:2204 suivants.

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 : ANGLE Texture Sharing, D3D11 multithread protected, Implicit Device Synchronization, Norm16 texture formats, Timestamp Query Inside Passes, Pixel Local Storage, Shader Features et Multi Planar Formats.

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

Il ne s'agit que de quelques-uns des points clés. Consultez la liste exhaustive des commits.