Découvrez comment WebGPU exploite la puissance du GPU pour accélérer les performances du machine learning et améliorer le rendu graphique.
La nouvelle API WebGPU offre des gains de performances considérables pour les charges de travail graphiques et de machine learning. Cet article explique en quoi WebGPU représente une amélioration par rapport à la solution WebGL actuelle, et donne un aperçu des futurs développements. Mais d'abord, expliquons pourquoi WebGPU a été développé.
Contexte sur WebGPU
La technologie WebGL est disponible dans Chrome en 2011. En permettant aux applications Web de tirer parti des GPU, WebGL offre des expériences extraordinaires sur le Web, de Google Earth aux clips musicaux interactifs, aux visites en 3D de biens immobiliers et bien plus encore. WebGL est basé sur la famille d'API OpenGL, développée en 1992. C'est il y a longtemps ! Et vous pouvez imaginer que le matériel GPU a considérablement évolué depuis cette époque.
Pour suivre cette évolution, nous avons développé un nouveau type d'API permettant d'interagir plus efficacement avec le matériel GPU moderne. Des API telles que Direct3D 12, Metal et Vulkan Ces nouvelles API ont répondu à des cas d'utilisation nouveaux et exigeants en programmation GPU, tels que l'explosion du machine learning et les progrès réalisés dans les algorithmes de rendu. WebGPU succède à WebGL et apporte les progrès de cette nouvelle classe d'API modernes sur le Web.
WebGPU offre de nombreuses nouvelles possibilités de programmation GPU dans le navigateur. Il reflète mieux le fonctionnement du matériel GPU moderne, tout en posant les bases de capacités GPU plus avancées à l'avenir. L'API est intégrée au groupe GPU for the Web du W3C depuis 2017 et est le fruit d'une collaboration entre de nombreuses entreprises telles qu'Apple, Google, Mozilla, Microsoft et Intel. Aujourd'hui, après six ans de travail, nous sommes heureux d'annoncer que l'un des ajouts les plus importants à la plate-forme Web est enfin disponible !
WebGPU est disponible dès aujourd'hui dans Chrome 113 sur ChromeOS, macOS et Windows. D'autres plates-formes le seront bientôt. Un grand merci aux autres contributeurs Chromium et à Intel en particulier pour leur contribution à cette initiative.
Examinons maintenant quelques cas d'utilisation passionnants rendus possibles par WebGPU.
Débloquer de nouvelles charges de travail GPU pour le rendu
Les fonctionnalités de WebGPU telles que les nuanceurs de calcul permettent le portage de nouvelles classes d'algorithmes sur le GPU. Par exemple, des algorithmes peuvent ajouter plus de détails dynamiques aux scènes, simuler des phénomènes physiques, etc. Certaines charges de travail qui, jusque-là, n'étaient effectuées qu'en JavaScript, peuvent désormais être déplacées vers le GPU.
La vidéo suivante montre l'algorithme utilisé pour trianguler la surface de ces métaballs. Au cours des 20 premières secondes de la vidéo, lorsqu'il s'exécute en JavaScript, l'algorithme a du mal à suivre la page qui s'exécute à seulement 8 FPS, ce qui génère des animations saccadées. Pour que cela reste performant en JavaScript, nous devons considérablement réduire le niveau de détails.
C'est une différence de jour et de nuit lorsque le même algorithme est transféré vers un nuanceur de calcul, comme le montre la vidéo au bout de 20 secondes. Les performances s'améliorent considérablement, car la page s'exécute désormais à 60 FPS, et la marge de progression reste importante pour d'autres effets. En outre, 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'obtenir des effets visuels complexes qui n'étaient pas pratiques auparavant. Dans l'exemple suivant, créé dans la bibliothèque populaire 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 ondes indépendantes qui s'ajoutent les unes aux autres. Mais simuler chaque vague directement s'avère 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 comme des données de position complexes, cette fonction utilise les données spectrales, qui sont beaucoup plus efficaces pour effectuer des calculs. Ensuite, chaque image utilise la transformation de Fourier pour convertir des données spectrales en données de position représentant la hauteur des ondes.
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 WebGL pour effectuer des opérations non liées au rendu, telles que les calculs de machine learning. Toutefois, cela nécessite de dessiner les pixels de triangles pour lancer les calculs, ainsi que d'empaqueter et de décompresser soigneusement les données de Tensor dans la texture au lieu d'accéder à la mémoire à usage plus général.
Une telle utilisation de WebGL oblige les développeurs à respecter maladroitement leur code avec les attentes d'une API conçue uniquement pour le dessin. Combinée à 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 nouvelle fonctionnalité de WebGPU et éliminent ces difficultés. Les nuanceurs de calcul offrent un modèle de programmation plus flexible qui exploite la nature massivement parallèle du GPU, sans être limité par la structure stricte des opérations de rendu.
Les nuanceurs de calcul offrent davantage de possibilités de partager des données et des résultats de calcul au sein de groupes de tâches de nuanceurs pour une meilleure efficacité. Cela peut se traduire par des gains significatifs par rapport aux tentatives précédentes d'utilisation de WebGL dans le même but.
Voici un exemple des gains d'efficacité que cela peut apporter : le port initial d'un modèle de diffusion d'images dans TensorFlow.js montre un gain de performances trois fois supérieur sur divers matériels en passant de WebGL à WebGPU. Sur une partie du matériel testé, l'image s'est affichée en moins de 10 secondes. Comme il s'agissait d'un premier port, nous pensons qu'il existe encore plus d'améliorations possibles à la fois dans WebGPU et TensorFlow.js. Consultez Nouveautés du ML Web en 2023. à la session Google I/O.
WebGPU ne vise pas seulement à ajouter des fonctionnalités GPU sur le Web.
Conçu en priorité pour JavaScript
Les fonctionnalités qui permettent ces cas d'utilisation sont disponibles depuis un certain temps pour les développeurs d'ordinateurs et d'appareils mobiles spécifiques à une plate-forme. Nous avons donc éprouvé un défi à relever pour les présenter de telle sorte qu'elles fassent partie intégrante de la plate-forme Web.
WebGPU a été développé avec le recul de plus de 10 ans de développeurs qui travaillent incroyablement avec WebGL. Nous avons pu prendre les problèmes qu'ils rencontrent, les goulots d'étranglement qu'ils ont rencontrés et les problèmes qu'ils ont soulevés, et transmet tous ces commentaires à cette nouvelle API.
Nous avons constaté que le modèle d'état mondial de WebGL rendait la création d'applications et de bibliothèques composables robustes difficile et fragile. WebGPU réduit donc considérablement la quantité d'états que les développeurs doivent suivre lors de l'envoi des commandes GPU.
Il nous a été signalé que le débogage des applications WebGL était pénible, c'est pourquoi WebGPU inclut des mécanismes de gestion des erreurs plus flexibles qui ne réduisent pas vos performances. En outre, nous nous efforçons de faire en sorte que chaque message que vous recevez de l'API soit facile à comprendre et à exploiter.
Nous avons également constaté que les frais généraux liés à un trop grand nombre d'appels JavaScript constituaient un goulot d'étranglement pour les applications WebGL complexes. Par conséquent, l'API WebGPU est moins bruyante. Vous pouvez donc en faire plus avec moins d'appels de fonction. Nous nous concentrons sur l'exécution de validations lourdes en amont, en réduisant le plus possible la boucle de dessin critique. Nous proposons également de nouvelles API telles que les renvois groupés de rendu, qui vous permettent d'enregistrer à l'avance un grand nombre de commandes de dessin et de les répéter via 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 !
Son moteur de rendu WebGPU, en revanche, active une fonctionnalité qu'il appelle le rendu des instantanés. Basée sur les groupes de rendu WebGPU, cette fonctionnalité permet d'envoyer une même scène plus de 10 fois plus rapidement. Cette réduction significative des frais généraux permet à WebGPU d'afficher des scènes plus complexes, tout en permettant aux applications d'en faire plus avec JavaScript en parallèle.
Les API graphiques modernes sont réputées pour leur complexité, privant ainsi la simplicité de la simplicité des opportunités d'optimisation. WebGPU, quant à lui, se concentre sur la compatibilité multiplate-forme et gère automatiquement dans la plupart des cas des sujets généralement difficiles, tels que la synchronisation automatique des ressources.
WebGPU est donc facile à prendre en main et à utiliser. Elle s'appuie sur les fonctionnalités existantes de la plate-forme Web pour le chargement des images et des vidéos, ainsi que sur des modèles JavaScript connus, tels que les promesses pour les opérations asynchrones. Cela permet de réduire au minimum la quantité de code récurrent nécessaire. Le premier triangle peut s'afficher à 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 découvrir toutes les nouvelles possibilités que WebGPU apporte à la plate-forme Web. Nous avons hâte de découvrir toutes les nouvelles fonctionnalités intéressantes que vous allez découvrir avec WebGPU.
Un écosystème dynamique de bibliothèques et de frameworks s'est développé autour de WebGL, et ce même écosystème est désireux 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, pour profiter des avantages de WebGPU, il suffit de modifier un seul indicateur.
Et cette première version dans Chrome 113 n'est qu'un début. Bien que notre version initiale soit pour Windows, ChromeOS et macOS, nous prévoyons de proposer WebGPU sur les plates-formes restantes, comme Android et Linux.
Le lancement de WebGPU n'a pas été le seul travail de l'équipe Chrome. Des implémentations sont également en cours dans Firefox et WebKit.
En outre, de nouvelles fonctionnalités, qui sont déjà en cours de conception lors du W3C, peuvent être exposées lorsqu'elles sont disponibles sur le matériel. Par exemple, nous prévoyons d'activer bientôt la compatibilité avec les nombres à virgule flottante 16 bits dans les nuanceurs et la classe d'instructions DP4a dans Chrome pour améliorer davantage les performances du machine learning.
WebGPU est une API complète qui offre des performances exceptionnelles si vous l'investissez. Aujourd'hui, nous n'avons pu voir que ses avantages dans les grandes lignes, mais si vous souhaitez faire vos premiers pas avec WebGPU, consultez notre atelier de programmation d'introduction, Votre première application WebGPU. Dans cet atelier de programmation, vous allez créer une version GPU du Jeu de la vie de Conway. Cet atelier de programmation vous explique le processus étape par étape. Vous pourrez ainsi l'essayer même si c'est la première fois que vous développez des GPU.
Les exemples WebGPU sont également un bon endroit pour vous familiariser avec l'API. Ils vont du "triangle bonjour" traditionnel aux pipelines de rendu et de calcul plus complets, et illustrent diverses techniques. Enfin, consultez nos autres ressources.