Édition Nº27 du 13 novembre 2012 Retour au sommaire

Introduction à WebGL

Nous abordons habituellement des sujets où le Web reste à plat sur nos écrans, mais si on se mettait à l’envisager en 3 dimensions et à imaginer le champ des possibles qui s’ouvrent alors à nous. C’est ce que nous propose cette semaine Stéphane Verdier, à propos de WebGL.

Conducteur


Stéphane Verdier

Arrêts prévus :

Le 11 février 2011, la spécification WebGL 1.0 a été publiée par le Khronos Group − association d’industriels des domaines de l’informatique, du graphisme et du web. Basée sur l’API OpenGL ES 2.0 (Open Graphics Library for Embedded Systems), elle ouvre aujourd’hui aux navigateurs de dernière génération l’animation 3D en temps réel directement intégrée dans les pages web de façon ouverte, standard et performante.

Ajouter de l’image 3D au sein du navigateur a été depuis longtemps une gageure ou un mythe. Des tentatives de création de moteurs 3D en Javascript ont été faites dans les années 2000, mais cela est resté proche de la démonstration technologique ou du tour de force technique : ni Javascript ni les navigateurs n’étaient vraiment taillés pour ce genre de performance et permettre une réalisation en production.

La seule alternative viable, performante et véritablement utilisable est restée dans le giron des plugins propriétaires. Le grand vainqueur dans ce domaine est Flash qui a permis grâce à ActionScript de voir apparaître des moteurs de rendu 3D très performants et d’une qualité graphique indéniable. Ainsi de nombreux jeux en ligne ou applications interactives ont vu le jour.
Mais bien sûr, pour l’utilisateur, cela nécessite toujours l’installation d’un plugin, ce qui est souvent un frein à l’utilisation de ces technologies.

Aujourd’hui l’arrivée de WebGL change la donne

WebGL est le portage du standard OpenGL ES 2.0 pour les navigateurs web.
Le Khronos Group a mis au point la spécification pour créer une nouvelle API Javascript pour les navigateurs, afin de leur permettre d’atteindre directement les capacités matérielles des cartes graphiques 3D. Cette API permet de bénéficier de toute la puissance de traitement de ces cartes graphiques pour obtenir des images et des animations en temps réel directement dans la balise <canvas> d’HTML5.
Le rendu s’effectue plusieurs dizaines de fois par seconde sans surcharger le processeur de l’ordinateur puisque c’est le GPU qui fait tout le travail.

Bien sûr, il y a quelques contraintes et pré-requis

Pour que WebGL soit activé il y a trois conditions à réunir :

  • posséder une carte graphique 3D compatible OpenGL ;
  • des drivers – ou pilotes – à jour ou récents pour cette carte, eux aussi, compatibles OpenGL ;
  • et un navigateur web de dernière génération qui soit le plus récent possible, car à chaque nouvelle version, les constructeurs de navigateur implémentent de plus en plus de spécifications de WebGL.

Pour vous faire une idée de l’étendue de la prise en charge par navigateur, consultez la rubrique WebGL de Can I Use.

Selon WebGL Stats il y a potentiellement 64 % des utilisateurs qui ont WebGL activé. C’est un très bon début pour une spécification qui a moins de 2 ans, et cela permet d’ores et déjà d’envisager des mises en production à l’aide de cette technologie. Le monde du jeu vidéo ne s’y est d’ailleurs pas trompé !

HexGL, jeu de course futuriste en HTML5
HexGL est un portage de WipeOut avec les technologies Web

Que faire si WebGL ne s’active pas ?

Un ou plusieurs pré-requis ne sont pas satisfaits ? Aucun souci : comme nous manipulons du JavaScript il est très facile de prévoir un fallback.
Cette solution de remplacement peut être un message d’erreur ou comme dans le cas d’EvE Online, que je trouve très bien fait, d’afficher une image qui montre le modèle de façon statique. Ainsi on reste accessible et si WebGL est activé on gagne en information et en interactivité.

Vaisseau spatial dans le jeu EvE Online
Vaisseau spatial dans le jeu EvE Online

À noter qu’Internet Explorer ne supporte toujours pas WebGL. Le seul moyen pour contourner le manque d’implémentation est d’installer le plugin IEWebGL

Comment est constituée une image en 3 dimensions ?

WebGL s’appuyant directement sur le standard OpenGL, il en reprend la forme d’écriture du code, mais adaptée pour Javascript.
Le but étant de définir tous les éléments composant une image en 3 dimensions.

Les éléments principaux sont :

  • une scène ;
  • des vertex (ou points) ;
  • des arêtes ;
  • des faces ;
  • des matériaux ;
  • des lumières ;
  • et au moins une caméra virtuelle qui servira de point de vue pour le calcul du rendu de l’image.

Tous ces éléments sont définis mathématiquement selon un modèle vectoriel.
Ils peuvent être mis en place, par exemple à l’aide d’un logiciel de modélisation 3D tel que Blender, 3D Studio Max, Maya, Lightwave 3D, Modo, Cinema 4D, etc.

Blander meshes de base
Blander meshes de base chez sebsauvage.net

Les vertex ou points vont définir les sommets du contour des volumes modélisés que l’on souhaite représenter. C’est le matériel de base qui va permettre la génération des faces qui donneront du volume aux modèles.
Plus les points seront nombreux plus le modèle sera précis. Par contre, les calculs de rendu seront également plus compliqués et plus longs.

Pour habiller le tout et donner une consistance qui soit la plus réelle possible, les modèles vont être « habillés » de shaders. Ainsi on va simuler le métal, la pierre, le verre, etc. Un langage particulier de définition des shaders existe également au sein de WebGL. Il s’agit de GLSL qui est entrain de s’imposer afin de définir des shaders au delà de <canvas> pour tous les autres éléments HTML.

Comme dans la réalité pour voir un objet, il faut qu’il soit éclairé et donc que la scène 3D comporte au moins une source lumineuse.
Car pour l’instant elle n’existe que dans la mémoire de l’ordinateur !

Rendu final avec l’application de shaders différents
Rendu final avec l’application de shaders différents

C’est le processus de rasterization qui va interpoler l’image vectorielle en volume, dans notre cas, pour en faire une version 2D pixelisée.
Ce calcul est effectué plusieurs dizaines de fois par seconde pour obtenir une animation fluide et agréable qui sera affichée dans <canvas> !

Rasterization
Rasterization

Qu’est ce que WebGL a sous le capot ?

Pour vous donner une idée de ses performances, voici quelques exemples… il y en a encore bien d’autres !

Et le code dans tout ça ?

Je ne rentrerai pas dans le détail du code pour cet article, car ce n’est pas le sujet. Si vous vous intéressez à l’écriture du code pour WebGL, je vous recommande l’excellent site Learning WebGL qui permet de s’initier à cette technologie. Il propose également des leçons d’apprentissage.

Nous allons quand même voir un petit exemple pour comprendre le principe.

Je vous invite à aller consulter l’exemple indiqué dans le lien qui suit et qui a été réalisé par Jérome Etienne.
Il présente pas à pas de façon commentée (en anglais) un exemple de code pour la bibliothèque Three.js afin de générer et d’animer un cube.

Let’s do a cube
Let’s do a cube

S’aider de bibliothèques Javascript pour WebGL

Le code pour WebGL devenant rapidement complexe, long et fastidieux, des bibliothèques Javascript (sans cesses plus nombreuses) ont été conçues et mises en œuvre pour aider les programmeurs.
Voici une liste non exhaustive de celles qui sont le plus couramment employées. Selon votre projet, l’une ou l’autre sera plus adaptée.

À noter que ThreeJS est une bibliothèque légère et très performante qui permet de générer un rendu WebGL dans les balises <canvas> et <svg>. Elle connait une des plus forte adhésion auprès des programmeurs.
Attention toutefois, je vous déconseille de générer le rendu dans une balise <svg> car les performances ne sont pas au rendez-vous et il y a encore de sévères restrictions sur les shaders applicables.

Le site du Khronos group fournit une liste répertoriant la plupart des frameworks pour WebGL.

WebGL en production ?

Aujourd’hui l’utilisation de WebGL dépasse la simple expérimentation technologique et de plus en plus de projets l’utilisent en production.

Car Visualizer
Car Visualizer 360 degrés

Voici quelques uns des domaines où l’on peut voir WebGL en action :

Jeu vidéo

  • Lego – Mecabricks : Une façon sympathique, mais technique d’aborder le monde Lego. La prise en main demande un certain temps d’adaptation ;
  • HexGL : Vous pouvez directement jouer en ligne en deux clics. C’est encore en beta mais déjà très efficace ! L’esprit de WipeOut se retrouve bien dedans, et qui plus est, c’est un projet français !
  • Trigger Rally : Une course de rallye ludique où les effets du terrain sont reproduits grâce à un moteur physique. Je vous recommande vivement de l’essayer ;
  • Zombies vs Cow : Petit jeu avec une ambiance BD fort sympathique ;
  • WebGL Pool : Un billard très bien fait où il ne manque que le son. Pour une démonstration, il est très abouti ;
  • Quake WebGL Demo : Un petit coup de nostalgie avec cette reproduction d’un FPS mythique. Cela donne idée de l’avenir de WebGL dans le jeu vidéo…

Visualisation de données

  • Universeries : Un parcours de decouvertes et de redécouvertes des séries américaines dans un environnement 3D original. Le concept vaut le détour ;
  • Cloud globe : Visualiser dans le temps les grosses tempêtes qui ont parcouru la Terre. Ça a le mérite d’être très instructif en seul coup d’œil ;
  • Arms trade : Très beau design pour représenter les flux d’armes entre les pays. L’utilisation de la 3D apporte un plus saisisant très bien mis en œuvre ;
  • Real time color 3D histogram analysis : Très fort. Génération de l’histogramme des couleurs en volume à partir de la bande annonce d’un film. On a le choix entre 3 représentations et tout est interactif ;
  • World temperature changes from 1880 to 2011 : Simple mais très pédagogique. Cette représentation dans le temps de l’évolution des températures sur la Terre parle d’elle même. La 3D donne ici une dimension pédagogique qui donne tout son sens.
Représentation de la population mondiale
Représentation de la population mondiale

Cartographie

  • Google MapsGL : Il faut avoir WebGL d’activé pour que l’option soit proposée. Le gain se mesure au niveau de la fluidité ;
  • WebGL Earth : Portage d’Open Street Maps vers une version en volume qui se présente comme une alternative à Google Earth. Le projet en est à ses débuts.

Art – Design

  • Little Sun Sunlight Graffiti : Des Graffitis lumineux collaboratifs qui s’animent ;
  • Ellie Goulding Lights : Une expérience interactive faite de couleurs, de lumière et de musique ;
  • Sintel Goes Boom : Une bande annonce est projetée sur les faces de cubes qui forment un mur qui s’anime. La vidéo est un peu difficile à suivre mais l’effet obtenu vaut le détour ;
  • Nucleal : Un diaporama de photos se transforme en explosion de particules animées. Un spectacle à voir ;
  • Anaemia : La scène demo s’est bien entendu emparée de WebGL. Regardez, le détour vaut le coup d’oeil !

Représentation de lieux – Tourisme

Présentation de produits ou d’objets

  • Car visualizer : Choisissez votre prochaine voiture, sa couleur de carroserie, de jantes, etc. Vous pouvez zoomer et tourner autour de chaque modèle. Une très belle réalisation qui existait en Flash et montre que l’alternative ne fait plus aucun doute aujourd’hui ;
  • Pump : Plus technique, une pompe se monte pièce par pièce sous vos yeux ;
  • Sketchfab : Un projet français ingénieux qui propose une galerie de modèles 3D pour être parcourus et partagés. Une très belle vitrine pour WebGL.
Voiture en 3D depuis SketchFab
Voiture en 3D depuis SketchFab

Enseignement

  • Open Worm : Un projet ambitieux qui s’appuie sur WebGL pour la visualisation de tous les organes d’un ver ;
  • Jellyfish demo : La précision des modèles de cette démonstration permet d’imaginer des applications interactives pour découvrir des espèces animales ;
  • Planetoweb size comparison : Un moyen intéressant de comprendre notre univers et de visualiser la taille des planètes qui composent notre système solaire ;
  • Microscopix : Cette animation issue de la scène demo est, en dehors de sa beauté graphique, un modèle de précision dans la représentation et la simulation d’élèments microscopiques composants notre organisme.

Représentation mathématique et scientifique

Clip vidéo interactif

  • RO.ME : Un projet musical et graphique qui permet de vivre et d’interagir avec ce très beau clip vidéo. Le spectateur influe sur le déroulement du clip et peut parcourir le monde de la vidéo à la fin. Une expérience à faire !
Scène du clip RO.ME
RO.ME

Conclusion

Bien qu’elle soit encore jeune, WebGL est robuste et surtout pleine de promesses. C’est une technologie qui est très attendue car elle permet de s’affranchir du frein imposé par l’ajout de plugin. C’est également une API Javascript basée sur un standard éprouvé. Elle va donc communiquer directement avec le navigateur, ce qui est un atout de premier ordre pour son adoption.

La preuve de cette attente forte est l’implémentation rapide par les navigateurs. Le monde du jeu vidéo ne s’y est pas trompé non plus, car de nombreux projets l’utilisant sortent ou sont sur le point de sortir tel que HexGL ou Trigger Rally.

Maintenant, c’est à vous d’inventer le futur qui va avec !

Liens et ressources pour aller plus loin

Introduction à WebGL

Note de cet article : 3 / 5

Pour pouvoir noter les articles, vous devez voyager avec un billet (c'est gratuit !).
Toutes les infos sur la page d'abonnement !
Déjà inscrit ? Connectez-vous.

Webmaster, intégrateur web et formateur html/css. C'est après sa formation en communication qu'il tombe dans le web et se pique à html et css. L’abandon des tableaux de mise en page pour l'application des standards du web a été pour lui une révélation. Le travail en collectivité territoriale finira de le convaincre de la mise en œuvre des standards, de l'accessibilité et de défendre un web ouvert. Curieux insatiable, le web est pour lui une source de découverte et d'enrichissement qu'il aime à partager.

Pas (encore) de réactions (RSS)

Réagir à cet article

XHTML : Vous pouvez utiliser ces balises : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>