Loading…
3D et motion — expériences web interactives
Ces projets explorent la manière dont la 3D interactive et WebGL peuvent rendre l’histoire d’un produit ou d’une marque tangible dans le navigateur. Chaque expérience relie le mouvement et les effets visuels à un parcours utilisateur précis.
- Rôle
- Développement web interactif et WebGL — conception, préparation des scènes 3D, travail des shaders et chorégraphie GSAP et du défilement pour chaque projet, de bout en bout.
- Technologies
- Three.jsReact Three FiberGSAP (ScrollTrigger)GLSL ShadersBlenderLenis
Vue d’ensemble
Un appareil photo qui devient un viseur ouvert sur les souvenirs de quelqu’un, un clavier dont chaque touche est un outil dispersé qui attend d’être réuni, des particules qui se transforment parce que le produit lui-même parle de transformation. Voici une collection de ces réalisations — des landing pages complètes construites autour d’une idée 3D et des études autonomes plus courtes consacrées chacune à une technique.
Des captures d’écran statiques ne rendent pas justice à ce travail — chaque page mérite sa 3D en la reliant directement à l’histoire qu’elle raconte.
Interface
Cinq histoires, cinq techniques
Everline — Présentation de location de voitures
Un parcours cinématographique, de l’allumage à la salle d’exposition — entrez dans un cockpit, puis découvrez une flotte sous un éclairage de studio.
Interface
Cinq histoires, cinq techniques
Everline — Présentation de location de voitures
Un parcours cinématographique, de l’allumage à la salle d’exposition — entrez dans un cockpit, puis découvrez une flotte sous un éclairage de studio.
Éléments du laboratoire
Toutes les idées n’ont pas besoin d’une page entière autour d’elles
Des études autonomes — une technique isolée, poussée plus loin que ne le demanderait une seule landing page.
Éléments du laboratoire
Toutes les idées n’ont pas besoin d’une page entière autour d’elles
Des études autonomes — une technique isolée, poussée plus loin que ne le demanderait une seule landing page.
Pierre de verre chromatique
Un nuage de particules enfermé dans un verre chromatique simulé — réfracté deux fois et soumis à un bloom isolé pour que la lueur reste contenue dans la silhouette au lieu de s’en échapper.
Configurateur de particules
Des dizaines de milliers de points GPU ombrés comme de la vapeur ou des sphères éclairées, qui se transforment entre plusieurs formes grâce à des contrôles en direct pour le placement, le mouvement et l’apparence.
Champ de shader strié
Une surface abstraite animée créée entièrement à partir de propriétés de matériau — des reflets et des lumières en dégradé se déplacent sur un shader pour simuler un champ ondulant et strié.
Approche technique
Cinq habitudes qui empêchent ces expériences de ralentir le chargement d’une page ou de faire chauffer un téléphone — développées au fil des projets, puis appliquées à chaque catégorie de travail.
Plus lourd à chaque fois, plus léger à chaque fois
01
L’optimisation des modèles commence dans Blender, pas dans le code01L’optimisation des modèles commence dans Blender, pas dans le code
Réduire le nombre de polygones et la taille des textures avant même qu’un modèle n’arrive dans le navigateur — le gain de performance le moins coûteux intervient avant l’écriture de la moindre ligne de Three.js.
02
Rien ne se charge avant d’être nécessaire02Rien ne se charge avant d’être nécessaire
Les scènes et modèles lourds sont chargés dynamiquement et différés jusqu’à leur utilisation réelle — le chargement initial ne paie pas pour une scène 3D que l’utilisateur n’a pas encore atteinte.
03
Les animations se mettent en pause hors de la fenêtre visible03Les animations se mettent en pause hors de la fenêtre visible
Une scène invisible n’a pas besoin de continuer à être rendue. Les animations et boucles de rendu s’arrêtent lorsqu’une section sort de la fenêtre, et les scènes sont entièrement démontées si l’onglet perd le focus.
04
Les déclencheurs GSAP restent proches de ce qu’ils animent04Les déclencheurs GSAP restent proches de ce qu’ils animent
Les instances ScrollTrigger sont limitées à la section à laquelle elles appartiennent et ne s’activent qu’à l’approche de cette section — plutôt qu’une grande timeline qui tenterait de gérer toute la page à la fois.
05
Sur mobile, la scène change au lieu d’être simplement réduite05Sur mobile, la scène change au lieu d’être simplement réduite
Les scènes WebGL lourdes sont remplacées par des versions plus légères ou des images statiques sur mobile, au lieu de forcer la même scène à fonctionner avec une qualité moindre — une décision prise pour chaque projet, et non un fallback systématique.
Résultats
Pas une histoire de métriques — une histoire de savoir-faire
Cinq récits 3D et motion distincts livrés, chacun construit autour d’une technique différente — scènes fondées sur la métaphore, narration cinématographique au fil du défilement, shaders personnalisés et personnage réactif au défilement de façon persistante
Un ensemble cohérent d’habitudes de performance — optimisation des modèles, chargement différé et mise en pause adaptée à la fenêtre — repris et perfectionné sur chaque projet
Des études autonomes de shaders et de particules créées indépendamment de toute landing page, comme un entraînement technique délibéré
Le même instinct de structuration que dans les architectures de dashboards et de SaaS, appliqué à l’organisation et au chargement de ces scènes