WebGL : créez une expérience unique sur votre site web

Grâce à la technique du WebGL, créez une expérience unique pour les utilisateurs de votre site web. Couleur Citron s’est lancé dans l’aventure pour pouvoir proposer à ses clients une véritable immersion tout en poésie à l’occasion de ses vœux 2018.  Dans cet article, vous pourrez entrevoir les possibilités offertes par le WebGL à travers cet exemple d’application concrète. Découvrez comment fonctionne le WebGL et comment il peut être utilisé pour votre site web corporate ou événementiel ! Pour vos projets web, avec le WebGL, la seule limite est votre imagination !

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.

Les websockets pour un dispositif cross-device

La synchronisation d’émission des vœux de tous les internautes est permise par la technologie Websockets. Dès qu’un vœu est envoyé, le serveur émet un événement à tous les clients connectés au flux. L’une des particules présente hors champ de la caméra va alors se placer derrière celle-ci et effectuer une trajectoire jusqu’à la constellation. Ainsi, l’internaute soumettant son vœu depuis son smartphone peut le voir propulsé sur son écran de PC ou de MAC en direct.

Autre exemple concret d’utilisation du WebGL

On peut citer ce bel exemple dans le domaine de la santé et des sciences du vivant : le site changegout.com, réalisé par l’agence canadienne Jam3. Destiné à sensibiliser les professionnels de la santé sur les idées reçues de la maladie de la goutte, le site se présente comme un « documentaire interactif ». Il permet notamment à l’internaute d’explorer les différents symptômes grâce à une forme humanoïde en 3D : voilà une application novatrice de la technologie WebGL !

Le WebGL a de l’avenir !

www.faitesunvoeu.cc a permis aux clients de Couleur Citron et à des internautes du monde entier d’envoyer plus de 700 vœux dans la galaxie ! Une animation récompensée par un « Prix Cosmique » par La Réclame qui a classé notre projet parmi les meilleurs vœux d’agence 2018 et par une mention honorable sur Awwwards.

La technologie WebGL est sans aucun doute vouée à être de plus en plus utilisée pour concevoir des expériences web immersives, d’autant plus à l’ère de la communication user-centric et de l’UX design ! En repoussant les limites de la création pour les professionnels du web, le WebGL est un outil idéal pour proposer des parcours utilisateurs à la fois innovants, affordants et efficaces !