Nouveautés de WebGPU (Chrome 129)

François Beaufort
François Beaufort

Compatibilité HDR avec le mode de mappage de tonalité du canevas

Les développeurs Web disposent d'options limitées pour diffuser du contenu HDR, en s'appuyant principalement sur les éléments <img> et <video>. Toutefois, l'élément <canvas> reste limité au format SDR. Pour générer du contenu HDR dynamique dans un canevas, vous devez encoder son contenu en tant qu'image HDR avant de l'afficher (pour obtenir un exemple, consultez cette démonstration).

Le nouveau paramètre GPUCanvasToneMappingMode dans la configuration du canevas WebGPU permet désormais à WebGPU de dessiner des couleurs plus claires que le blanc (#FFFFFF). Pour ce faire, il utilise les modes suivants :

  • "standard" : le comportement par défaut limite le contenu à la plage SDR de l'écran. Pour ce faire, toutes les valeurs de couleur de l'espace colorimétrique de l'écran sont limitées à l'intervalle [0, 1].

  • "extended" : déverrouille la plage HDR complète de l'écran. Ce mode correspond à "standard" dans la plage [0, 1] de l'écran. Le clamping ou la projection sont effectués sur la plage dynamique étendue de l'écran, mais pas sur [0, 1].

L'extrait de code suivant vous montre comment configurer un canevas pour la plage dynamique élevée.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

Découvrez le HDR avec WebGPU en consultant l'exemple de particules (HDR) et l'exemple HDR WebGPU, et consultez l'entrée chromestatus.

Un ordinateur portable avec un écran HDR affichant une image éclatante.
Exemple de particules (HDR) affiché sur un écran HDR.

Prise en charge étendue des sous-groupes

Suite à l'annonce de l'expérimentation des sous-groupes, les fonctions intégrées des sous-groupes sont désormais disponibles pour les nuanceurs de calcul et les nuanceurs de fragments. Ils ne sont plus limités aux nuanceurs de calcul. Consultez le problème 354738715.

Notez que la valeur intégrée subgroup_size est actuellement bogguée dans les nuanceurs de fragment. Évitez-le pour le moment.

De plus, les fonctions intégrées de sous-groupe suivantes ont été ajoutées :

  • subgroupAdd(value) : renvoie la somme de toutes les value actives du sous-groupe.
  • subgroupExclusiveAdd(value) : renvoie la somme des analyses exclusives de toutes les value actives du sous-groupe.
  • subgroupMul(value) : renvoie la multiplication de toutes les value actives dans le sous-groupe.
  • subgroupExclusiveMul(value) : renvoie la multiplication des analyses exclusives de toutes les invocations value actives du sous-groupe.

  • subgroupAnd(value) : renvoie le AND binaire de toutes les invocations value actives du sous-groupe.
  • subgroupOr(value) : renvoie le OR binaire de toutes les values d'invocation actives dans le sous-groupe.
  • subgroupXor(value) : renvoie le XOR binaire de toutes les value actives du sous-groupe.

  • subgroupMin(value) : renvoie la valeur minimale de tous les value actifs du sous-groupe.
  • subgroupMax(value) : renvoie la valeur maximale de toutes les value actives du sous-groupe.

  • subgroupAll(value) : renvoie "true" si value est défini sur "true" pour toutes les invocations actives du sous-groupe.
  • subgroupAny(value) : renvoie la valeur "true" si value est défini sur "true" pour toute invocation active dans le sous-groupe.

  • subgroupElect() : renvoie la valeur "true" si cet appel présente la valeur subgroup_invocation_id la plus faible parmi les appels actifs du sous-groupe.
  • subgroupBroadcastFirst(value) : diffuse value à partir de l'invocation active avec la valeur subgroup_invocation_id la plus faible du sous-groupe à toutes les autres invocations actives.

  • subgroupShuffle(value, id) : renvoie value à partir de l'invocation active dont subgroup_invocation_id correspond à id.
  • subgroupShuffleXor(value, mask) : renvoie value à partir de l'invocation active dont subgroup_invocation_id correspond à subgroup_invocation_id ^ mask. mask doit être dynamique et uniforme.
  • subgroupShuffleUp(value, delta) : renvoie value à partir de l'invocation active dont subgroup_invocation_id correspond à subgroup_invocation_id - delta.
  • subgroupShuffleDown(value, delta) : renvoie value à partir de l'invocation active dont subgroup_invocation_id correspond à subgroup_invocation_id + delta.

  • quadBroadcast(value, id) : diffuse value à partir de l'appel de quad avec l'ID égal à id. id doit être une expression constante.
  • quadSwapX(value) : échange value entre les appels dans le quad dans la direction X.
  • quadSwapY(value) : échange value entre les appels dans le quad dans la direction Y.
  • quadSwapDiagonal(value) : échange value entre les invocations dans le quad en diagonale.

Mises à jour de l'Aube

La structure wgpu::PrimitiveState inclut désormais directement le paramètre de contrôle de la plage de profondeur, ce qui élimine la nécessité d'une structure wgpu::PrimitiveDepthClipControl distincte. Pour en savoir plus, consultez l'extrait de code suivant et la demande d'extraction webgpu-headers.

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;
// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

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

Nouveautés de WebGPU

Liste de tous les sujets abordés dans la série Nouveautés de WebGPU.

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

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