PRÉSENTATION
Début décembre 2018, nous avons déménagé dans la pépinière d’entreprises du château de Thouars à Talence. Animés par l’envie d’innover et de proposer du contenu interactif, nous avons souhaité présenter, à notre manière, ce patrimoine qui rythme nos journées. A travers une expérience innovante sur support papier, envoyée par courrier et visualisable sur n’importe quel support numérique, nous avons présenté nos vœux 2019.
Cette technologie, de plus en plus utilisée grâce aux évolutions des navigateurs web, a de multiples possibilités telles que configurateur de produits, jeux, expériences interactives pour l’événementiel etc.
WebGL a permis de créer de riches expériences interactives sur de nombreux appareils et navigateurs. Outre la technologie, cette approche apporte à l’utilisateur une nouvelle façon d’apprendre, d’interagir dans un univers web, non plus 2D, mais immersif, en 3D.
LES POSSIBILITÉS
Rentrons un peu plus dans la technique. Afin d’imaginer les possibilités qu’offre la technologie webgl, l’équipe a séquencé en plusieurs étapes la conception du produit.
La modélisation de la scène sous « blender »
L’étape de modélisation a été de représenter le château dans un univers « low poly ». Le but ici est d’aller à l’essentiel tout en proposant un rendu de qualité.
La mise en place de la scène avec three.js
Three.js est une bibliothèque Javascript, développée par Ricardo Cabello en 2010. Ce framework est parmi les plus utilisés pour l’intégration de projets webgl. Ici, l’objectif est de proportionner le projet dans son espace avec les dimensions et les différents objets à positionner sur la scène.
Les actions de base zoom, déplacement dans la scène en fonction d’un point fixe
La principale fonctionnalité du webgl est de pouvoir naviguer dans une scène, zoomer/dézoomer sur des éléments et se déplacer. Nous avons pris en considération tous les paramètres des appareils, clic/scroll et pinch/touch sur mobile
L’installation des lumières
La lumière est l’une des contraintes les plus importantes dans un rendu 3D. Dans la scène, nous avons positionné deux lumières. Une lumière ambiante, qui illumine la scène générale et, une lumière directionnelle, pour mettre en avant le relief. De plus, la particularité de notre expérience est que la lumière se déplace dans le temps afin de représenter le cycle complet d’une journée
La gestion des couleurs en fonction de l’heure
Nous l’avons vu précédemment, la lumière a été utilisée pour représenter le cycle d’une journée. En fonction du cycle de la lumière, la couleur que nous percevons change. Pour arriver à ce résultat, nous changeons la couleur d’un objet avec un dégradé qui part de la couleur nuit vers la couleur jour.
Événement (clic & animation)
Pour intégrer cette scène dans une interface web dynamique, nous avons ajouté des « call to action » sous forme de bouton, mais également directement sur la scène. Il est possible de cliquer sur le logo afin de lui faire jouer une action. Ici, nous avons choisi de pouvoir jouer une animation avec notre logo.
L’intégration de particule (feux d’artifices)
Ce spectacle pyrotechnique visible seulement de nuit a été intégré à partir de particules. C’est le petit plus du projet, qui apporte ce côté dynamique et festif à la nouvelle année. Positionnées dans la scène, les déplacements se font aléatoirement en fonction de points définis dans l’espace.
Mouvement de caméra
Lorsque l’utilisateur arrive sur la scène, nous avons souhaité le mettre dans l’ambiance d’un univers en trois dimensions. Comme une scène de cinéma, nous avons réalisé un mouvement de caméra fluide.
