WebGL

WebGL (abréviation de Web Graphics Library ) est une API JavaScript permettant de restituer des graphiques 2D et 3D interactifs dans n'importe quel navigateur Web compatible sans utiliser de plug-ins . WebGL est entièrement intégré à d'autres normes Web , ce qui permet une utilisation accélérée par GPU de la physique, du traitement d'image et des effets dans le canevas HTML . Les éléments WebGL peuvent être mélangés à d'autres éléments HTML et composés avec d'autres parties de la page ou de l'arrière-plan de la page.

Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript et de code shader écrit en OpenGL ES Shading Language (GLSL ES, parfois appelé ESSL), un langage similaire à C ou C++ . Le code WebGL est exécuté sur le GPU d'un ordinateur.

WebGL est conçu et maintenu par le groupe à but non lucratif Khronos Group . Le 9 février 2022, Khronos Group a annoncé la prise en charge de WebGL 2.0 par tous les principaux navigateurs.

WebGL 1.0 est basé sur OpenGL ES 2.0 et fournit une API pour les graphiques 3D. Il utilise l' élément canvas HTML5 et est accessible via les interfaces Document Object Model (DOM).

WebGL 2.0 est basé sur OpenGL ES 3.0 . Il garantit la disponibilité de nombreuses extensions optionnelles de WebGL 1.0 et expose de nouvelles API. La ​​gestion automatique de la mémoire est fournie implicitement par JavaScript .

Comme OpenGL ES 2.0, WebGL ne dispose pas des API à fonction fixe introduites dans OpenGL 1.0 et obsolètes dans OpenGL 3.0. Cette fonctionnalité, si elle est requise, doit être implémentée par le développeur à l'aide de code shader et de JavaScript.

Les shaders dans WebGL sont écrits en GLSL et transmis à l'API WebGL sous forme de chaînes de texte. L'implémentation WebGL compile ces chaînes en code GPU. Ce code est exécuté pour chaque vertex envoyé via l'API et pour chaque pixel rastérisé à l'écran.

WebGL est issu des expériences Canvas 3D initiées par Vladimir Vukićević chez Mozilla . Vukićević a présenté pour la première fois un prototype Canvas 3D en 2006. Fin 2007, Mozilla et Opera avaient tous deux réalisé leurs propres implémentations distinctes.

Début 2009, le consortium technologique à but non lucratif Khronos Group a lancé le groupe de travail WebGL, avec la participation initiale d' Apple , Google , Mozilla, Opera et d'autres. La version 1.0 de la spécification WebGL a été publiée en mars 2011.

Une des premières applications de WebGL a été Zygote Body . En novembre 2012, Autodesk a annoncé qu'ils avaient porté la plupart de leurs applications vers le cloud fonctionnant sur des clients WebGL locaux. Ces applications comprenaient Fusion 360 et AutoCAD 360.

Le développement de la spécification WebGL 2 a commencé en 2013 et s'est terminé en janvier 2017. La spécification est basée sur OpenGL ES 3.0. Les premières implémentations sont dans Firefox 51, Chrome 56 et Opera 43.

Almost Native Graphics Layer Engine (ANGLE) est un moteur graphique open source qui implémente WebGL 1.0 (2.0 qui est étroitement conforme à ES 3.0) et les normes OpenGL ES 2.0 et 3.0. Il s'agit d'un backend par défaut pour Google Chrome et Mozilla Firefox sur les plates-formes Windows et fonctionne en traduisant les appels WebGL et OpenGL en API spécifiques à la plate-forme disponibles. ANGLE fournit actuellement un accès à OpenGL ES 2.0 et 3.0 aux API OpenGL, OpenGL ES, Direct3D 9 et Direct3D 11 pour ordinateur de bureau. ″[Google] Chrome utilise ANGLE pour tous les rendus graphiques sous Windows, y compris l'implémentation accélérée de Canvas2D et l'environnement sandbox Native Client.″

WebGL est largement pris en charge par les navigateurs modernes. Cependant, sa disponibilité dépend également d'autres facteurs, comme la prise en charge du GPU. Le site Web officiel de WebGL propose une page de test simple. Des informations plus détaillées (comme le moteur de rendu utilisé par le navigateur et les extensions disponibles) peuvent être trouvées sur des sites Web tiers.

• Google Chrome – WebGL 1.0 est activé sur toutes les plateformes dotées d'une carte graphique compatible avec des pilotes mis à jour depuis la version 9, sortie en février 2011. Par défaut sur Windows, Chrome utilise le moteur de rendu ANGLE (Almost Native Graphics Layer Engine) pour traduire OpenGL ES en Direct X 9.0c ou 11.0, qui ont une meilleure prise en charge des pilotes. Cependant, sur Linux et Mac OS X, le moteur de rendu par défaut est OpenGL. Il est également possible de forcer OpenGL comme moteur de rendu sous Windows. Direct3D 11 plus récent , qui nécessite une carte graphique plus récente. Chrome 56+ prend en charge WebGL 2.0.
• Firefox – WebGL 1.0 est activé sur toutes les plateformes disposant d'une carte graphique compatible avec des pilotes mis à jour depuis la version 4.0. Depuis 2013, Firefox utilise également DirectX sur la plateforme Windows via ANGLE . Firefox 51+ prend en charge WebGL 2.0.
• Safari – Safari 6.0 et les versions plus récentes installées sur OS X Mountain Lion , Mac OS X Lion et Safari 5.1 sur Mac OS X Snow Leopard ont implémenté la prise en charge de WebGL 1.0, qui était désactivée par défaut avant Safari 8.0. La version 12 de Safari (disponible sous MacOS Mojave) prend en charge WebGL 2.0 en tant que fonctionnalité « expérimentale ». Safari 15 permet à tous les utilisateurs d'utiliser WebGL 2.0.
• Opera – WebGL 1.0 a été implémenté dans Opera 11 et 12, mais a été désactivé par défaut en 2014. Opera 43+ prend en charge WebGL 2.0.
• Internet Explorer – WebGL 1.0 est partiellement pris en charge dans Internet Explorer 11. [ Internet Explorer a initialement échoué à la plupart des tests de conformité WebGL officiels, mais Microsoft a ensuite publié plusieurs mises à jour. Le dernier moteur WebGL 0.94 réussit actuellement environ 97 % des tests Khronos. La prise en charge de WebGL peut également être ajoutée manuellement aux versions antérieures d'Internet Explorer à l'aide de plugins tiers tels que IEWebGL.
• Microsoft Edge – Pour Microsoft Edge Legacy, la version stable initiale prend en charge la version WebGL 0.95 (nom de contexte : « experimental-webgl ») avec un transpileur GLSL vers HLSL open source . La version 10240+ prend en charge WebGL 1.0 comme préfixe. La dernière version d'Edge basée sur Chromium prend en charge WebGL 2.0.

• Navigateur Android – WebGL 1.0 est pris en charge sur Android à partir de Chrome 25. WebGL 2.0 est pris en charge sur Android à partir de Chrome 114. Chrome est utilisé pour la vue Web du système Android à partir d'Android 5.
• BlackBerry 10 – WebGL 1.0 est disponible pour les appareils BlackBerry depuis la version OS 10.00
• BlackBerry PlayBook – WebGL 1.0 est disponible via WebWorks et le navigateur dans PlayBook OS 2.00
• Internet Explorer – WebGL 1.0 préfixé est disponible sur Windows Phone 8.x (11+)
• Firefox pour mobile – WebGL 1.0 est disponible pour les appareils Android et MeeGo depuis Firefox 4.
• Système d'exploitation Firefox
• Google Chrome – WebGL 1.0 est disponible pour les appareils Android depuis Google Chrome 25 et activé par défaut depuis la version 30.
• Maemo – Dans Nokia N900 , WebGL 1.0 est disponible dans le navigateur microB d'origine à partir de la mise à jour du firmware PR1.2.
• MeeGo – WebGL 1.0 n'est pas pris en charge dans le navigateur par défaut « Web ». Cependant, il est disponible via Firefox .
• Microsoft Edge – Prefixed WebGL 1.0 est disponible sur Windows 10 Mobile.
• Opera Mobile – Opera Mobile 12 prend en charge WebGL 1.0 (sur Android uniquement).
• Safari sur iOS – WebGL 1.0 est disponible pour Safari mobile sous iOS 8. [ WebGL 2.0 est disponible pour Safari mobile sous iOS 15.
• Sailfish OS – WebGL 1.0 est pris en charge dans le navigateur Sailfish par défaut.
• Tizen – WebGL 1.0 est pris en charge

La nature bas niveau de l'API WebGL, qui ne fournit que peu de ressources pour créer rapidement des graphiques 3D souhaitables, a motivé la création de bibliothèques de niveau supérieur qui font abstraction des opérations courantes (par exemple, le chargement de graphiques de scène et d'objets 3D dans certains formats ; l'application de transformations linéaires aux shaders ou aux troncs de vue ). Certaines de ces bibliothèques ont été portées vers JavaScript à partir d'autres langages. Parmi les exemples de bibliothèques qui fournissent des fonctionnalités de haut niveau , on peut citer A-Frame (VR) , BabylonJS, PlayCanvas , three.js , OSG.JS , le visualiseur de modèles de Google et CopperLicht . Web3D a également réalisé un projet appelé X3DOM pour faire fonctionner le contenu X3D et VRML sur WebGL.

Il y a eu une émergence de moteurs de jeu 2D et 3D pour WebGL, tels que Unreal Engine 4 et Unity . La ​​bibliothèque de haut niveau Away3D basée sur Stage3D /Flash a également un portage vers WebGL via TypeScript . Une bibliothèque d'utilitaires plus légère qui fournit uniquement les utilitaires mathématiques vectoriels et matriciels pour les shaders est sylvester.js. Elle est parfois utilisée en conjonction avec une extension spécifique à WebGL appelée glUtils.js.

Il existe également des bibliothèques 2D construites sur WebGL, comme Cocos2d -x ou Pixi.js, qui ont été implémentées de cette manière pour des raisons de performances dans un mouvement qui est parallèle à ce qui s'est passé avec le framework Starling sur Stage3D dans le monde Flash. Les bibliothèques 2D basées sur WebGL reviennent au canevas HTML5 lorsque WebGL n'est pas disponible. La suppression du goulot d'étranglement du rendu en donnant un accès presque direct au GPU a exposé des limitations de performances dans les implémentations JavaScript. Certaines ont été résolues par asm.js et WebAssembly (de même, l'introduction de Stage3D a exposé des problèmes de performances dans ActionScript , qui ont été résolus par des projets comme CrossBridge ).

Comme pour toute autre API graphique, la création de contenu pour les scènes WebGL nécessite l'utilisation d'un outil de création de contenu 3D et l'exportation de la scène dans un format lisible par le visualiseur ou la bibliothèque d'aide. Les logiciels de création 3D de bureau tels que Blender , Autodesk Maya ou SimLab Composer peuvent être utilisés à cette fin. En particulier, Blend4Web permet de créer une scène WebGL entièrement dans Blender et de l'exporter vers un navigateur en un seul clic, même sous forme de page Web autonome. Il existe également des logiciels spécifiques à WebGL tels que CopperCube et l'éditeur en ligne basé sur WebGL Clara.io . Les plateformes en ligne telles que Sketchfab et Clara.io permettent aux utilisateurs de télécharger directement leurs modèles 3D et de les afficher à l'aide d'un visualiseur WebGL hébergé.

À partir de la version 27 de Firefox , Mozilla a doté Firefox d'outils WebGL intégrés qui permettent l'édition de sommets et de fragments shaders. Un certain nombre d'autres outils de débogage et de profilage ont également émergé.