WebGL : Graphiques 3D dans le navigateur

WebGL : Graphiques 3D dans le navigateur

Vous êtes-vous déjà demandé comment les sites web modernes peuvent afficher des graphismes 3D fluides directement dans votre navigateur sans aucun plugin ? La réponse est WebGL — une technologie qui permet aux pages web d'exploiter la carte graphique (GPU) de votre ordinateur pour dessiner des scènes 3D en temps réel.

Qu'est-ce que WebGL et pourquoi est-ce important ?

WebGL signifie Web Graphics Library. C'est une API JavaScript qui donne aux développeurs web un accès direct au matériel graphique de votre ordinateur ou téléphone. Avant WebGL, pour avoir de la 3D sur le web, il fallait des plugins comme Flash ou des applets Java — vous vous souvenez ? WebGL a tout changé en faisant de la 3D une partie native de la plateforme web, fonctionnant dans tous les navigateurs modernes et sur tous les appareils.

Considérez WebGL comme un pont entre JavaScript et votre GPU. JavaScript est excellent pour la logique et l'interface utilisateur, mais il n'est pas conçu pour les calculs lourds. Votre carte graphique, en revanche, est conçue pour effectuer des millions de calculs en parallèle — parfait pour déterminer où des millions de triangles doivent apparaître à l'écran 60 fois par seconde.

Comment WebGL fonctionne sous le capot

À la base, WebGL fonctionne en dessinant des triangles. Beaucoup, beaucoup de triangles. Chaque objet 3D que vous voyez — un personnage, une voiture, un bâtiment — est composé de triangles reliés entre eux. WebGL vous donne les outils pour définir ces triangles et dire au GPU comment les colorier.

Le processus se déroule en deux étapes principales, gérées par de petits programmes appelés shaders qui s'exécutent directement sur le GPU :

D'abord, le vertex shader prend chaque coin de chaque triangle (appelé sommet) et détermine où il doit apparaître sur votre écran. Il le fait en appliquant une série de transformations — déplacement, rotation et mise à l'échelle de l'objet, puis projection de l'espace 3D vers votre écran 2D.

Ensuite, le fragment shader (parfois appelé pixel shader) s'exécute pour chaque pixel couvert par ces triangles. Son travail est de décider de la couleur de chaque pixel. C'est là que vous appliquez des textures, l'éclairage, les ombres et tous les détails visuels qui rendent une scène réaliste.

Ces shaders sont écrits dans un langage appelé GLSL (OpenGL Shading Language), qui ressemble un peu au C. Ils s'exécutent en parallèle sur des milliers de cœurs GPU, ce qui explique leur rapidité.

WebGL 1 et WebGL 2 : Quelle est la différence ?

Vous entendrez souvent parler de WebGL 1 et WebGL 2. Considérez-les comme des versions d'une console de jeu — WebGL 2 est la version plus récente et plus performante. WebGL 1 existe depuis 2011 et fonctionne partout. Il vous offre les bases : dessiner des triangles, appliquer des textures et un ombrage simple.

WebGL 2 est arrivé plus tard et a apporté des fonctionnalités qui n'étaient auparavant disponibles que dans les API graphiques de bureau. Des choses comme le dessin instancié (dessiner le même objet des milliers de fois avec une seule commande), le transform feedback (capturer la sortie GPU pour la réutiliser), et plus de formats de texture. Tous les navigateurs modernes supportent désormais WebGL 2, c'est donc le choix par défaut pour les nouveaux projets.

Pourquoi presque personne n'écrit du WebGL brut

Écrire du code WebGL brut est... verbeux. Très verbeux. Dessiner un seul triangle prend des dizaines de lignes de code : créer des buffers, compiler des shaders, lier des programmes, configurer des attributs, lier des textures, et enfin lancer un appel de dessin. Faire cela pour une scène complexe avec lumières, caméras, animations et plusieurs objets serait incroyablement fastidieux et sujet aux erreurs.

C'est pourquoi presque tout le monde utilise une bibliothèque. La plus populaire de loin est Three.js. Elle gère tout le code passe-partout pour vous — configurer le rendu, gérer le graphe de scène (une hiérarchie d'objets), fournir des caméras, lumières, matériaux et chargeurs pour les formats de fichiers 3D courants. Avec Three.js, vous pouvez créer un cube 3D tournant en environ 20 lignes de code au lieu de 200.

D'autres excellentes options existent aussi. Babylon.js ressemble plus à un moteur de jeu complet avec physique intégrée, un éditeur visuel et un excellent support TypeScript. PlayCanvas fonctionne dans le cloud avec un éditeur collaboratif. OGL est minuscule et minimal si vous avez besoin de quelque chose de léger. Et si vous voulez vraiment un contrôle maximum, le WebGL brut est toujours là — mais la plupart des projets n'ont pas besoin de ce niveau de contrôle.

Le pipeline de rendu : De la scène 3D aux pixels à l'écran

Lorsque vous regardez une scène 3D dans votre navigateur, beaucoup de choses se passent en quelques millisecondes entre les images. Voici le parcours :

Vos objets 3D commencent dans leur propre système de coordonnées local — un espace modèle où (0,0,0) est le centre de l'objet. Le vertex shader les transforme en espace monde (où ils se trouvent dans la scène), puis en espace vue (par rapport à la caméra), puis en espace de découpage (un cube normalisé où le GPU peut facilement déterminer ce qui est visible), et enfin en espace écran (les pixels réels sur votre écran).

Vient ensuite la rastérisation — le GPU détermine quels pixels chaque triangle couvre. Pour chacun de ces pixels, le fragment shader s'exécute pour déterminer la couleur finale. C'est là que les textures sont échantillonnées, que les calculs d'éclairage sont effectués, et que des effets comme la transparence ou la lueur sont appliqués.

Le GPU effectue également automatiquement le test de profondeur — il conserve un tampon de profondeur (z-buffer) pour que les objets plus proches cachent correctement les objets plus éloignés. Et il gère le mélange pour les objets transparents, combinant les couleurs en fonction de l'opacité.

Pour aller vite : Conseils de performance

Le GPU est incroyablement rapide, mais il a un goulot d'étranglement : la communication avec le CPU. Chaque fois que JavaScript dit au GPU de dessiner quelque chose (un appel de dessin), il y a un surcoût. Trop d'appels de dessin et votre taux d'images chute. La clé de la performance est de minimiser ces échanges.

Les techniques courantes incluent l'instanciation (dessiner plusieurs copies de la même géométrie avec un seul appel), le regroupement (combiner plusieurs objets en un seul appel de dessin), et l'utilisation d'atlas de textures (regrouper plusieurs petites textures en une seule grande texture pour éviter de changer constamment de texture).

Le niveau de détail (LOD) est une autre astuce classique : utilisez des modèles très détaillés de près, mais remplacez-les par des versions plus simples pour les objets éloignés. Le frustum culling évite de dessiner tout ce qui est en dehors du champ de la caméra. Et utilisez toujours requestAnimationFrame pour votre boucle de rendu — elle se synchronise avec le taux de rafraîchissement de l'écran et se met en pause lorsque l'onglet est caché.

Pour le profilage, les outils de développement des navigateurs sont devenus excellents. Chrome DevTools a un onglet WebGL, et des outils comme Spector.js peuvent capturer et rejouer des images entières afin que vous puissiez voir exactement quels appels de dessin ont eu lieu et combien de temps chacun a pris.

WebGPU : La prochaine génération

WebGL nous a bien servi pendant plus d'une décennie, mais il a été conçu pour une époque plus ancienne du matériel graphique. WebGPU est le successeur moderne — une API de plus bas niveau qui donne aux développeurs un contrôle plus direct sur le GPU, similaire à Vulkan, Metal ou DirectX 12 sur les plateformes natives.

WebGPU apporte des shaders de calcul (exécution de calculs à usage général sur le GPU, pas seulement graphiques), un meilleur support du multithreading et des performances plus prévisibles. Il est déjà disponible dans Chrome et Edge, derrière un indicateur dans Firefox, et dans Safari Technology Preview. Des bibliothèques comme Three.js et Babylon.js ajoutent des moteurs de rendu WebGPU afin que vous puissiez basculer avec un minimum de modifications de code.

WebGPU ne remplacera pas WebGL du jour au lendemain — WebGL ne va nulle part — mais pour les nouveaux projets hautes performances, c'est l'avenir.

Que pouvez-vous construire avec cela ?

Les possibilités sont étonnamment larges. La visualisation de données prend vie avec des graphiques 3D et des globes interactifs. Les configurateurs de produits permettent aux clients de personnaliser des voitures, des meubles ou des baskets en temps réel. Les jeux, des puzzles occasionnels aux expériences AAA complètes, fonctionnent dans le navigateur. La visualisation scientifique aide les chercheurs à explorer des structures moléculaires ou des modèles climatiques. Le codage créatif et la demoscene repoussent les limites artistiques. Les expériences AR et VR fonctionnent via WebXR. Les jumeaux numériques permettent aux usines de surveiller et de simuler des systèmes réels. Et les visionneuses CAD/BIM apportent des outils d'ingénierie professionnels au navigateur.

Le web est devenu une plateforme 3D légitime. Que vous construisiez une vitrine de produits, un tableau de bord de données ou un jeu, WebGL (et de plus en plus WebGPU) vous donne les outils pour y parvenir — sans plugins, sans installations, juste une URL.