WebGL – Quand les navigateurs font de la 3D

Depuis l’apparition du HTML5, on voit apparaître sur les sites internet, des animations de plus en plus réalistes et surtout contenant de plus en plus de 3D, ceci, bien entendu, sans utiliser un support vidéo, mais grâce aux possibilités des navigateurs, de plus en plus étendues.

Une première approche de la représentation 3D dans les navigateurs fut amorcée en 1994 par le « Virtual Reality Modelling Language », ou VRML. Il était alors nécessaire de télécharger un plugin pour permettre au navigateur d’interpréter des fichiers .wrl, qui composaient l’animation.

Puis fin 2009, Khronos Group et la fondation Mozilla créent WebGL, une spécification pour les navigateurs web, permettant d’interpréter le standard OpenGl, via l’API OpenGL ES. Au départ, peu de navigateurs étaient compatibles avec cette norme. On peux constater que maintenant, la plupart le sont (Oui même Internet Explorer …) :

Très bien, alors c’est quoi ce WebGL ?

Selon Khronos Group, son créateur :

WebGl est un standard web d’affichage 3D, multi-plateformes, libre de droit, basé sur l’API Open GL ES 2.0, exploité au travers des éléments canvas du html5 en tant qu’interface du DOM … WebGL apporte à Internet la 3D, sans plugin, mis en place directement par le navigateur . Les principaux fournisseurs de navigateurs comme Apple ( Safari ) , Google ( Chrome ) , Mozilla ( Firefox ) et Opera ( Opera ) sont tous membres du Groupe de travail WebGL.

Pour faire plus simple, WebGl est un standard (les spécifications sont ici ) qui permet d’afficher des éléments en 3D, dans une page web, grâce à une API (Open GL ES 2.0) et les éléments <canvas>, introduit par le HTML5. Mais attention, WebGL n’est pas un langage ; On utilise le Javascript pour programmer les animations 3D, qui sont ensuite insérées dans le HTML à l’aide des éléments <canvas>.

Un des grands intérêts de WebGl, est de pouvoir utiliser, via OpenGl, les capacités des GPU des cartes graphiques pour les calculs d’affichage des objet 3D. Cela permet d’avoir de très bons rendus avec des temps de chargement acceptables.

WebGl est actuellement dans sa version 2.0 et semble être présent aujourd’hui sur la plupart des postes des internautes. Comme nous le montre le graphique ci-dessous, plus de 90% des devices (Mobiles – Desktops – Tablettes) permettent d’utiliser le WebGL, donc pourquoi s’en priver ?

C’est bien jolie la 3D, mais est-ce vraiment utile ?

Et bien cela dépend, comme souvent, du site que l’on veut faire, du budget, et de la cible que l’on veut toucher.
Les animations en WebGl ont l’avantage, par rapport à une simple vidéo, de permettre une grande interaction avec l’utilisateur, de se déplacer dans une scène, d’interagir avec des éléments … via la souris ou le clavier, ou, dans une utilisation plus poussée, grâce aux possibilités des téléphone mobiles (gps, accéléromètre, gyroscope…).
C’est aussi une technologie innovante, induisant une image positive en matière de nouvelle technologie ou d’innovation technique.

Voici quelques secteurs où la technologie WebGl semble être très présente, et à juste cause :

Visualisation de données

En temps réel ou non, WebGl semble très apprécié des développeurs pour permettre d’afficher des données complexes et permettre une représentation la plus visuelle possible (en 3d donc…).

Voici deux expérimentations de Google sur le WebGL. La première sur l’évolution de la population dans le monde (http://globe.chromeexperiments.com/) et l’autre la répartition des requêtes sur leurs moteurs de recherche, par langue (http://globe.chromeexperiments.com/search)
Un autre exemple, une représentation des échanges économiques à travers le monde : http://globe.cid.harvard.edu/
Et un dernier pour bien comprendre l’importance du réchauffement climatique : https://www.chromeexperiments.com/experiment/temperature-anomalies-200-years

On constate dans tous les cas que la représentation des données en 3D est plus agréable et plus compréhensible que le serait un simple graphique ou un tableau.

Automobile/Aérospacial

A la pointe de l’innovation technique, les acteurs de ce secteur ont tout à gagner à utiliser les possibilités du WebGl. Il permet, d’une part, de créer des sites dynamiques, innovants, avec ou sans Realité Virtuelle, mais surtout de montrer qu’ils maîtrisent complètement leur environnement technique et utilisent les dernières technologies, jusque sur internet.

Découvrir la station spaciale internationale : http://www.boeing.com/space/international-space-station/index.page#/hotspot/start3D
Voyager sur mars avec la Nasa : https://eyes.nasa.gov/curiosity/
Une expérience de Réalité Virtuelle avec Peugeot (se munir de lunette de réalité virtuelle): http://www.catchthedragon.nl/
Une expérience multi-plateformes (Desktop – Mobile) avec air Iberia : http://flight.iberia.com/desktop/

Cinéma / Jeux vidéo

WebGl permet de créer des sites de plus en plus impressionnants, avec des animations poussées, des vidéos, et surtout des interactions avec l’utilisateur, un peu comme un jeu vidéo ou un film interactif. Une vraie mine d’or pour les acteurs des ces deux secteurs. En effet, ils permettent aux fans ou aux futurs spectateurs de se projeter dans l’univers du film ou du jeu vidéo avant sa sortie. Voici quelques exemples :

Un site participatif pour le jeu Halo, où l’on poste des messages qui vont matérialiser le casque du héro du jeu vidéo : http://visualizer.halowaypoint.com/
Un jeu de course dans l’univers de Mad Max, associé au dernier volet de la saga : http://madmaxpursuit.warnerbros.fr/
Un site magnifique où les futurs joueurs pouvaient créer leurs personnages et interagir dans une vidéo époustouflante et interactive : http://www.awwwards.com/web-design-awards/assassin-s-creed-unite
Un site dédie au jeu Batman Arkham Knight : https://www.batmanarkhamknight.com/

Au final …

WebGl ne touche pas seulement ces secteurs d’activité. C’est une technologie de plus en plus présente sur la toile, qui permet de faire des sites de plus en plus poussés. Plus que des sites, ce sont des expériences interactives que l’on nous propose, mélanges de vidéos, d’animations, de sons, d’interactions…
Il a su s’imposer comme un standard dans le développement d’applications 3D, notamment grâce à sa capacité à utiliser les GPU et les nombreuses librairies Javascript qui permettent de simplifier (un peu…) son intégration en HTML.

Pour terminer, voici un florilège des sites/applications trouvés ici et là sur la toile … et n’oubliez pas de brancher vos écouteurs.

Retour