WebGL - WebGL

WebGL
WebGL Logo.svg
Auteur(s) original(aux) Fondation Mozilla
Développeur(s) Groupe de travail Khronos WebGL
Première version 3 mars 2011 ( 2011-03-03 )
Version stable
2.0 / 17 janvier 2017 ( 2017-01-17 )
Plate-forme Multiplateforme
Disponible en Anglais
Taper API
Site Internet www .khronos .org / WebGL /
HTML
Comparaisons

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

Les programmes WebGL se composent d'un code de contrôle écrit en JavaScript et d'un code shader écrit en OpenGL ES Shading Language (GLSL ES), un langage similaire à C ou C++ , et exécuté sur l' unité de traitement graphique (GPU) d' un ordinateur . WebGL est conçu et maintenu par le groupe à but non lucratif Khronos .

Concevoir

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 à l'aide des interfaces DOM ( Document Object Model ).

WebGL 2.0 est basé sur OpenGL ES 3.0 et a garanti la disponibilité de nombreuses extensions optionnelles de WebGL 1.0 et expose de nouvelles API. La gestion automatique de la mémoire est assurée implicitement par JavaScript .

Comme OpenGL ES 2.0, WebGL n'a pas les API à fonction fixe introduites dans OpenGL 1.0 et obsolètes dans OpenGL 3.0. Cette fonctionnalité, si nécessaire, doit être implémentée par le développeur final en fournissant du code de shader et en configurant les liaisons de données en JavaScript.

Les shaders dans WebGL sont exprimés directement dans GLSL et transmis à l'API WebGL sous forme de chaînes textuelles. L'implémentation WebGL compile ces instructions de shader en code GPU. Ce code est exécuté pour chaque sommet envoyé via l'API et pour chaque pixel tramé à l'écran.

Histoire

WebGL a évolué à partir des expériences Canvas 3D lancées par Vladimir Vukićević chez Mozilla . Vukićević a présenté pour la première fois un prototype Canvas 3D en 2006. À la fin de 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. En mars 2012, le président du groupe de travail est Ken Russell.

Les premières applications de WebGL incluent Zygote Body . En novembre 2012, Autodesk a annoncé avoir porté la plupart de ses applications sur le cloud en s'exécutant 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 avec une finalisation en janvier 2017. Cette spécification est basée sur OpenGL ES 3.0. Les premières implémentations sont dans Firefox 51, Chrome 56 et Opera 43.

Implémentations

Moteur de couche graphique presque natif

Article détaillé : ANGLE (logiciel)

Le moteur de couche graphique presque natif (ANGLE) est un moteur graphique open source qui implémente WebGL 1.0 (2.0 qui est étroitement conforme aux normes ES 3.0) et 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 donne actuellement accès à OpenGL ES 2.0 et 3.0 aux API de bureau OpenGL, OpenGL ES, Direct3D 9 et Direct3D 11. ″[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.″

Logiciel

WebGL est largement pris en charge par les navigateurs modernes. Cependant, sa disponibilité dépend d'autres facteurs comme le GPU qui le prend en charge. 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) sont fournies sur des sites Web tiers.

Navigateurs de bureau

  • Google Chrome - WebGL 2.0 a été activé sur toutes les plates-formes dotées d'une carte graphique compatible avec des pilotes mis à jour depuis la version 9, publiée 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 à Direct X 9.0c ou 11.0, qui ont une meilleure prise en charge des pilotes. Sous Linux et Mac OS X, le moteur de rendu par défaut est cependant OpenGL. Il est également possible de forcer OpenGL comme moteur de rendu sous Windows. Depuis septembre 2013, Chrome dispose également d'un moteur de rendu Direct3D 11 plus récent , qui nécessite toutefois une carte graphique plus récente. Chrome 56+ prend en charge WebGL 2.0.
  • Firefox – WebGL 1.0 a été activé sur toutes les plates-formes dotées d'une carte graphique compatible avec des pilotes mis à jour depuis la version 4.0. Depuis 2013 Firefox utilise également DirectX sur la plate-forme 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 mis en œuvre la prise en charge de WebGL 1.0, qui était désactivée par défaut avant Safari 8.0. Safari version 12 (disponible dans MacOS Mojave) prend en charge WebGL 2.0, actuellement en tant que fonctionnalité « expérimentale ».
  • Opera - WebGL 1.0 a été implémenté dans Opera 11 et 12, bien qu'il ait é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 . Il a initialement échoué à la majorité 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 plug-ins tiers tels que IEWebGL.
  • Microsoft Edge – La version stable initiale prend en charge WebGL version 0.95 (nom contextuel : "experimental-webgl") avec un transpileur open source GLSL vers HLSL . La version 10240+ prend en charge WebGL 1.0 en tant que préfixe. WebGL 2.0 est prévu avec une priorité moyenne dans les futures versions.

Navigateurs mobiles

  • BlackBerry 10 – WebGL 1.0 est disponible pour les terminaux BlackBerry depuis la version 10.00 du système d'exploitation
  • BlackBerry PlayBook - WebGL 1.0 est disponible via WebWorks et le navigateur dans PlayBook OS 2.00
  • Navigateur Android - Essentiellement non pris en charge, mais la gamme de smartphones Android Sony Ericsson Xperia a eu des capacités WebGL après une mise à niveau du micrologiciel. Les smartphones Samsung ont également activé WebGL (vérifié sur Galaxy SII (4.1.2) et Galaxy Note 8.0 (4.2)). Pris en charge dans Google Chrome qui a remplacé le navigateur Android dans de nombreux téléphones (mais n'est pas un nouveau navigateur Android standard).
  • 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.
  • Firefox OS
  • 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 micrologiciel PR1.2.
  • MeeGo - WebGL 1.0 n'est pas pris en charge dans le navigateur Web "Web". Cependant, il est disponible via Firefox .
  • Microsoft Edge – WebGL 1.0 préfixé est disponible sur Windows 10 Mobile.
  • Opera Mobile – Opera Mobile 12 prend en charge WebGL 1.0 (sur Android uniquement).
  • Sailfish OS – WebGL 1.0 est pris en charge dans le navigateur Sailfish par défaut.
  • Tizen - WebGL 1.0 est pris en charge
  • iOS – WebGL 1.0 est disponible pour Safari mobile, dans iOS 8 .

Outils et écosystème

Utilitaires

La nature de bas niveau de l'API WebGL, qui fournit peu à elle seule pour produire rapidement des graphiques 3D souhaitables, a contribué à la création de bibliothèques qui sont généralement utilisées pour créer des éléments dans les graphiques 3D (par exemple , les transformations de vue pour les shaders , le frustum de vue , etc. ). Les tâches de base telles que le chargement de graphiques de scène et d'objets 3D dans les formats courants de l'industrie sont également résumées par les bibliothèques (dont certaines ont été portées vers JavaScript à partir d'autres langages) pour fournir des fonctionnalités supplémentaires. Une liste non exhaustive des bibliothèques qui offrent de nombreuses fonctions de haut niveau comprend A-Frame (VR) , BabylonJS , PlayCanvas , Three.js , OSG.JS et CopperLicht . X3D a également réalisé un projet appelé X3DOM pour faire fonctionner le contenu X3D et VRML sur WebGL. Le modèle 3D sera en balise XML <X3D>en HTML5 et le script interactif utilisera JavaScript et DOM. BS Content Studio et l'exportateur InstantReality X3D peuvent exporter X3D en HTML et exécuté par WebGL.

Gavd

Il y a également eu une émergence rapide de moteurs de jeu pour WebGL, à la fois 2D et 3D, y compris Unreal Engine 4 et Unity . La bibliothèque de haut niveau Away3D basée sur Stage3D /Flash dispose également d'un port vers WebGL via TypeScript . Une bibliothèque d'utilitaires plus légère qui fournit uniquement les utilitaires mathématiques vectorielles et matricielles pour les shaders est sylvester.js. Il est parfois utilisé 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 façon pour des raisons de performances, dans un mouvement parallèle à ce qui s'est passé avec Starling Framework 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 également exposé des limitations de performances dans les implémentations JavaScript. Certains ont été résolus 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 ).

Création de contenu

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 standard et l'exportation de la scène dans un format lisible par la visionneuse ou la bibliothèque d'aide. Des 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 à une scène WebGL d'être entièrement créée dans Blender et exportée vers un navigateur en un seul clic, même en tant que 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'une visionneuse WebGL hébergée.

Outils basés sur l'environnement

De plus, Mozilla Foundation , dans son navigateur Firefox, a implémenté des outils WebGL intégrés à partir de la version 27 qui permettent d'éditer les vertex et les fragment shaders. Un certain nombre d'autres outils de débogage et de profilage ont également vu le jour.

Voir également

Les références

Liens externes