Tout d’abord, pour les développeurs front-end et les creative coders, WebGPU n’est pas juste une mise à jour d’API. En effet, c’est une version qui permet de concevoir des sites web en 3D, sans faire exploser le processeur des utilisateurs.
Le DOM (Document Object Model) a souvent dicté les règles du jeu en matière d’intégration web depuis plusieurs années. Même si WebGL a ouvert la porte à la 3D dans le navigateur, il était souvent utilisé pour des expérimentations techniques ou pour des sites « vitrines » très lourds.
1. Pourquoi WebGPU change la donne techniquement ?
Idéalement destiné pour remplacer WebGL, WebGPU est optimisé pour les nouvelles configurations hardware. Concrètement, il s’inspire directement des API graphiques natives de bas niveau comme Vulkan, Metal ou DirectX 12. Contrairement à WebGL étant limité sur le rendu graphique, WebGPU permet d’utiliser la carte graphique pour des calculs génériques complexes.
Vous pouvez y déporter des calculs de physique lourds (collisions, comportement de foules) ou des algorithmes, libérant ainsi le processeur de JavaScript.
Ainsi, WebGPU introduit le WebGPU Shading Language (WGSL), un langage de shader plus strict, moderne et sécurisé, pensé nativement pour le web.
Finalement, WebGPU réduit considérablement le coût de communication entre JavaScript et la carte graphique. Les appels de dessins (qu’on appelle aussi des draw calls) permettant d’afficher des milliers d’objets 3D complexes sur une page avec des performances à 60 FPS constants.
2. Faut-il des compétences pour utiliser cet outil ?
D’une part, l’un des freins majeurs à la 3D sur le web a toujours été la complexité mathématique. La bonne nouvelle pour les développeurs web, c’est que l’écosystème s’est déjà adapté. Nul besoin d’écrire du code WebGPU brut pour en tirer parti.
D’autant qu’avec des frameworks tel que Three.js, Babylon.js et React, son intégration est devenu natif et très utilisé pour faire des interfaces utilisateur.
3. Que construire avec WebGPU ?
Quand on rend un site vivant et dynamique avec WebGPU, voici comment les développeurs exploitent cette technologie aujourd’hui :
- Au lieu d’une galerie d’images, l’utilisateur peut manipuler le produit (une voiture, un meuble) en temps réel en 3D. Avec des reflets dynamiques et des textures photoréalistes, le tout intégré de manière fluide au reste du site.
- Le site peut devenir un véritable guide interactif en offrant une expérience utilisateur plus dynamique.
- Si le Canvas servait traditionnellement à créer des formes. Maintenant, des éléments HTML classiques (typographie, boutons) peuvent s’accompagner d’un fond 3D interactif optimal.
Pour conclure, WebGPU est capable de manipuler des objets 3D en temps réel. Il peut créer des guides interactifs ou même donner de la profondeur dans les pages web en mêlant HTML et Canvas. Grâce à ces avancées techniques majeures, c’est véritablement un outil qui peut être utile pour faire des pages web hors du commun et offrir une bonne expérience utilisateur.
Pour en savoir plus sur WebGPU, cliquez ici pour vous rendre sur la page officielle.
Vous souhaitez voir plus d’articles ? Accédez au blog ici !