WebGL, la 3D, c'est maintenant dans votre navigateur

Par Stéphane Verdier

Mini-conf (15 mn) :

Langue :

Français

WebGL

Liens connexes

• Diaporama (PDF)

Présenté par

Stéphane Verdier

Webmaster/intégrateur web depuis 10 ans, fervent défenseur des standards du web, de l'accessibilité et des logiciels libres, il est également formateur depuis quelques années en intégration web et HTML/CSS. Après plusieurs années en collectivité territoriale et un passage par l'École Nationale de la Magistrature, il est fait parti aujourd'hui de la cellule web de la Communauté Urbaine de Bordeaux où il travail notamment sur des problématiques de redesign et d'améliorations continues. Curieux insatiable, le web est pour lui un sujet de découverte permanent.

Transcription

(Merci à Tanguy Lohéac pour la transcription.)

Bonjour à tous. Je m’appelle Stéphane Verdier.
Je vais vous présenter quelque chose qui m’a un peu tapé dans l’œil cette année qui est la technologie WebGL qui vous permet en fait de faire de la 3D en temps réel dans le navigateur.
En soi, c’est pas très nouveau.
Sauf que là, ce qui est nouveau c’est que c’est un nouveau standard qui arrive.
Et c’est excessivement puissant.
Alors ce que vous voyez là comme slide d’accueil, ça tourne en temps réel dans le navigateur.
Ça tape directement dans les capacités de la carte graphique.
Pour donner une petite idée, je peux bouger le truc directement.
Et là ça tourne à 50 images/s. [applaudissements]
J’y suis pour rien, hein. [Rires]
C’est quelqu’un de largement plus talentueux que moi qui a fait ça.
J’ai juste intégré pour vous montrer.
Ça c’est aujourd’hui.
Et il y a quelques années, je fais un petit retour en arrière, histoire de contextualiser les choses, il y a quelques années, quand on voulait faire de la 3D, on n’avait pas énormément de moyens.
En gros, on avait DHTML.
C’était difficile.
C’était long.
Parce qu'il y avait énormément énormément de code à écrire.
C’était peu performant, dans le sens où pour avoir peu il fallait faire beaucoup.
Enfin, les difficultés étaient très très nombreuses.
Donc, là je vous ai mis une capture d’écran d’un petit exemple qui date, je crois de 2005 ou 2006.
On est proche de l’exploit au niveau du codage.
Donc là on arrive quand même… on interagit au clavier quand même pour faire tourner cette étoile.
C’est des divs qui sont torturées dans tous les sens à coups de javascript.
Le gars qui a fait ça est vraiment très très fort.
Bon, l’autre solution, ben c’était les plug-ins.
Donc là, en gros, on a Flash et javascript.
On est sur du propriétaire.
On a toujours le truc là, il faut installer le plug-in.
Donc pour l’utilisateur c’est déjà un frein.
On a un peu de standard quand même.
On a VRML et X3D.
Bon, c’est des technologies qui à la bas en sont pas mauvaises mais elles ont pas vraiment émergé.
Alors, pourquoi ? On se pose la question.
Mais en attendant, avec ça, on a de la vraie 3D, on est temps réel.
Par contre on est gourmand en processeur en mémoire parce que là, le processeur il faut qu’il fasse tout de A à Z.
Bon, Flash c’est le grand vainqueur de l’histoire à cette époque-là.
Parce que bon, il a de véritables capacités graphiques, il est performant, il faut bien l’avouer.
Et du coup ça a permis de mettre en place de vrais moteurs de rendu.
Donc là, on a des choses qui sont très sympas.
Et c’est notamment grâce à ça que le jeu sur Internet a pu émerger avec les fameux jeux en Flash, dont aujourd’hui Facebook est bien connu pour ça.
Donc là je vous ai mis quelques exemples de moteurs de rendu parmi les plus connus.
Il y en avait beaucoup d’autres aussi.
Ça c’était avant.
Aujourd’hui bon, ça a un peu évolué.
Il y a HTML5 qui est arrivé, et en particulier la balise canvas qui permet donc de manipuler directement de l’image à l’intérieur du navigateur.
Et puis surtout, c’est la première spec qui établie du WebGL qui en fait est un portage de openGL par l’intermédiaire d’une API javascript.
Donc là, ceux qui connaissent javascript, directement vous pouvez animer et bouger tout ce que vous voulez à l’intérieur de canvas.
Alors c’est un groupe d’industriel, le Khronos Group qui travaille là-dessus et notamment qui est en train de préparer, on va dire, l’équivalent pour le mobile.
Donc c’est très très chaud.
Il y a quand même des prérequis.
Ben le premier c’est que faut que vous ayez une carte graphique 3D parce que ben cette technologie elle va directement taper dans le GPU de la carte graphique, qui soit compatible OpenGL.
Il vaut mieux.
Egalement des pilotes à jour.
Parce qu'il y a des fois vous avez la carte graphique, mais le pilote est pas à jour pour OpenGL.
Evidemment, un navigateur moderne.
Parce qu’au fur et à mesure des nouvelles versions de navigateurs, vous avez de nouvelles implémentations de WebGL qui apparaissent.
Alors des fois c’est pas forcément très visible.
Mais c’est à chaque fois un élément supplémentaire, donc c’est toujours intéressant d’avoir la dernière version.
Bon, vous remplissez pas l’une de ces conditions, WebGL s’active pas.
Comme c’est du javascript, vous injectez pour votre utilisateur un message qui lui dit : bon là ça va pas marcher. Faut faire autre chose.
Ou alors vous pouvez activer une image.
Donc là, par exemple, il y a l’exemple d'EvE Online que j’avais trouvé qui était bien intégré.
Voilà, si ça veut marcher.
Donc là par exemple, directement vous voyez le vaisseau avec lequel vous pouvez jouer lorsque vous activez le jeu.
Donc là ça devient interactif directement dans le navigateur.
Bon là, sur le côté, vous pouvez choisir un autre.
WebGL est pas activé ? ben vous avez une image de ce que vous auriez dû voir.
Donc au pire, ou au mieux.
Enfin vous avez quand même quelque chose à voir.
Ça c’est… ah oui je me trompe, ça sera pour après. Hop !
Actuellement, le déploiement de WebGL ?
Ben en fait, j’étais surpris en étudiant tout ça, c’est qu’il est quand même déjà assez important.
La spec a, je crois, moins d’un an.
Et aujourd’hui, quand on se base sur les stats que font WebGL stats, on a quand même 65% des utilisateurs qui ont WebGL d’activé.
Donc c’est plutôt encourageant pour le début.
Pour savoir un peu où ça en est, 2 adresses caniuse.com, et puis webglstats et qui font déjà un petit tour d’horizon de là où ça en est,
Quel navigateur fait quoi.
Par contre, pour ce qui est d’Internet Explorer, là c’est encore l’inconnu.
Ou plutôt, c’est connu.
Vous êtes obligé de passer par un plug-in.
Donc il y en a un qui rattrape bien le coup c’est iewebgl.com si vous voulez l’adresse directement.
Pour vous donner une petite idée, la 3D, comment ça fonctionne :
Parce que là, on n’est pas dans du CSS. On est vraiment dans de la pure 3D.
La 3D, c’est un modèle mathématique vectoriel.
Ce sont des points.
Tous ces points permettent de former des arêtes.
Et grâce à ça, on a des faces.
On crée des polygones.
Et tout ça c’est ce qu’on appelle le modèle.
Alors avec ça on en fait plein.
On modélise.
Plus vous avez de points, plus c’est précis.
Par contre, plus vous avez de points, plus c’est compliqué à calculer.
Alors le GPU de la carte graphique, lui son truc c’est les points, il adore ça.
Il est fait…. Il y a des matrices à l’intérieur.
Par contre, le processeur de l’ordinateur c’est moins son truc.
Donc c’est bien que du coup la carte graphique elle fasse bien son boulot.
Alors pour que ce soit joli, bon là vous avez vu des points, ce qu’on appelle le rendu fil de fer.
Pour lui donner un aspect joli, réel, le mieux possible, on l’habille de matériaux, ce qu’on appelle également des shaders.
Donc là vous avez quelques exemples de rendus de ce que ça peut donner.
Puis comme dans la réalité, ben on nous voit parce qu’il y a de la lumière, ben dans la 3D, ben c’est pareil.
Et puis, pour voir ce que l’on a fait, parce que là c’est toujours dans l’ordinateur, c’est toujours calculé dans l’ordinateur, faut une caméra virtuelle.
Pas une comme ça hein.
C’est une caméra virtuelle, elle existe pas pour de vrai.
Mais ça permet d’avoir une sortie sur le truc.
Par contre, faut le voir sur votre écran.
Alors là il y un nouveau processus : la rasterization.
C’est-à-dire qu’on va convertir tout ce qui était calculé précédemment sous forme de pixels pour les afficher sur votre écran.
Ce que vous avez vu tout à l’heure en page d’accueil, tout ce que je viens d’expliquer là ça le fait 50 fois par secondes.
C’est pour vous donner une idée de la puissance du truc.
Pour générer du code pour WebGL bon, vous avez vos petits doigts.
C’est long quand même hein !
J’en ai parcouru un peu pour voir comment c’était fait. C’est quand même long.
Mais vous avez des bibliothèques qui sont très bien faites.
Je vous cite là les plus connues pour l’instant.
Il y en a plein qui sont en train d’arriver.
Les exemples que je vous montre sont faits avec les deux premières.
Ça vous permet d’avoir un code déjà plus léger et puis ça automatise énormément de choses.
Je vous parlais de modélisation 3D.
Donc là on rentre dans un domaine de design 3D.
Je vous donne des exemples des gros logiciels du marché.
Il y a également Blinder qui est open source et libre et gratuit.
Tous ces logiciels-là ont des exporteurs qui vous permettent de… tout le travail de modélisation qui a été fait, de le porter ensuite en format JSON par exemple, ou même OBJ qui est directement capturé.
Alors, on va aller voir WebGL en action maintenant.
Alors, ça c’était… hop je voulais vous montrer ça avant.
Donc là c’est pas une police de caractères en tant que telle.
Elle a été déjà vectorisée.
Et là directement, vous voyez j’ai tapé au clavier, tout ça s’est généré en temps réel.
En plus c’est rigolo, on peut changer la couleur. Hop.
Alors là j’ai changé la font, et puis là c’est la couleur.
Et ça c’est calculé en temps réel, plusieurs fois par secondes.
Alors, on va peut-être rafraîchir un peu.
Donc là par exemple vous avez 2 000 cubes qui ont été générées, à l’instant, sous vos yeux [murmures dans la salle], voilà.
Ça c’est juste une petite démo technologique.
C’est pour voir ce qu’il a dans le ventre.
Donc là je fais la même chose, mais avec 5000.
Et en plus, ils sont assemblés les uns avec les autres.
Bon, faut lui laisser le temps que ça chauffe un peu.
Ah non [rires et début d’applaudissements]
Voilà ! [Rires]
Donc ça c’était l’effet Bolnaldi. [Rires]
Bon, ben pendant que ça chauffe de l’autre côté, j’avais prévu le coup.
Donc voilà, c’était censé donner ça. [Rires + applaudissements]
Pendant que ça se relance, en espérant que je vais pouvoir vous montrer la suite.
Je voulais vous montrer ça.
Donc là, sur cette démo-là, vous avez de l’eau qui est générée en temps réel.
Vous avez une balle dessous, et vous promenez la balle.
Ce qu’on appelle les caustiques, en fait ce sont les éclats de lumière et les reflets qui se forment en temps réel.
Ça c’est tout généré en temps réel.
Vous promenez votre souris sur l’eau et c’est comme si vous trimballiez la main dans l’eau.
Ça vous fait des ronds dans l’eau bon…
Donc tout ça c’est en temps réel.
Donc si ça redémarre pas, ben je vous conseille d’aller voir la petite adresse qui est en bas pour le faire tourner sur votre navigateur.
Là, j’aime beaucoup.
Là on voit peut-être pas très bien.
C’est ce qu’on appelle des métaballs.
C’est-à-dire qu’en fait c’est des balles mais qui se… comme du caoutchouc, qui s’assemblent les unes aux autres.
Et là, directement sur cette démo-là, on peut voir que directement bon on change le shader, la lumière etc…
Tout ça ça se fait en temps réel.
Maintenant une application, enfin des applications plutôt.
Alors du coup, je les aurais préchargées, ç’aurait été bien de les avoir directement.
Donc là par exemple, la présentation produit.
Donc pouvoir présenter le produit. Directement l’utilisateur il peut le manipuler en ligne.
Ben du coup ça rend les choses beaucoup plus interactives.
Et là, par exemple, si vous décidez de changer de voiture, ben là il y a une démo qui avant a existé en Flash.
Sauf que là, c’est pas du Flash.
Voyez ! Ça se génère sous vos yeux.
Et là, le temps que ça finit de se charger, je peux y aller direct.
Je peux faire le tour de la voiture.
Voilà. Elle est dans un garage.
Et puis, par exemple, ben je vais lui changer la couleur.
J’aime bien le bleu.
Voilà, donc c’est en temps réel.
Après, il y a un autre secteur qui s’empare de ça, c’est le jeu vidéo.
Alors là j’espère que je vais l’avoir.
Alors là, au niveau du jeu vidéo, ça sort très très fort.
J’ai vu beaucoup d’exemples qui sortent d’expérimentation.
Il y a même du FPS qui est en train d’être développé.
Donc là c’est Wipeout, c’est un jeu des années 90 que vous avez peut-être connu.
Donc là, ben c’est parti.
Voilà. Et ça c’est du temps réel.
Là vous êtes dans le navigateur.
Et vous jouez comme si vous étiez sur la console.
Bon j’étais pas venu pour ça. C’était juste pour vous montrer. [Rires]
Bon, plus sérieux, plus sérieux, par exemple pour tout ce qui est sciences, études.
Par exemple, étude de fonction directement ici.
Voilà, là vous avez la fonction.
Vous pouvez la… et puis vous pouvez la changer.
Hop ! Je mets 3. Voilà.
C’est recalculé en temps réel.
Si vous voulez la version en grilles.
Voilà donc ça sert à plein de choses.
Alors il y a mon fils il y a quelques temps qui me disait : papa c’est gros comment une planète ?
Il a 5 ans. Pour lui expliquer ça…
Déjà que pour un adulte c’est pas évident de comprendre.
Je dis ben tiens. Qu’est-ce qui existe sur le web ?
Et par exemple, avec des applications comme ça, je peux lui montrer que Mars ça tourne beaucoup plus vite que la Terre.
Et que Mars est quand même beaucoup plus petite que Vénus.
Et qu’une planète gazeuse ça ressemble pas à une planète comme la nôtre.
Et donc là, ben directement, dans le navigateur…
Puis en plus j’en avais trouvé une autre.
Bon, là je vous l’ai pas mise parce que je peux pas tout montrer non plus.
Mais carrément on interagit :
On regarde la Lune qui tourne autour de la Terre.
Sur d’autres… voilà sur d’autres exemples, c’est intéressant.
Ensuite, ben par exemple la représentation de données.
Ça j’aime beaucoup par exemple.
Donc là c’est une représentation qui vous donne une idée du volume de population sur la Terre en 90.
Et puis hop ! On passe en 2000.
Voilà.
Alors là, une autre représentation de données.
Ouais ça a l’air de bien charger là.
Là ici par exemple, sur celle-là, on va vous montrer les tempêtes qu’il y a eu sur Terre sur une période donnée.
Donc, en bas vous avez une timeline.
Vous pouvez vous balader sur la timeline et puis directement vous allez voir le truc.
Donc là, ben je suis obligé de conclure.
Donc j’arrive à la fin hop hop !
Donc WebGL, moi j’ai été scotché quand j’ai pu voir tout ça.
Et franchement, là on a quelque chose qui est standard.
Et certes, c’est jeune, mais au niveau des possibilités, vous avez quelque chose d’énorme entre les mains.
Donc, pour peu que vous soyez développeur, que vous vous intéressiez à ce genre de choses, au niveau de l’interactivité d’un navigateur, c’est vraiment très très fort.
Donc jetez un œil à ce qui se passe.
Il y a des choses qui sont de plus en plus nouvelles, et vraiment très très intéressantes.
Je vois des expériences qui sortent, je dirais presque tous les jours.
Et vraiment il y a du bluffant, il y en a énormément sous la pédale.
Donc moi je vous dis aujourd’hui : inventez ce qui va avec !
Parce que là, on a un outil supplémentaire, il est excessivement puissant.
Je le trouve très prometteur.
C’est pas pour rien que le jeu vidéo s’en empare de façon très très forte, parce que là-dessus ils sont souvent très en pointe.
C’est ouvert.
Voilà, donc je vous remercie pour votre attention. [Applaudissements]
Et puis, soyez curieux !
Allez voir ce qu’il y a sur le web !
Parce que franchement il y a des choses qui sont très très bluffantes.
Voilà, merci beaucoup. Au revoir.
[Applaudissements]