Découvrez comment WebGPU exploite toute la puissance du GPU pour améliorer les performances de machine learning et le rendu graphique.
La nouvelle API WebGPU offre d'énormes gains de performances pour les charges de travail graphiques et de machine learning. Cet article explique en quoi WebGPU constitue une amélioration par rapport à la solution WebGL actuelle, et offre un aperçu des développements futurs. Voyons d'abord pourquoi WebGPU a été développé.
Contexte sur WebGPU
Le WebGL est arrivé dans Chrome en 2011. En permettant aux applications Web d'exploiter les GPU, WebGL offre des expériences incroyables sur le Web : Google Earth, clips musicaux interactifs, visites de biens immobiliers en 3D, etc. WebGL est basé sur la famille d'API OpenGL, développée pour la première fois en 1992. C'était il y a longtemps ! Et vous pouvez imaginer que le matériel GPU a considérablement évolué depuis cette époque.
Pour suivre cette évolution, un nouveau type d'API a été développé afin d'interagir plus efficacement avec le matériel GPU moderne. telles que Direct3D 12, Metal et Vulkan. Ces nouvelles API ont été conçues pour des cas d'utilisation nouveaux et exigeants en programmation GPU, tels que l'explosion du machine learning et les avancées des algorithmes de rendu. WebGPU est le successeur de WebGL et met sur le Web les avancées de cette nouvelle catégorie d'API modernes.
WebGPU offre de nombreuses nouvelles possibilités de programmation GPU dans le navigateur. Elle reflète mieux le fonctionnement du matériel GPU moderne, tout en posant les bases de fonctionnalités GPU plus avancées à l'avenir. Intégrée au groupe W3C "GPU for the Web", cette API est le fruit d'une collaboration entre de nombreuses entreprises comme Apple, Google, Mozilla, Microsoft et Intel. Et maintenant, après six années de travail, nous sommes heureux d'annoncer que l'un des ajouts les plus importants de la plate-forme Web est enfin disponible !
WebGPU est disponible dès aujourd'hui dans Chrome 113 sur ChromeOS, macOS et Windows, et bientôt sur d'autres plates-formes. Un grand merci à tous les autres contributeurs de Chromium et à Intel en particulier qui ont contribué à cette réussite.
Examinons à présent quelques-uns des cas d'utilisation intéressants rendus possibles par WebGPU.
Débloquez de nouvelles charges de travail GPU pour le rendu
Les fonctionnalités WebGPU telles que les nuanceurs de calcul permettent le portage de nouvelles classes d'algorithmes sur le GPU. Par exemple, les algorithmes qui peuvent ajouter des détails plus dynamiques aux scènes, simuler des phénomènes physiques, et bien plus encore. Certaines charges de travail qui ne pouvaient auparavant être effectuées qu'en JavaScript peuvent même être déplacées vers le GPU.
La vidéo suivante présente l'algorithme des cubes en progression utilisé pour trianguler la surface de ces métaballes. Dans les 20 premières secondes de la vidéo, lorsqu'il s'exécute en JavaScript, l'algorithme a du mal à suivre la page qui ne s'exécute qu'à 8 FPS, ce qui génère des animations saccadées. Pour qu'elle reste performante en JavaScript, il faudrait réduire considérablement le niveau de détail.
Lorsque nous déplaçons le même algorithme vers un nuanceur de calcul, la différence de jour entre le jour et la nuit est visible au bout de 20 secondes dans la vidéo. Les performances s'améliorent considérablement, la page s'exécutant désormais à 60 FPS et la marge de progression pour d'autres effets est encore importante. 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.
<ph type="x-smartling-placeholder">WebGPU permet également de créer 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 à l'aide du GPU. La dynamique réaliste est créée à partir de nombreuses vagues indépendantes qui s'ajoutent les unes aux autres. Cependant, il serait trop coûteux de simuler chaque vague directement.
<ph type="x-smartling-placeholder">C'est pourquoi la démonstration utilise un algorithme avancé appelé transformation rapide de Fourier. Au lieu de représenter toutes les ondes comme des données de position complexes, on utilise les données spectrales, qui sont beaucoup plus efficaces pour effectuer des calculs. Ensuite, chaque image utilise la transformation de Fourier pour convertir les 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 hors 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égrouper soigneusement les données de Tensor dans la texture plutôt que d'utiliser des accès à la mémoire plus généraux.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Une telle utilisation de WebGL nécessite que les développeurs respectent maladroitement leur code aux attentes d'une API conçue uniquement pour le dessin. Combiné à 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 tire parti de la nature massivement parallèle du GPU, sans être limité par la structure stricte des opérations de rendu.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Les nuanceurs de calcul offrent davantage d'opportunités de partage 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 considérables par rapport aux tentatives précédentes d'utiliser WebGL aux mêmes fins.
Par exemple, le port initial d'un modèle de diffusion d'images dans TensorFlow.js présente un gain d'efficacité multiplié par trois sur divers matériels lorsqu'il passe de WebGL à WebGPU. Sur certains matériels testés, l'image s'est affichée en moins de 10 secondes. Comme ce port n'était qu'un début, nous pensons que WebGPU et TensorFlow.js peuvent encore apporter d'autres améliorations. Consultez Nouveautés du ML Web en 2023. à la session Google I/O.
Mais WebGPU ne consiste pas seulement à mettre les fonctionnalités GPU sur le Web.
Conçu pour JavaScript en avant-première
Les fonctionnalités permettant ces cas d'utilisation sont disponibles depuis un certain temps pour les développeurs d'ordinateurs et d'appareils mobiles spécifiques à chaque plate-forme. Nous avons donc eu le défi de les présenter de manière à ce qu'elles s'intègrent parfaitement à la plate-forme Web.
WebGPU a été développé avec le concours de plus de 10 ans de développeurs qui ont travaillé d'arrache-pied avec WebGL. Nous avons pu prendre en compte les problèmes qu'ils ont rencontrés, les goulots d'étranglement qu'ils ont rencontrés et les problèmes qu'ils ont soulevés, et nous avons transmis tous ces commentaires à cette nouvelle API.
Nous avons vu que le modèle d'état global de WebGL rendait difficile et fragile la création d'applications et de bibliothèques composables robustes. WebGPU réduit donc considérablement la quantité d'états que les développeurs doivent suivre lorsqu'ils envoient des commandes GPU.
Nous avons appris que le débogage des applications WebGL était pénible. WebGPU inclut des mécanismes de gestion des erreurs plus flexibles qui n'entravent pas vos performances. Nous avons tout mis en œuvre pour 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 à l'exécution d'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 traitante, ce qui vous permet d'en faire plus avec moins d'appels de fonction. Nous nous concentrons en amont sur l'exécution d'une validation lourde, en gardant la boucle de dessin critique aussi légère que possible. Nous proposons également de nouvelles API telles que les packs de rendu, qui vous permettent d'enregistrer un grand nombre de commandes de dessin à l'avance et de les répéter avec un seul appel.
Voici une autre démonstration de Babylon.js pour illustrer l'immense différence qu'une fonctionnalité telle que les groupes de rendu peut faire. Son moteur de rendu WebGL 2 peut exécuter tous les appels JavaScript pour afficher la scène de cette galerie d'art environ 500 fois par seconde. Ce qui est plutôt bien !
<ph type="x-smartling-placeholder">Son moteur de rendu WebGPU, quant à lui, active une fonctionnalité appelée Rendu des instantanés. Basée sur les bundles de rendu WebGPU, cette fonctionnalité permet d'envoyer la même scène plus de 10 fois plus vite. Cette réduction considérable permet à WebGPU d'afficher des scènes plus complexes, tout en permettant aux applications d'exploiter tout le potentiel de JavaScript en parallèle.
Les API graphiques modernes ont la réputation d'être complexes et de privilégier la simplicité au profit d'opportunités d'optimisation extrêmes. WebGPU, quant à lui, se concentre sur la compatibilité multiplate-forme et gère automatiquement des sujets généralement difficiles tels que la synchronisation automatique des ressources dans la plupart des cas.
De ce fait, WebGPU est facile à prendre en main et à utiliser. Il s'appuie sur les fonctionnalités existantes de la plate-forme Web pour, par exemple, 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 maximum la quantité de code récurrent nécessaire. Vous pouvez afficher le 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 découvrir toutes les nouvelles possibilités offertes par WebGPU à la plate-forme Web, et nous sommes impatients de découvrir tous les nouveaux cas d'utilisation intéressants que vous découvrirez 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, il peut suffire de modifier un seul indicateur pour bénéficier des avantages de WebGPU.
<ph type="x-smartling-placeholder">
Cette première version de Chrome 113 n'est qu'un début. Bien que la version initiale soit compatible avec Windows, ChromeOS et macOS, nous prévoyons de proposer WebGPU sur les plates-formes restantes, comme Android et Linux, dans un avenir proche.
Et l'équipe Chrome n'est pas la seule à travailler sur le lancement de WebGPU. Des implémentations sont également en cours dans Firefox et WebKit.
En outre, de nouvelles fonctionnalités sont déjà en cours de conception lors du W3C et pourront être exposées si elles sont disponibles dans le matériel. Par exemple, nous prévoyons d'activer prochainement la compatibilité des nombres à virgule flottante 16 bits dans les nuanceurs et la classe d'instructions DP4a pour encore plus d'améliorations des performances du machine learning.
WebGPU est une API complète qui offre des performances exceptionnelles si vous investissez dans celle-ci. Aujourd'hui, nous ne pouvons aborder ses avantages que dans les grandes lignes. Toutefois, si vous souhaitez faire vos premiers pas avec WebGPU, consultez notre atelier de programmation de présentation, Votre première application WebGPU. Dans cet atelier de programmation, vous allez créer une version GPU du Jeu de la vie classique de Conway. Cet atelier de programmation vous guide pas à pas tout au long du processus. Vous pouvez donc l'essayer même s'il s'agit de votre premier développement de GPU.
Les exemples WebGPU sont également un bon point de départ pour vous familiariser avec l'API. du modèle traditionnel "hello" : à des pipelines de rendu et de calcul plus complets, et de différentes techniques. Enfin, consultez nos autres ressources.