Accueil / WebGL
La base de la 3D webWebGL : la 3D dans tous les navigateurs, depuis 2011.
WebGL est la technologie qui permet à une page web de dessiner de la 3D avec la carte graphique. Elle fonctionne sur presque tous les ordinateurs, téléphones et tablettes, et reste la base de la plupart des sites 3D actuels.
Des triangles, une carte graphique, une page web.
Tout objet 3D affiché par WebGL est fait de triangles. La carte graphique les place dans l’espace, les éclaire et les colore, des dizaines de fois par seconde.
Des trianglesUn maillage de triangles
Un personnage, une voiture, un terrain : tout est découpé en triangles. Plus il y en a, plus la forme est fine, et plus la carte graphique travaille.
La lumièreLa lumière fait le relief
Sans lumière, un objet 3D paraît plat. Ce sont l’orientation de chaque triangle et la position des lampes qui donnent l’impression de volume.
Dans la pageDirectement dans la page
La scène se dessine dans un simple élément de la page, le canvas. Pas de lecteur à installer : c’est le navigateur lui-même qui parle à la carte graphique.
Du maillage à la surface éclairée.
Faites glisser le curseur : les triangles laissent place à une surface éclairée. Changez de caméra pour voir la différence entre perspective et vue technique.
Ce que vous voyez
Un rocher en facettes. À gauche du curseur, on ne voit que ses triangles ; à droite, la carte graphique les remplit, les colore et les éclaire.
Caméra
Votre navigateur sera testé au lancement de la démo.
En perspective, les objets lointains rapetissent, comme à l’œil nu. En orthographique, les tailles restent constantes : c’est la vue des plans d’architecte et des jeux en vue isométrique.
Ce qui se passe à chaque image.
Une scène WebGL se redessine en entier plusieurs dizaines de fois par seconde. À chaque image, le même enchaînement se répète.
1. Les sommets sont placés
Un premier petit programme, le vertex shader, reçoit chaque sommet de chaque triangle et calcule sa position à l’écran, en tenant compte de la caméra et du mouvement de l’objet.
2. Les triangles sont découpés en pixels
La carte graphique détermine quels pixels de l’écran chaque triangle recouvre. Cette étape, la rastérisation, est entièrement automatique.
3. Chaque pixel reçoit sa couleur
Un second programme, le fragment shader, calcule la couleur de chaque pixel : texture, lumière, ombre, reflet. C’est lui qui fait qu’un objet a l’air en bois, en métal ou en verre. Voir la page Shaders.
Écrire tout cela à la main est long. C’est pourquoi presque tout le monde passe par une bibliothèque comme Three.js ou Babylon.js, qui s’occupe de ces détails.
WebGL 1, WebGL 2, et après.
WebGL est un standard du Khronos Group, le consortium qui gère aussi OpenGL et Vulkan.
| Inspiré de | Ce qu’il apporte | |
|---|---|---|
| WebGL 1 (2011) | OpenGL ES 2.0 | La 3D dans le navigateur, avec des shaders programmables. |
| WebGL 2 (2017) | OpenGL ES 3.0 | Textures 3D, instanciation native, rendu dans plusieurs images à la fois, plus de formats. C’est la version utilisée aujourd’hui partout. |
| WebGPU (2023 et après) | Vulkan, Metal, Direct3D 12 | Une nouvelle interface, plus moderne, avec du calcul général. Ce n’est pas un WebGL 3 mais son successeur. Voir WebGPU. |
Pourquoi WebGL reste un bon choix.
Il marche presque partout
Plus de 95 % des navigateurs en circulation savent afficher du WebGL 2. Pour un site grand public, c’est encore la valeur la plus sûre.
Il est très bien outillé
Quinze ans d’exemples, de bibliothèques, de tutoriels et de réponses aux questions. Les assistants d’IA le connaissent parfaitement.
Il atteint ses limites sur les grosses scènes
Chaque objet coûte du travail au processeur central, et le calcul général y est détourné. Pour des scènes massives ou de la simulation, WebGPU prend le relais.
WebGL, les questions courantes.
WebGL va-t-il disparaître avec WebGPU ?
Pas avant longtemps. Les navigateurs continueront de le prendre en charge, et il sert de repli quand WebGPU n’est pas disponible. Les bibliothèques modernes gèrent les deux.
Comment savoir si mon navigateur gère WebGL ?
Si la démo plus haut s’affiche, c’est le cas. La page Compatibilité teste en détail votre navigateur.
WebGL est-il sûr ?
Oui. Les navigateurs isolent le code WebGL et vérifient ce qui est envoyé à la carte graphique. Une page ne peut pas accéder à vos fichiers par ce biais.
Peut-on faire de la réalité virtuelle avec WebGL ?
Oui. Associé à WebXR, WebGL affiche des scènes dans les casques de réalité virtuelle directement depuis le navigateur. Voir la page VR dans le navigateur.
À lire ensuite.
Parlons de ce que la 3D temps réel peut faire pour vous.
Configurateur, visite, carte interactive, formation en réalité virtuelle : je vous dis franchement si la 3D web est la bonne réponse.