22 Aug 2014

De la 3D dans vos pages HTML

Rétrospectivement, nos histoires de web 2.0, c’était quand-même de la rigolade. En fait, ils se marreront bien nos petits-enfants en voyant sur quoi on s’ébahissait à notre époque.

Rétrospectivement, nos histoires de web 2.0, c’était quand-même de la rigolade. En fait, ils se marreront bien nos petits-enfants en voyant sur quoi on s’ébahissait à notre époque.

Si l’on se penche sur les vingt dernières années, on s’est émerveillé devant les premières interfaces graphiques « WYSIWIG » et « point and clic ». Puis les premiers jeux en 3D, l’arrivée d’internet dans les foyers, découlant sur des possibilités d’interactions « sociales » totalement nouvelles : le web 2.0 et toutes ces innovations qui permettent à l’homo sapiens moyen de communiquer à grande échelle, généralement pour exprimer son mécontentement et participer à faire monter la mayonnaise (mais ceci est un autre sujet). Plus récemment, on a eu droit à la mobilité : des ordinateurs puissants connectés à internet grâce à une débauche de périphériques tous plus petits gros ergonomiques différents les uns que les autres…

Je me rappelle aussi avoir flashé sur les premières interfaces graphiques dotées de l’accélération matérielle : Enlightenment, Looking Glass puis Compiz ont précédé les interfaces Microsoft Aero et Apple Aqua. Alors étudiant, j’avais du mal à m’imaginer à quoi ressembleraient les interfaces graphiques à l’avenir. J’y voyais forcément de la 3D, et je me trompais : mis à part le cube de Compiz, l’accélération matérielle est principalement employée pour fluidifier les interfaces.

Aujourd’hui, ce sont les nouvelles fonctionnalités de HTML5 qui me laissent à penser que bientôt, c’est l’ensemble de la toile qui va (encore) muter, en profondeur : entre autres, l’usage des sockets, des workers et de webgl – associés au déploiement de la 4G et de la fibre – me laissent à imaginer que bientôt, on verra apparaître des jeux vidéos multijoueurs d’un niveau de qualité comparable aux jeux consoles actuels… Sauf que ceux-ci seront codés en Javascript et ne nécessiteront pas que les joueurs investissent dans un matériel onéreux pour jouer.

Bref, revenons à nos moutons. Aujourd’hui, ce sont les frameworks comme pixi.js ou three.js qui nous intéressent. Avec une facilité certaine, il est désormais possible d’exploiter la puissance des cartes accélératrices via WebGL pour fabriquer des environnements virtuels bien léchés, fluidifier le déplacement de nos calques ou appliquer des effets de lumières impressionnants. Poubelle donc nos vieux sites constitués de pages et d’hyperliens. Poubelle nos jeux en Flash.

Je n’ai donc pas pu résister. J’ai créé un petit monde virtuel, tout simplet sous Blender : j’ai édité une forme simple (une bouée) pour en faire une sorte de grotte circulaire, puis j’ai exporté tout ça dans un fichier Javascript grâce au script qui va bien.

grotte2J’ai ensuite joué avec Three.js : en quelques lignes, j’ai créé un environnement 3D, ajouté ma grotte, quelques textures, un peu de lumière et défini un chemin circulaire pour simuler une balade dans la grotte. Pour profiter un peu plus de la sensation de 3D, j’ai ajouté la possibilité de bouger la tête avec la souris.

grotte1Le côté intéressant de la chose, c’est que je ressens cette même interrogation de j’avais étant étudiant : avec ce florilège de nouvelles technologies à porté de clavier, comment va muter le web ? Quand je repense aux changements apportés par le web 2.0, alors qu’aucune réelle innovation technologique n’est apparue à ce moment-là, on est en droit d’imaginer que cette fois, le changement, c’est maintenant… ou pas, ça ne serait pas la première fois que je me trompe :o)

Alors attendons – juste un peu encore – que WebGL soit activé par défaut sur les navigateurs pour mobiles, et l’on devrait voir apparaître un paquet de sites web 3.0 ou 4.0 (comme vous voulez).

grotte3voir la démo en live