Découvrez comment WebGPU exploite la puissance du GPU pour accélérer les performances de machine learning et améliorer le rendu graphique.
La nouvelle API WebGPU offre des gains de performances massifs dans les charges de travail graphiques et de machine learning. Cet article explique en quoi WebGPU est une amélioration par rapport à la solution actuelle de WebGL, avec un aperçu des futurs développements. Mais avant cela, voyons pourquoi WebGPU a été développé.
Contexte sur WebGPU
WebGL est arrivé dans Chrome en 2011. En permettant aux applications Web de tirer parti des GPU, WebGL offre des expériences incroyables sur le Web, de Google Earth aux clips musicaux interactifs, en passant par les visites guidées immobilières en 3D, et plus encore. WebGL est basé sur la famille d'API OpenGL, développée pour la première fois en 1992. Ça fait longtemps ! Et vous pouvez imaginer que le matériel GPU a beaucoup évolué depuis.
Pour suivre cette évolution, une nouvelle génération d'API a été développée pour interagir plus efficacement avec le matériel GPU moderne. API telles que Direct3D 12, Metal et Vulkan. Ces nouvelles API ont permis de prendre en charge de nouveaux cas d'utilisation exigeants pour la programmation GPU, tels que l'explosion du machine learning et les avancées des algorithmes de rendu. WebGPU est le successeur de WebGL et apporte les avancées de cette nouvelle classe d'API modernes sur le Web.
WebGPU ouvre de nombreuses nouvelles possibilités de programmation de GPU dans le navigateur. Il reflète mieux le fonctionnement du matériel GPU moderne, tout en établissant les bases de fonctionnalités GPU plus avancées à l'avenir. L'API est en cours de développement depuis 2017 par le groupe GPU for the Web (GPU pour le Web) du W3C. Elle est le fruit d'une collaboration entre de nombreuses entreprises telles qu'Apple, Google, Mozilla, Microsoft et Intel. Après six ans de travail, nous sommes heureux de vous annoncer que l'une des plus grandes nouveautés de la plate-forme Web est enfin disponible.
WebGPU est disponible dès aujourd'hui dans Chrome 113 sur ChromeOS, macOS et Windows, et sera bientôt disponible sur d'autres plates-formes. Un grand merci aux autres contributeurs Chromium et à Intel en particulier, qui nous ont aidés à y parvenir.
Voyons maintenant quelques cas d'utilisation intéressants de WebGPU.
Débloquer de nouvelles charges de travail GPU pour le rendu
Les fonctionnalités WebGPU telles que les shaders de calcul permettent de porter de nouvelles classes d'algorithmes sur le GPU. Par exemple, des algorithmes capables d'ajouter des détails plus dynamiques aux scènes, de simuler des phénomènes physiques et plus encore ! Certaines charges de travail qui ne pouvaient auparavant être effectuées qu'en JavaScript peuvent désormais être transférées vers le GPU.
La vidéo suivante montre comment l'algorithme marching cubes est utilisé pour trianguler la surface de ces métaballes. Au cours des 20 premières secondes de la vidéo, l'algorithme, lorsqu'il s'exécute en JavaScript, a du mal à suivre la page qui ne s'exécute qu'à 8 FPS, ce qui entraîne une animation saccadée. Pour que le code reste performant en JavaScript, nous devrions réduire considérablement le niveau de détails.
La différence est flagrante lorsque nous transférons le même algorithme vers un nuanceur de calcul, comme vous pouvez le voir dans la vidéo après 20 secondes. Les performances s'améliorent considérablement, la page s'exécutant désormais à 60 FPS fluides. Il reste encore beaucoup de marge de manœuvre pour d'autres effets. De plus, la boucle JavaScript principale de la page est entièrement libérée pour d'autres tâches, ce qui garantit que les interactions avec la page restent réactives.
WebGPU permet également d'utiliser des effets visuels complexes qui n'étaient pas pratiques auparavant. Dans l'exemple suivant, créé dans la populaire bibliothèque Babylon.js, la surface de l'océan est entièrement simulée sur le GPU. La dynamique réaliste est créée à partir de nombreuses vagues indépendantes qui s'ajoutent les unes aux autres. Cependant, simuler directement chaque vague serait trop coûteux.
C'est pourquoi la démonstration utilise un algorithme avancé appelé transformation de Fourier rapide. Au lieu de représenter toutes les ondes sous forme de données de position complexes, cette méthode utilise les données spectrales, qui sont beaucoup plus efficaces pour effectuer des calculs. Chaque frame utilise ensuite la transformation de Fourier pour convertir les données spectrales en données de position représentant la hauteur des vagues.
Inférence ML plus rapide
WebGPU est également utile pour accélérer le machine learning, qui est devenu une utilisation majeure des GPU ces dernières années.
Depuis longtemps, les développeurs créatifs réutilisent l'API de rendu de WebGL pour effectuer des opérations autres que le rendu, telles que des calculs de machine learning. Toutefois, cela nécessite de dessiner les pixels des triangles pour lancer les calculs, et d'empaqueter et de décompresser soigneusement les données de tenseur dans la texture au lieu d'accéder à la mémoire à des fins plus générales.
Utiliser WebGL de cette manière oblige les développeurs à adapter leur code de manière maladroite aux attentes d'une API conçue uniquement pour le dessin. En raison de l'absence de fonctionnalités de base telles que l'accès à la mémoire partagée entre les calculs, cela entraîne des tâches en double et des performances non optimales.
Les nuanceurs de calcul sont la principale nouveauté de WebGPU et éliminent ces difficultés. Les nuanceurs de calcul offrent un modèle de programmation plus flexible qui exploite la nature hautement parallèle du GPU, sans être limité par la structure stricte des opérations de rendu.
Les nuanceurs de calcul offrent plus d'opportunités de partager des données et des résultats de calcul au sein de groupes de travail de nuanceurs pour une meilleure efficacité. Cela peut entraîner des gains importants par rapport aux tentatives précédentes d'utiliser WebGL à cette fin.
Pour illustrer les gains d'efficacité que cela peut apporter, un port initial d'un modèle de diffusion d'images dans TensorFlow.js affiche un triplement des performances sur divers matériels lors du passage de WebGL à WebGPU. Sur certains des matériels testés, l'image a été affichée en moins de 10 secondes. Comme il s'agit d'un port précoce, nous pensons qu'il est encore possible d'améliorer WebGPU et TensorFlow.js. Découvrez Qu'est-ce qui change avec le ML Web en 2023 ? Session Google I/O.
Mais WebGPU ne consiste pas seulement à apporter des fonctionnalités de GPU sur le Web.
Conçue pour JavaScript en premier
Les fonctionnalités permettant de mettre en œuvre ces cas d'utilisation sont disponibles depuis un certain temps pour les développeurs de plate-forme spécifiques aux ordinateurs et aux mobiles. Notre défi a été de les présenter de manière à ce qu'elles semblent faire partie intégrante de la plate-forme Web.
WebGPU a été développé en tenant compte de l'expérience de plus de dix ans de développeurs qui ont réalisé un travail incroyable avec WebGL. Nous avons pu prendre en compte les problèmes qu'ils ont rencontrés, les goulots d'étranglement auxquels ils ont été confrontés et les problèmes qu'ils ont soulevés, et nous avons intégré tous ces commentaires dans cette nouvelle API.
Nous avons vu que le modèle d'état global de WebGL rendait la création de bibliothèques et d'applications robustes et composables difficile et fragile. WebGPU réduit donc considérablement la quantité d'état que les développeurs doivent suivre lorsqu'ils envoient des commandes GPU.
Nous avons entendu que le débogage des applications WebGL était pénible. WebGPU inclut donc des mécanismes de gestion des erreurs plus flexibles qui ne nuisent pas à vos performances. Nous avons tout mis en œuvre pour que chaque message que vous recevez de l'API soit facile à comprendre et à traiter.
Nous avons également constaté que les coûts liés à la création de trop d'appels JavaScript étaient souvent un goulot d'étranglement pour les applications WebGL complexes. Par conséquent, l'API WebGPU est moins bavarde, ce qui vous permet d'accomplir plus avec moins d'appels de fonction. Nous nous concentrons sur la validation lourde à l'avance, en gardant la boucle de dessin critique aussi simple que possible. Nous proposons également de nouvelles API, comme les bundles de rendu, qui vous permettent d'enregistrer à l'avance un grand nombre de commandes de dessin et de les lire à l'aide d'un seul appel.
Pour illustrer l'impact considérable d'une fonctionnalité telle que les bundles de rendu, voici une autre démonstration de Babylon.js. Son moteur de rendu WebGL 2 peut exécuter tous les appels JavaScript pour afficher cette scène de galerie d'art environ 500 fois par seconde. Ce qui est plutôt bien !
Toutefois, son moteur de rendu WebGPU active une fonctionnalité appelée "Rendering Snapshot" (rendu instantané). Basée sur les bundles de rendu WebGPU, cette fonctionnalité permet d'envoyer la même scène plus de 10 fois plus rapidement. Cette réduction importante des frais généraux permet à WebGPU d'afficher des scènes plus complexes, tout en permettant aux applications d'utiliser JavaScript en parallèle.
Les API graphiques modernes sont réputées pour leur complexité, qui compense la simplicité par des possibilités d'optimisation extrême. WebGPU, en revanche, se concentre sur la compatibilité multiplate-forme, et gère automatiquement dans la plupart des cas des sujets traditionnellement difficiles, comme la synchronisation des ressources.
L'avantage est que WebGPU est facile à apprendre et à utiliser. Il s'appuie sur les fonctionnalités existantes de la plate-forme Web pour le chargement d'images et de vidéos, et s'appuie sur des modèles JavaScript bien connus tels que les promesses pour les opérations asynchrones. Cela permet de réduire au minimum la quantité de code standard nécessaire. Vous pouvez afficher votre premier triangle à l'écran en moins de 50 lignes de code.
<canvas id="canvas" width="512" height="512"></canvas>
<script type="module">
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext("webgpu");
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format });
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 shaderModule = device.createShaderModule({ code });
const pipeline = device.createRenderPipeline({
layout: "auto",
vertex: {
module: shaderModule,
entryPoint: "vertexMain",
},
fragment: {
module: shaderModule,
entryPoint: "fragmentMain",
targets: [{ format }],
},
});
const commandEncoder = device.createCommandEncoder();
const colorAttachments = [
{
view: context.getCurrentTexture().createView(),
loadOp: "clear",
storeOp: "store",
},
];
const passEncoder = commandEncoder.beginRenderPass({ colorAttachments });
passEncoder.setPipeline(pipeline);
passEncoder.draw(3);
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);
</script>
Conclusion
Nous sommes ravis de voir toutes les nouvelles possibilités qu'offre WebGPU à la plate-forme Web. Nous avons hâte de découvrir tous les nouveaux cas d'utilisation intéressants que vous trouverez pour WebGPU.
Un écosystème dynamique de bibliothèques et de frameworks a été construit autour de WebGL, et cet écosystème est impatient d'adopter WebGPU. La prise en charge de WebGPU est en cours ou déjà terminée dans de nombreuses bibliothèques WebGL JavaScript populaires. Dans certains cas, il peut suffire de modifier un seul indicateur pour profiter des avantages de WebGPU.
Et cette première version de Chrome 113 n'est qu'un début. Notre version initiale est destinée à Windows, ChromeOS et macOS, mais nous prévoyons de déployer WebGPU sur les autres plates-formes, comme Android et Linux, dans un avenir proche.
Et ce n'est pas seulement l'équipe Chrome qui a travaillé sur le lancement de WebGPU. Des implémentations sont également en cours dans Firefox et WebKit.
De plus, de nouvelles fonctionnalités sont déjà en cours de conception au sein du W3C et pourront être exposées lorsqu'elles seront disponibles en matériel. Par exemple, dans Chrome, nous prévoyons d'activer prochainement la compatibilité avec les nombres à virgule flottante 16 bits dans les nuanceurs et la classe d'instructions DP4a pour améliorer encore les performances du machine learning.
WebGPU est une API complète qui offre des performances exceptionnelles si vous l'utilisez. Aujourd'hui, nous n'avons pu que présenter ses avantages de manière générale. Si vous souhaitez vous lancer avec WebGPU, consultez notre atelier de programmation d'introduction Votre première application WebGPU. Dans cet atelier, vous allez créer une version GPU du jeu de vie de Conway classique. Cet atelier de programmation vous présente le processus étape par étape afin que vous puissiez l'essayer, même si vous n'avez jamais développé de GPU auparavant.
Les exemples WebGPU sont également un bon moyen de vous familiariser avec l'API. Ils vont du triangle "Hello World" traditionnel aux pipelines de rendu et de calcul plus complets, qui illustrent une variété de techniques. Enfin, consultez nos autres ressources.