« WebGL » : différence entre les versions

| nom = WebGL

| logo = WebGL logoLogo.pngsvg

| taille logoimage = 150

| imagelégende =

| licencelangues =

'''WebGL''' est une spécification d'[[interface de programmation]] de [[moteur 3D|3D dynamique]] pour les pages et applications [[HTML5]] créée par le [[Khronos Group]]. Elle permet d'utiliser le standard [[OpenGL ES]] au sein d'une [[page web]], d'un [[livre numérique]] au format [[EPUB (format)|ePUB]]<ref>{{en}} [http://www.3d4ebook.com/faq.html 3D 4 ebook – FAQ]</ref>, d'un [[diaporama]]<ref>{{en}} [http://slides.html5rocks.com/#canvas-3d This presentation is an HTML5 website – Canvas 3D (WebGL)]</ref> ou bien d'une application basée sur le standard HTML5, en s'aidant du langage [[JavaScript]], des données au format [[JSON]] et de l'[[accélération matérielle]] pour les calculs et le rendu 3D à l'aide des pilotes [[OpenGL ES]] du ou des [[processeurProcesseur graphique|processeurs graphiquegraphiques]] du [[Terminal (informatique)|terminal informatique]] ([[Ordinateur]], [[smartphone]], [[tablette numérique]]{{etc}}). OpenGL ES a été choisi pour son large support au sein des architectures embarquées et mobiles.

WebGL permet d'afficher, de créer et de gérer dynamiquement des éléments graphiques complexes en 3D dans la fenêtre du [[navigateur web]] d'un client. Il est actuellement implémenté dans la plupart des grands navigateurs modernes, mais cette implémentation est récente, d'où le fait que cette technologie reste assez méconnue du grand public.

Lorsqu’un élément graphique de type WebGL est inclus dans une page web, le navigateur exécute un programme en JavaScript utilisant l'interface WebGL. La bibliothèque WebGL appelle à son tour le [[Pilote informatique|pilote]] [[OpenGL ES]] du [[système d'exploitation]] qui se chargera de faire les calculs nécessaires à l'affichage sur l'écran, en exploitant si possible l'[[accélération matérielle]] du ou des [[processeur graphique|processeurs graphiques]] du terminal.

Si, en {{date-|septembre 2009}}, aucun navigateur web ne permettait l'affichage 3D directement dans le navigateur sans greffon, çace n'est plus le cas aujourd'hui<ref name="CanIuse" >{{en}} [http://caniuse.com/webgl Can I use WebGL?]</ref>:

* [[Firefox]] le supporte depuis sa version 4 ({{date-|6 juillet 2010}}), il utilise pour cela [[OpenGL ES]] dans sa version [[Android]] et [[OpenGL]] dans sa version [[Linux]], [[MacOS]] et [[Microsoft Windows|Windows]]<ref>{{lien web|lang=en|url=https://wiki.mozilla.org/Platform/GFX/WebGL/Backends|titre=Platform/GFX/WebGL/Backends|site=mozilla.org}}</ref> et depuis la version 50 du {{date-|15 novembre 2016}} WebGL est disponible pour plus de 98 % des utilisateurs sur [[Windows 7]] ou une version ultérieure <ref>[https://www.mozilla.org/en-US/firefox/50.0/releasenotes] sur mozilla.org</ref>

* [[Google Chrome]] à partir de la version 9 ({{date-|3 février 2011}})<ref>{{en}}{{Lien web|url=http://chrome.blogspot.fr/2011/02/dash-of-speed-3d-and-apps.html|titre=A dash of speed, 3D and apps|date=2011-02-3|accessdateconsulté le=2013-12-10}}</ref>. La version [[Chrome OS|ChromeOS]] utilise [[OpenGL ES]], la version Linux utilise [[OpenGL]] depuis la version 45 environ<ref>il faut le lancer avec les options -ignore-gpu-blacklist -use-egl options pour que les versions ≤44 fonctionnent avec [[OpenGL ES]]</ref>.

* [[Safari (logiciel)|Safari]] propose le support de WebGL depuis sa version [[5.1]] ({{date-|20 juillet 2011}})

* [[Opera]], depuis la version 12 ({{date-|14 juin 2012}})

* [[Internet Explorer]] est le dernier des grands navigateurs, avec la [[Internet Explorer 11|version 11]] sortie le {{date-|17 octobre 2013}}.

* Les versions mobiles de Firefox, Opera et du navigateur de [[BlackBerry|Blackberry]] supportent également WebGL<ref name="CanIuse" />.

WebGL est basé sur [[OpenGL ES]] 2.0 ([[OpenGL]] for [[Système embarqué|Embedded Systems]]), une version d'[[OpenGL]] destinée aux [[Système embarqué|systèmes embarqués]]. Elle n'a pas les fonctions d'appel fixe d'[[OpenGL]] 1.0 qui sont également dépréciées dans OpenGL 3.0 : par exemple, plutôt que de créer les objets, face par face, avec un appel de fonction à chaque face, une seule fonction soumet une liste de faces au moteur. Il est toujours possible de modifier les paramètres de la liste par la suite. Cela permet d'améliorer les performances en réduisant lale bandeflux passantede données entre le processeur principal (CPU) et le processeur graphique (GPU), et donc la consommation de [[bande passante]].

Comme WebGL estétant baséfondé sur [[OpenGL ES]], certaines fonctionnalités d'[[OpenGL]] y sont absentes, dont :

* Les textures 3D (technique de textures en volume) : bien qu'[[OpenGL ES]] 2.0 possède une extension Texture 3D<ref>{{en}} [http://www.khronos.org/registry/gles/extensions/OES/OES_texture_3D.txt OES_texture_3D]</ref>, celle-ci n'existe pas en WebGL<ref>{{en}} [http://www.khronos.org/message_boards/showthread.php/7225-3D-textures-in-WebGL 3D textures in WebGL] sur le forum d'aide aux développeurs de Khronos</ref>. La bibliothèque webgl-texture3d tente de remédier à ce problème<ref>{{en}} [https://github.com/hughsk/webgl-texture3d webgl-texture3d]</ref>.

* Le geometry [[shader]] : WebGL dispose du vertex shader et du fragment shader, mais pas du geometry shader.

Khronos Group prépare depuis 2012 le brouillon de la norme [[WebGL 2.0]], basée sur [[OpenGL ES 3.0]]<ref>{{en}} https://wiki.mozilla.org/Platform/GFX/WebGL2</ref>{{,}}<ref>{{lien web |langue=en |titre=WebGL 2.0 Specification |url=http://www.khronos.org/registry/webgl/specs/latest/2.0/ |site=khronos.org |consulté le=19-05-2023}}.</ref>{{,}}<ref>{{en}} [http://blog.tojicode.com/2013/09/whats-coming-in-webgl-20.html What's coming in WebGL 2.0]</ref>. En {{date-|janvier 2017}}, un support partiel de WebGL 2.0 est rendu disponible dans [[Firefox]] 51 et [[Google Chrome|Chrome]] 46<ref>[http://www.programmez.com/actualites/google-chrome-56-suit-firefox-51-pour-webgl-20-mais-restreint-lapi-chrome-sync-25423 Support d'une partie de WebGL 2.0 par Firefox 51 et Chrome 56]</ref>.

En {{date-|juin 2011}}, [[Microsoft]] a renouvelé sa défiance vis-à-vis de cette technologie<ref name="MS webgl">[http://blogs.technet.com/b/srd/archive/2011/06/16/webgl-considered-harmful.aspx Avis de Microsoft juin 2011]</ref>, d'après ses dires, principalement pour des raisons de sécurité. WebGL restait alors exclu d'Internet Explorer alors qu'il était supporté par la plupart des navigateurs. Mike Shaver, vice-président de la stratégie technique de la fondation [[Mozilla Foundation|Mozilla]] répond que les critiques de [[Microsoft]] valent pour toutes les technologies 3D web ([[Silverlight]] de Microsoft inclus), s'appuyant sur l'accélération 3D matérielle<ref name="reponse a MS">[http://shaver.off.net/diary/2011/06/17/a-three-dimensional-platform/ A three-dimensional plateform]</ref>.

En {{date-|juin 2013}}, [[Microsoft]] confirme que son prochain navigateur [[Internet Explorer 11]] aura la prise en charge de la technologie WebGL<ref>[[WebGL sur Internet Explorer 11]]</ref>.

Des compilateurs C/C++ vers JavaScript tels qu'[[Emscripten]], [[Mandreel]] ou [[Duetto]], permettent de faciliter le portage d'applications préexistantes<ref>{{en}} [https://github.com/kripken/emscripten/wiki/OpenGL-support kripken / emscripten – OpenGL support]</ref>{{,}}<ref>{{en}} [http://allievi.sssup.it/techblog/ Duetto (C++ for the Web) 0.9.2 is out — OpenGL ES implementation in WebGL and toolchain improvements]</ref>{{,}}<ref>{{en}} [http://mozakai.blogspot.fr/2013/11/c-to-javascript-emscripten-mandreel-and.html C++ to JavaScript: Emscripten, Mandreel, and now Duetto]</ref>.

Et enfin les possibilités de la visualisation 3D en ligne pour [[imagerie médicale]] ou scientifique, comme la visualisation de l'anatomie humaine ou plus généralement animale<ref>[http://www.zygotebody.com/ Zygote Body]</ref>, de molécules<ref>[http://webglmol.sourceforge.jp/glmol/viewer.html GLmol - Molecular Viewer on WebGL/Javascript]</ref>.

Différents outils de [[cartographie]], comme l'ancienne application de cartographie 3D [[Nokia Maps 3D WebGL]] qui représentait des villes entières dont les bâtiments avaient été reconstruitreconstruits par des procédés automatiques d'imagerie numérique. [[F4map]] qui se base sur les données 3D fournies par [[OpenStreetMap]], c'est également le cas plus récemment du moteur [[WikiMiniAtlas]]<ref>[https://wma.wmflabs.org/ WikiMiniAtlas]</ref> de Wikipedia.

Il existe également des sites regroupant des collections d'objets 3D à télécharger et permettant de visualiser les objets disponibles directement dans l'interface web. On peut citer [[Sketchfab]]<ref>{{lien web |langue=en |titre=Explore 3D Models |url=https://sketchfab.com/explore/models/staffpicks |site=Sketchfab |consulté le=19-05-2023}}.</ref>. C'est le cas aussi du « FlightGear Scenery Model Directory » du [[simulateur de vol]] libre [[FlightGear|FlightGear Flight Simulator]]<ref>[http://scenemodels.flightgear.org/models.php FlightGear Scenery Model Directory]</ref>.

La [[National Aeronautics and Space Administration|NASA]] a développé une [[application web]] interactive appeléappelée "Experience Curiosity" pour célébrer le {{3e|anniversaire}} anniversaire de l'atterrissage du [[ Mars Science Laboratory |rover Curiosity]] sur [[Mars (planète) | Mars]]<ref name="nasa-press-release">{{lien web|url=http://www.nasa.gov/press-release/new-online-exploring-tools-bring-nasas-journey-to-mars-to-new-generation | titre=New Online Exploring Tools Bring NASA's Journey to Mars to New Generation |éditeur=NASA |date= |consulté le=2015-08-07}}</ref>. This [[Blend4Web]]-based app<ref name="curiosity-app">{{lien web|url=http://eyes.nasa.gov/curiosity/ | titre=Experience Curiosity |éditeur=NASA's Eyes |date= |consulté le=2015-08-07}}</ref>. L'application permet de contrôler le rover, ses caméras, son bras articulé et de reproduire les événements importants de la mission [[Mars Science Laboratory]]<ref name="blend4web-blog-nasa">{{lien web|url=http://www.benicourt.com/blender/2015/09/prenez-le-controle-de-curiosity-avec-blend4web/ | titre=Prenez le contrôle de Curiosity avec Blend4Web |éditeur=Greg G.d.Bénicourt Blog |date= |consulté le=2015-09-16}}</ref>{{,}}<ref name="technology-org-nasa-webapp">{{lien web|url=http://www.technology.org/2015/08/11/internet-3d-take-the-curiosity-rover-for-a-spin-right-on-the-nasa-website/ | titre=Internet 3D: Take the Curiosity Rover for a Spin Right on the NASA Website |éditeur=Technology.Org |date= |consulté le=2015-08-12}}</ref>. L'application a été présentée au début de la section WebGL au [[Special Interest Group in Graphics |SIGGRAPH]] 2015<ref name="khronos-events-2015-SIGGRAPH">{{lien web|url=https://www.khronos.org/news/events/2015-siggraph |titre=Khronos Events - 2015 SIGGRAPH |éditeur=Khronos |date= |consulté le=2015-08-13}}</ref>.

On peut également citer [[Babylon.js]]<ref>http://www.i-programmer.info/news/144-graphics-and-games/6243-babylonjs-a-webgl-game-engine-from-microsoft.html</ref>, [[Blend4Web]]<ref name="blend4web">[https://www.blend4web.com Blend4Web]</ref>, GLGE<ref name="glge">[http://www.glge.org/ GLGE]</ref>, CopperLicht<ref name="copperlicht">[http://www.ambiera.com/copperlicht/ CopperLicht]</ref>, C3DL<ref name="c3dl">[http://www.c3dl.org/ C3DL]</ref>, SceneJS<ref name="scenejs">[http://scenejs.org/ SceneJS]</ref>, SpiderGL<ref name="spidergl">[http://spidergl.org/ SpiderGL]</ref> et, OSGJS<ref>http://osgjs.org/</ref> et [[Verge3D]], qui permettent l'implémentation d'objets ou de scènes en trois dimensions dans le navigateur. Certaines sont même dédiées à la [[visualisation scientifique]] et médicale, telle que XTK <ref>{{lien web |titre=Xtk/X |url=https://github.com/xtk/X#readme |site=GitHub |consulté le=16-08-2020}}.</ref>.

Les [[Moteur de jeu|moteurs de jeu]] professionnels offrent maintenant la possibilité aux développeurs d'exporter directement dans les navigateurs en WebGL <ref>{{lien web |langue=en |titre=GDC 14 : Mozilla & Epic Games Run Unreal Engine 4 in Firefox - PC Perspective |url=http://www.pcper.com/news/General-Tech/GDC-14-Mozilla-Epic-Games-Run-Unreal-Engine-4-Firefox |site=PC Perspective |consulté le=16-08-2020}}.</ref>{{,}}<ref>{{lien web |titre=In-depth on Unity 5's WebGL publishing tech |url=http://www.gamasutra.com/view/news/213459/Indepth_on_Unity_5s_WebGL_publishing_tech.php |site=gamasutra.com |consulté le=16-08-2020}}.</ref>, ouvrant ainsi la porte au développement de jeux [[AAA (jeuxjeu vidéo)|AAA]] sur WebGL.

== ArticlesVoir connexesaussi ==

* [http://learningwebgl.com/blog/ learningwebgl], [[blog]] donnant régulièrement des liens vers les différentes démos et applications WebGL.