close

WebGL

Aller à la navigation Aller à la recherche
WebGL
Logo WebGL.svg
Informations générales
type de programme API
Auteur Fondation Mozilla
développeur Groupe de travail WebGL
Première version 3 mars 2011
Licence personnalisé
langues Anglais
Information technique
Plates-formes prises en charge Multi plateforme
Versions
Dernière version stable 2.0 ( infos ) (17 janvier 2017 [2] )
Liens

WebGL (Web Graphics Library) [ 2 ] est une spécification standard qui définit une API implémentée en JavaScript pour le rendu de graphiques 3D dans n'importe quel navigateur Web . Il ne nécessite pas l'utilisation de plug-ins supplémentaires [ 3 ] sur toute plate-forme prenant en charge OpenGL 2.0 ou OpenGL ES 2.0. WebGL est entièrement intégré à toutes les normes de navigateur Web, permettant une accélération matérielle [ 4 ](physique) du GPU et le traitement des images et des effets dans le cadre du canevas ou " toile " de la page web. Les éléments WebGL peuvent être combinés avec d'autres éléments HTML et composés avec d'autres parties de la page ou l'arrière-plan [ 5 ] de la page . Les programmes WebGL consistent en un code de contrôle écrit en JavaScript qui vous permet d'utiliser l'implémentation native d'OpenGL ES 2.0, un langage similaire à C ou C++ , exécuté sur une unité de traitement graphique (GPU). WebGL est conçu et géré par le consortium technologique à but non lucratif Khronos Group . [ 6 ]

Historique

WebGL est né des expériences de canevas 3D lancées par Vladimir Vukićević chez Mozilla . Vukićević a d'abord montré un prototype de Canvas 3D en 2006. À la fin de 2007, Mozilla [ 7 ] et Opera [ 8 ] avaient fait leurs propres implémentations séparément. Début 2009, le consortium technologique à but non lucratif Kronos Group a formé le groupe de travail WebGL, avec la participation initiale d' Apple , Google , Mozilla , Opera et d'autres. [ 4 ] ​[ 6 ]​ La version 1.0 des spécifications WebGL a été publiée en mars 2011. [ 9 ] Les premières implémentations de WebGL incluent Zygote Body [ 10 ] ​[ 11 ]​ et peuvent être trouvées dans Firefox 2.0, Chrome 9, Internet Explorer 11 , Opera 12, Safari 5.1 et Edge . Sur les appareils mobiles, nous pouvons le trouver dans Chrome pour Android 25, Edge, Firefox Mobile (Gecko) 4, Opera Mobile 12 et Safari Mobile 8.1. [ 12 ]

Depuis mars 2012, le président du groupe de travail est Ken Russell. En novembre 2012, la société Autodesk a annoncé qu'elle transférait la plupart de ses applications dans le cloud en s'exécutant sur des clients WebGL locaux. Ces applications incluent Fusion 360 et AutoCAD 360. [ 13 ]

Le développement des spécifications WebGL 2.0 a commencé en 2013 et s'est terminé en janvier 2017. [ 14 ] Cette spécification est basée sur OpenGL ES 3.0. [ 15 ] Les premières implémentations de ceci peuvent être trouvées dans Firefox 51, Chrome 56 et Opera 43. [ 12 ]

Conception

WebGL 1.0 est basé sur OpenGL ES 2.0 [ 16 ] et fournit une API pour les graphiques 3D. [ 9 ]​ L'élément HTML5 canvas est utilisé, accessible via les interfaces DOM ( Document Object Model ).

WebGL 2.0 est basé sur OpenGL ES 3.0 et garantit la disponibilité de nombreuses extensions facultatives à WebGL 1.0 et introduit de nouvelles API. [ 14 ]

La gestion automatique de la mémoire est fournie dans le cadre du langage JavaScript. [ 6 ]

Comme avec OpenGL ES 2.0, WebGL ne dispose pas des API de fonction de broche [ 17 ] introduites dans OpenGL 1.0 et obsolètes dans OpenGL 3.0. Cette fonctionnalité peut à la place être fournie par l'utilisateur via le code d'observation et la définition de liaisons de données en JavaScript ; ce code nécessaire est souvent complété par une bibliothèque matricielle telle que glMatrix, TDL ou MJS.

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

Soutien

WebGL est largement pris en charge dans les navigateurs modernes. Cependant, sa disponibilité dépend d'autres facteurs tels que la prise en charge du GPU. Le site Web officiel de WebGL propose une page de test simple pour vérifier si votre GPU est pris en charge. [ 18 ] Des informations plus détaillées (telles que le type de moteur de rendu utilisé par le navigateur ou les extensions disponibles) peuvent être trouvées sur des sites Web tiers. [ 19 ] ​[ 20 ]

Navigateurs de bureau

  • Google Chrome - WebGL 1.0 est activé sur toutes les plateformes avec une carte graphique compatible avec des pilotes mis à jour depuis la version 9, sortie en février 2011. [ 21 ] ​[ 22 ]​ Par défaut sous Windows, Chrome utilise ANGLE [ 23 ] ​( Presque Native Graphics Layer Engine ), moteur de rendu pour traduire OpenGL ES en Direct3D 9.0, car il a une meilleure prise en charge des pilotes. [ 24 ] Sous Linux et Mac OS X, le moteur de rendu par défaut est OpenGL. [ 25 ] Il est également possible de forcer OpenGL comme moteur de rendu sous Windows. [ 24 ] Depuis septembre 2013, Chrome dispose d'un nouveau moteur de rendu, Direct3D 11, qui nécessite une carte graphique plus récente. [ 26 ] ​[ 27 ]​ À partir de Chrome 56, WebGL 2.0 est pris en charge.
  • Mozilla Firefox - WebGL 1.0 a été activé sur toutes les plates-formes disposant d'une carte graphique compatible avec des pilotes mis à jour depuis la version 4.0. [ 28 ] Depuis 2013, Firefox utilise également Direct3D sur les plateformes Windows via ANGLE. [ 23 ] À partir de Firefox 51, WebGL 2.0 est pris en charge.
  • Midori
  • Safari - De Safari 5.1 sur Mac OS X Leopard à Safari 6.0 sur Mac OS X Mountain et les versions plus récentes, la prise en charge de WebGL 1.0 est prise en charge. Avant Safari 8.0, il était désactivé par défaut. [ 29 ] ​[ 30 ] ​[ 31 ] ​[ 32 ]
  • Opera - WebGL 1.0 est implémenté dans Opera 11 et 12, bien qu'à partir de 2014, il ait été désactivé par défaut. [ 33 ] ​[ 34 ]​ À partir d'Opera 43, WebGL 2.0 est pris en charge.
  • Internet Explorer - WebGL 1.0 est partiellement pris en charge dans Internet Explorer 11. [ 35 ] ​[ 36 ] ​[ 37 ]​ Il n'a initialement pas satisfait à la plupart des tests de conformité WebGL officiels, mais Microsoft a ensuite publié de nombreuses mises à jour pour y remédier. Le moteur WebGL 0.94 passe actuellement environ 97 % des tests Khronos. [ 38 ] 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. [ 39 ]
  • Microsoft Edge - La première version stable prend en charge WebGL version 0.95 (nom de contexte : "experimental-webgl") avec un transcompilateur open source GLSL vers HLSL . [ 40 ] À partir de la version 10240, WebGL 1.0 est pris en charge. WebGL 2.0 est prévu comme une priorité moyenne dans les futures versions. [ 41 ]
  • Vivaldi

Navigateurs mobiles

  • Blackberry 10 - WebGL 1.0 est disponible pour les appareils Blackberry à partir de la version 10.0 du système d'exploitation. [ 42 ]
  • Blackberry PlayBook [ 43 ]​ - WebGL est disponible via WebWorks et le navigateur PlayBook OS 2.0. [ 44 ]
  • Navigateur Android (par défaut) - Ne prend pas en charge WebGL. Cependant, la gamme Sony Ericsson Xperia de smartphones Android [ 45 ] prend en charge WebGL via une mise à jour du firmware. [ 46 ] Les smartphones Samsung sont également compatibles WebGL (Galaxy SII (4.1.2) et Galaxy Note 8.0 (4.2)). Normalement remplacé sur la plupart des smartphones par Google Chrome, qui est pris en charge.
  • Internet Explorer - WebGL 1.0 est disponible sur Windows Phone 8.1.
  • Firefox Mobile - WebGL 1.0 est disponible pour les appareils Android et MeeGo depuis Firefox 4. [ 47 ] ​[ 48 ]
  • Google Chrome - WebGL 1.0 est disponible pour les appareils Android depuis Google Chrome 25 et activé par défaut depuis la version 30. [ 49 ]
  • Maemo - Sur Nokia N900 , WebGL 1.0 est disponible pour le navigateur MicroB [ 50 ] à partir de la mise à jour du micrologiciel PR1.2. [ 51 ]
  • MeeGo - WebGL 1.0 n'est pas pris en charge, mais il est activé via Firefox. [ 48 ]
  • Microsoft Edge - WebGL 1.0 est disponible sur Windows 10 Mobile. [ 52 ]
  • Opera Mobile - Opera Mobile 12 prend en charge WebGL 1.0 (Android uniquement). [ 53 ]
  • Sailfish OS - WebGL 1.0 est pris en charge par défaut dans le navigateur Sailfish. [ 54 ]
  • Tizen - WebGL 1.0 est pris en charge. [ 55 ]
  • Ubuntu Touch - WebGL 1.0 est pris en charge. [ 56 ]
  • WebOs - WebGL 1.0 est pris en charge depuis l'extension de mars 2012 du framework QtWebKit. [ 57 ]
  • IOS - WebGL 1.0 est disponible pour Safari mobile dans IOS 8 . [ 58 ]

Création de contenu et écosystème

L'API WebGL est une technologie conçue pour fonctionner directement avec le GPU (Graphics Processing Unit), et peut être trop fastidieuse et difficile à utiliser directement (par rapport à d'autres standards Web plus accessibles) sans certaines bibliothèques utilitaires, telles que ' view frustum '. Le chargement de scènes graphiques et d'objets 3D dans des formats industriels classiques n'est pas non plus directement prévu. Pour cette raison, des bibliothèques JavaScript (ou certaines importées dans WebGL) ont été créées pour fournir cette fonctionnalité supplémentaire. Une liste non détaillée de bibliothèques qui fournissent de nombreuses fonctionnalités de haut niveau comprend A-Frame (VR) , BabylonJS , C3DL , CopperLicht , Curve3D , CubicVR , EnergizeGL , GammaJS , GLGE , GTW , JS3D , Kuda , O3D , OSG.JS , PhiloGL , PlayCanvas , Pre3d , SceneJS , SpiderGL , TDL , Three.js , X3DOM .

Parmi tous, Three.js est le plus populaire en nombre d'utilisateurs. Il est léger et présente un faible niveau de complexité par rapport à la spécification WebGL d'origine. BabylonJS a également gagné en popularité en raison de sa programmation par des employés de Microsoft.

Il y a également eu une émergence brutale de moteurs de jeu pour WebGL, [ 59 ] dont Unreal Engine 4 et Unity 5 . [ 60 ] La bibliothèque de haut niveau Stage3D / Away3D basée sur Flash dispose également d' un port vers WebGL via TypeScript . [ 26 ] ​[ 61 ]​ Sylvester.js est une bibliothèque plus petite qui ne fournit que les utilitaires mathématiques vectoriels et matriciels pour les shaders . [ 62 ] ​[ 63 ]​ Il est parfois utilisé conjointement avec une extension WebGL spécifique appelée gIUtils.js. [ 62 ] ​[ 64 ]

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 ressemble à ce qui s'est passé avec le Starling Framework sur Stage3D dans le monde. éclat. Les bibliothèques 2D basées sur WebGL réapparaissent sur le canevas HTML5 lorsque WebGL n'est pas disponible. [ 65 ]

La suppression du goulot d'étranglement du rendu en donnant un accès presque direct au GPU a exposé les limitations de performances dans les implémentations JavaScript. Certains ont été corrigés par asm.js . (De même, l'introduction de Stage3D a exposé les problèmes de performances d' ActionScript , que des projets comme CrossBridge ont résolus .) [ 65 ]

La création de contenu pour les scènes WebGL implique souvent l'utilisation d'un outil de création de contenu 3D et l'exportation de la scène dans un format lisible par la visionneuse ou la bibliothèque auxiliaire. Des logiciels de création 3D de bureau tels que Blender , Autodesk Maya ou SimLab Composer peuvent être utilisés à cette fin. Cela a d'abord été rendu possible avec Inka3D, un plugin d'exportation WebGL pour Maya. 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 en tant que page Web autonome. [ 66 ] Il existe également des programmes spécifiques à WebGL tels que CopperCube et l'éditeur WebGL en ligne Clara.io. Les plates-formes 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é. De même, Unity Engine vous permet de créer du contenu (jeux vidéo, applications, etc.) pour les navigateurs utilisant également WebGL.

De plus, Mozilla Firefox a implémenté des outils WebGL intégrés à partir de la version 27 qui vous permettent de modifier les shaders de vertex et de fragments. [ 67 ] Un certain nombre d'autres outils de débogage et de profilage ont également vu le jour. [ 68 ]

X3D a également réalisé un projet appelé X3DOM pour faire fonctionner le contenu X3D et VRML dans WebGL. Le modèle 3D dans la <X3D>balise HTML5 XML et le script interactif utilisera JavaScript et le DOM. BS Content Studio et l'exportateur InstantReality X3D peuvent exporter X3D au format HTML et être exécutés par WebGL.

WebGL intégré

Comme WebGL est conçu pour fonctionner côté client avec des opérations de rendu lourdes effectuées par les utilisateurs sur le GPU de l'ordinateur, son code source peut être relativement facilement intégré sur, par exemple, un microcontrôleur PIC , ou tout autre avec la mise en œuvre de la pile TCP/IP, de sorte que le microcontrôleur agira comme un serveur Web et que le reste des tâches sera effectué côté client. [ 69 ]

Voir aussi

Références

  1. ^ "Statistiques de Khronos" . Alexa Internet . Archivé de l'original le 29 juillet 2019 . Consulté le 19 janvier 2021 . 
  2. ↑ "Khronos publie la spécification finale de WebGL 1.0" . chronos.org.
  3. ↑ Gregg Tavares (2012-02-09). "Les bases de WebGL" . html5rocks.com.
  4. ^ un b "Kronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet" Archivé le 19/04/2012 à la Wayback Machine .. khronos.org.
  5. ↑ Tony Parisi (2012-08-15). "WebGL : opérationnel" . safaribooksonline.com.
  6. ↑ abc " WebGL – OpenGL ES 2.0 pour le Web" . chronos.org.
  7. ↑ " Canvas 3D : GL power, web-style" . web.archive.org.
  8. ↑ "Emmener la toile dans une autre dimension" . web.archive.org. Archivé de l'original my.opera.com.
  9. ^ un b "Spécifications WebGL 1.0" . chronos.org.
  10. ↑ "Zygot Corps" . zygotebody.com.
  11. ↑ Bhanoo, Sindya N. (2010-12-23). "Nouveau de Google : le navigateur de corps" . well.blogs.nytimes.com.
  12. ↑ a b "Navigateurs Web compatibles WebGL" . développeur.mozilla.org.
  13. ^ "Autodesk Fusion 360 : L'avenir de la CAO, PT 1" . 3dcadworld.com.
  14. ^ un b « Spécifications WebGL 2 » . chronos.org.
  15. ↑ "OpenGL ES 3.0" . wikipedia.org.
  16. ↑ "OpenGL ES 2.0" . wikipedia.org.
  17. ↑ "Fonctions de fixation" . wikipedia.org.
  18. ↑ "Page de test WebGL" . webgl.org .
  19. ↑ "Rapport WebGL" . webgl.org .
  20. ↑ "Rapport du navigateur WebGL - Détection WebGL - Testeur WebGL" . browserleaks.com .
  21. ↑ "Google lance Chrome 9" . techspot.com.
  22. ↑ "WebGL dans Chrome Stable ! - Apprendre WebGL" Archivé le 28 mai 2015 sur la Wayback Machine . . learningwebgl.com.
  23. ↑ a b "Rendu ANGLE" . wikipedia.org.
  24. ↑ a b " (WebGL) Comment activer l'OpenGL natif dans votre navigateur (Windows) ". geeks3d.com.
  25. ↑ "Blog Chromium : Présentation du projet ANGLE" . blog.chromium.org.
  26. ^ un b [1] Archivé le 8 août 2014 à la Wayback Machine . "WebGL autour du net, 17 octobre 2013 - Apprendre WebGL Archivé le 8 août 2014 sur la Wayback Machine ." . learningwebgl.com.
  27. ↑ « Enfin ! Le jour du Chrome D3D11 est arrivé ! ». tojicode.com.
  28. ↑ "Notes de publication de Mozilla Firefox 4" . mozilla.com.
  29. ↑ "Activer WebGL dans Safari" . ikriz.nl.
  30. ↑ "Obtenir une implémentation WebGL" . chronos.org.
  31. ↑ "Implémentations - WebKit" . chronos.org.
  32. ↑ "WebGL disponible sur WebKit" . webkit.org.
  33. ↑ "WebGL et l'accélération matérielle" . web.archive.org. Archivé de l'original . dev.opera.com.
  34. ↑ "Présentation d'Opera 12 alpha" . web.archive.org. Archivé de l'original . opéra.com.
  35. ↑ "WebGL sur Windows" . msdn.microsoft.com.
  36. ↑ "Guide de prévisualisation d'Internet Explorer 11 pour les développeurs" . msdn.microsoft.com.
  37. ↑ "Internet Explorer 11 pour supporter WebGL et MPEG Dash" . engadget.com.
  38. ↑ "IE11 échoue à plus de la moitié des tests dans WebGL officiel" . connect.microsoft.com.
  39. ↑ "IEWebGL" . github.com
  40. ↑ "Mise en œuvre de Microsoft Edge WebGL" . github.com.
  41. ↑ "Edge Platform - Statut WebGL 2.0" Archivé le 27 décembre 2018 sur la Wayback Machine . . développeur.microsoft.com.
  42. ↑ McDonough, Larry. « WebGL : les jeux 3D sur le Web arrivent » Archivé le 13 avril 2013 sur la Wayback Machine .. devblog.blackberry.com.
  43. ↑ "Livret Blackberry" . wikipedia.org.
  44. ↑ Halevi, Ronen. "PlayBook OS 2.0 Developer Beta comprend WebGL, Flash 11 et AIR 3.0" . berryreview.com.
  45. ^ "Sony Ericsson Xpéria" . wikipedia.org.
  46. ↑ "Les téléphones Xperia ™ sont les premiers à prendre en charge WebGL". web.archive.org. Archivé de l'original . blogs.sonyericsson.com.
  47. ↑ iclkevin "WebGL sur les appareils mobiles" Archivé le 7 avril 2017 sur la Wayback Machine . . ichemlabs.com.
  48. ↑ a b "Compatibilité Mobile HTML5 sur iPhone, Android, Windows Phone, BlackBerry, Firefox OS et autres appareils mobiles" . mobilehtml5.org.
  49. ↑ Kersey, Jason. "Mise à jour Chrome Beta pour Android" . chromereleases.googleblog.com.
  50. ↑ "Navigateur MicroB pour Nokia" . wikipedia.org.
  51. ^ "WebGL sur N900" . suihkulokki.blogspot.com.
  52. ↑ "Guide de développement : WebGL - Développement Microsoft Edge" . docs.microsoft.com.
  53. ↑ "Opéra Mobile 12" . web.archive.org. Archivé de l'original . opéra.com.
  54. ↑ "WebGL Quake 3 sur Jolla" . youtube.com.
  55. ↑ "WebGL sur Tizen" . developer.tizen.org.
  56. ↑ "WebGL sur Ubuntu Touch" . askubuntu.com.
  57. ↑ "WebGL sur WebOS" . webosnation.com.
  58. ↑ Cunningham, Andrew. « IOS 8 : soigneusement revu » . arstechnica.com.
  59. ↑ Tony Parisi "Programmation d'applications 3D avec HTML5 et WebGL : animation et visualisation 3D pour les pages Web" . livres.google.es "O'Reilly Media, Inc." pp. 364–366. ISBN 978-1-4493-6395-6 .
  60. ↑ Stephen Barret. "Tegra K1 débarque dans le nouveau Chromebook d'Acer" . anandtech.com.
  61. ↑ "Blog > Away3D Typescript 4.1 Alpha > Away3D" Archivé le 8 août 2014 sur la Wayback Machine . . away3d.com.
  62. ↑ a b Alexey Boreskov ; Eugeny Shikin. "Infographie : des pixels au matériel graphique programmable" . livres.google.es Presse CRC. p. 370. ISBN 978-1-4398-6730-3 .
  63. ↑ Andréas Anyuru. "Programmation WebGL professionnelle : développement de graphiques 3D pour le Web" . livres.google.es Presse CRC. p. 370. ISBN 978-1-4398-6730-3 .
  64. ↑ Steve Fulton ; Jeff Fulton. "HTML5 Canvas : Interactivité et animation natives pour le Web" . livres.google.es (2e éd.). "O'Reilly Media, Inc." p. 624. ISBN 978-1-4493-3588-5 .
  65. ↑ a b "Le potentiel WebGL" . typedarray.org.
  66. ↑ "Site officiel de Blend4Web - À propos" . blend4web.com.
  67. ↑ "Modification en direct des shaders WebGL avec les outils de développement Firefox" . hacks.mozilla.org.
  68. ↑ "Rendu en temps réel - Outils de débogage et de profilage WebGL" . realtimerendering.com.
  69. ↑ WEBGL embarqué dans un microcontrôleur PIC

Liens externes

Extrait de « https://es.wikipedia.org/w/index.php?title=WebGL&oldid=145492838 »