De Flash au WebGL, la petite histoire
Il y a quelques années, de nombreuses agences de communication se spécialisaient dans la technologie Flash, qui permettait la mise en place d’animations ou de jeux en 2D ou 3D. Quoique bien installé dans le monde du web, Flash s’est vu profondément impacté lorsqu’Apple a désactivé cette technologie sur ses terminaux. Steve Jobs avait même écrit une lettre ouverte expliquant les raisons de ce choix. Les animations Flash ont ensuite progressivement disparu au profit du HTML5, du CSS3 et du JavaScript, qui ont évolué pour favoriser la création d’animations avancées.
Mais pour concevoir des éléments graphiques animés complexes, le HTML5 ne suffit pas toujours. C’est là qu’intervient le WebGL : bien qu’il soit supporté par la plupart des navigateurs web depuis déjà plusieurs années, cette technologie demeure méconnue du grand public et son usage commence tout juste à se répandre.
Qu’est-ce que le WebGL et à quoi sert-il ?
Le WebGL (pour Web Graphics Library) est une spécification d’interface de programmation (API) qui donne accès au standard OpenGL dans le cadre d’applications web. En d’autres termes, le WebGL permet d’intégrer des animations dynamiques 2D ou 3D complexes sur un site web sans obliger l’utilisateur à installer un plugin sur son navigateur (comme le faisait flash ou java).
Les agences web commencent progressivement à intégrer la technologie WebGL dans le panel de leurs compétences afin de pouvoir imaginer des expériences toujours plus poussées. Créer un environnement où l’utilisateur est impliqué, favoriser l’interactivité avec la marque : le WebGL offre ces possibilités et permet aux designers et développeurs d’imaginer de nouvelles mécaniques.
Étude de cas : faites un vœu grâce au WebGL
À l’approche des fêtes de fin d’année, Couleur Citron a souhaité offrir à ses clients une expérience digitale inédite, intitulée « Faites un vœu ». Fidèle à son identité alliant pragmatisme et poésie, l’agence a développé un site web permettant aux internautes de partager leurs vœux pour la nouvelle année sous forme d’étoile. Tous les vœux formulés étaient réunis dans une constellation en 3D consultable par tous. Ce concept délicat nécessitait une approche novatrice sur le plan technique ; l’équipe a opté pour le WebGL.
Transformer des vœux en étoiles grâce au WebGL
Attention, paragraphe un peu technique ! Pas d’inquiétude, il est court 😉
La forme de la constellation est basée sur une géométrie de forme sphérique sur laquelle les étoiles vont se placer aléatoirement. Pour un obtenir un effet destructuré, il faut ajouter un nombre aléatoire limité à la position Z. Pour les animations, les équipes ont choisi le système de Timeline de GSAP et l’extension « OrbitControls » pour la manipulation de la galaxie 3D. Afin d’éviter les messages injurieux ou diffamatoires, un dispositif de modération des commentaires a été prévu via un backoffice basé sur le framework PHP Laravel.
La constellation des vœux est basée sur un système de particules natif à la libraire Three JS. Un nombre à la fois suffisamment élevé et raisonnable de particules a été défini afin d’optimiser les performances du site. Au chargement de la page, les vœux déjà émis et stockés en base de données sont récupérés et chacun associés à une particule, constituant ainsi la constellation 3D. L’excédent de particules qui n’ont pas encore de vœu est placé hors champ.