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 piloteOpenGL 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 processeurs graphiques du terminal.
Implémentations
Si, en , aucun navigateur web ne permettait l'affichage 3D directement dans le navigateur sans greffon, ce n'est plus le cas aujourd'hui[4]:
Firefox le supporte depuis sa version 4 (), il utilise pour cela OpenGL ES dans sa version Android et OpenGL dans sa version Linux, MacOS et Windows[5] et depuis la version 50 du WebGL est disponible pour plus de 98 % des utilisateurs sur Windows 7 ou une version ultérieure [6]
Les versions mobiles de Firefox, Opera et du navigateur de Blackberry supportent également WebGL[4].
Limitations
WebGL est basé sur OpenGL ES 2.0 (OpenGL for Embedded Systems), une version d'OpenGL destinée aux 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 le flux de données entre processeur principal (CPU) et processeur graphique (GPU), et donc la consommation de bande passante.
WebGL étant fondé sur OpenGL ES, certaines fonctionnalités d'OpenGL y sont absentes, dont :
Le tampon de sélection (selection buffer, permettant de sélectionner un objet par un simple clic) ; des techniques alternatives, plus gourmandes en calcul, existent cependant[9].
Les textures 3D (technique de textures en volume) : bien qu'OpenGL ES 2.0 possède une extension Texture 3D[10], celle-ci n'existe pas en WebGL[11]. La bibliothèque webgl-texture3d tente de remédier à ce problème[12].
Le geometry shader : WebGL dispose du vertex shader et du fragment shader, mais pas du geometry shader.
Certains problèmes de compatibilité étant apparus à ses débuts, de nombreuses cartes graphiques avaient été bloquées dans WebGL, les différents constructeurs ont donc fait des efforts sur les pilotes afin de rendre leurs cartes compatibles[17].
Microsoft en retard sur la concurrence
En , Microsoft a renouvelé sa défiance vis-à-vis de cette technologie[18], 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 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[19].
Malgré la finalisation récente de WebGL et en raison de son fort potentiel, les projets utilisant cette technologie se multiplient.
Des compilateurs C/C++ vers JavaScript tels qu'Emscripten, Mandreel ou Duetto, permettent de faciliter le portage d'applications préexistantes[21],[22],[23].
Parmi les projets et réalisations en WebGL, on notera en particulier la contribution de Google concernant la création de multiples applications en WebGL (Google Map en 3D par exemple), Chrome Experiments[24], démonstrations régulièrement mises à jour à partir du site The Chromium Projects.
Du côté des jeux vidéo, le portage de Quake 2[25] est à noter, ainsi que quelques projets de jeux amateurs.
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[26], de molécules[27].
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é reconstruits 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[28] de Wikipedia.
Il existe 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[29]. C'est le cas aussi du « FlightGear Scenery Model Directory » du simulateur de vol libre FlightGear Flight Simulator[30].
Egalement, des plateformes SaaS permettent de téléverser, de visualiser et d'exploiter des objets 3D directement depuis l'interface web.
La NASA a développé une application web interactive appelée "Experience Curiosity" pour célébrer le 3e anniversaire de l'atterrissage du rover Curiosity sur Mars[31]. This Blend4Web-based app[32]. 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[33],[34]. L'application a été présentée au début de la section WebGL au SIGGRAPH 2015[35].
Bibliothèques orientées 3D
Il existe de plus en plus de bibliothèques pour faciliter le développement en WebGL[36]. Three.js est l'une des plus répandues.
Les moteurs de jeu professionnels offrent maintenant la possibilité aux développeurs d'exporter directement dans les navigateurs en WebGL [46],[47], ouvrant ainsi la porte au développement de jeux AAA sur WebGL.
Bibliothèques orientées 2D
Différents frameworks dynamiques 2D utilisent également WebGL, pour tirer parti de son accélération matérielle, c'est le cas par exemple des bibliothèques WebGL-2d, enchant.js ou encore pixi.js, qui permettent également d'ajouter quelques éléments tridimensionnels dans des applications bidimensionnelles. Pixi.js est par exemple utilisée sur les sites promotionnels de la chaîne de restauration rapideaméricaineMcDonald's[48].
