Sites web 3D & WebGL
Cinématiques, scènes WebGL, interactions, scroll storytelling : je conçois des expériences 3D qui servent votre message. Avec une règle que je ne négocie pas : la performance avant l’effet gratuit.
01Le constat
Un site internet 3D peut marquer durablement. Il peut aussi charger interminablement, faire chauffer un téléphone et noyer votre message sous un effet que personne n’a demandé.
C’est le piège de la 3D sur le web : l’effet devient le sujet. Le visiteur admire une seconde, attend, puis s’en va, sans avoir compris ce que vous proposez.
Ce qui ruine une expérience 3D
02La réponse
Je traite la 3D comme un outil de mise en scène. Elle doit faire comprendre quelque chose : un produit qu’on observe sous tous ses angles, un processus qui se déroule au fil du défilement, un univers de marque qu’on ressent avant de le lire.
Techniquement, je travaille avec WebGL et three.js, et j’anime avec GSAP. Le contenu, lui, reste du vrai HTML : lisible, référençable, accessible, avec ou sans la scène. Un site web 3D reste d’abord un site, avec les mêmes exigences qu’une création de site internet classique.
Quelques secondes de mise en scène pour installer un univers, puis le contenu reprend la main.
Un objet, un lieu ou un produit que l’on observe et que l’on manipule en temps réel.
Un récit qui avance au rythme du défilement : un processus, une fabrication, un avant-après.
Survols, transitions, réponses au pointeur : de petits mouvements qui donnent du relief à l’interface.
03La règle
Cinq garde-fous, sur chaque scène
04La méthode
Que doit-on comprendre, ou ressentir ? Je cherche le concept visuel qui sert votre message. S’il n’y en a pas, je vous le dis : un bon site sans 3D vaut mieux qu’un mauvais avec.
Je découpe l’expérience plan par plan, puis je prototype la scène pour vérifier très tôt qu’elle tient sur un téléphone ordinaire.
Vous recevezUn prototype navigable.
Géométrie, matières, lumière, animation liée au défilement. Le poids de la scène est surveillé du début à la fin.
La scène rejoint le site : chargement différé, variante mobile, image fixe de secours, respect du réglage « réduire les animations ». Tests sur mobile comme sur ordinateur.
Vous recevezUn site complet, avec et sans la scène.
05Les bénéfices
Une mise en scène singulière vous distingue d’un concurrent au site interchangeable.
Montrer vaut mieux qu’expliquer : un objet, un lieu ou un processus deviennent évidents.
Le soin du détail se voit, et il rejaillit sur la perception de votre travail.
Vitesse, référencement et accessibilité sont traités comme sur n’importe quel autre site : en priorité.
06Exemple
Projet démonstratifSécurité électronique
Un site vitrine dont l’illustration principale est une scène three.js procédurale : le bâtiment est généré par le code, pas chargé depuis de lourds fichiers 3D. Projet démonstratif.
Voir le projet ConspectusCe qu’il faut y regarder
Voir aussi
07Questions fréquentes
Non, à condition de le concevoir pour. La scène se charge après le contenu, son poids est surveillé, et une version allégée est prévue pour les mobiles. Quand un site 3D est lent, ce n’est pas la 3D qui est en cause : c’est l’absence de limites.
Pas si le contenu reste dans la page. Google ne lit pas ce qui est dessiné dans un canvas WebGL. C’est pourquoi les titres, les textes et les liens sont toujours en HTML ; la scène vient en complément.
Le site repère les appareils limités et les visiteurs qui ont demandé à réduire les animations. Dans ce cas, une image fixe remplace la scène. Le contenu, lui, est strictement le même pour tout le monde.
Pas toujours, et je vous le dirai. La 3D a du sens quand elle montre ce qu’une photo ou un texte montrent mal : un produit, un lieu, un savoir-faire, un univers de marque. Sinon, un site sobre et rapide sera plus efficace, et quelques animations légères suffisent souvent à lui donner du relief.
WebGL, avec la bibliothèque three.js pour le rendu, et GSAP pour l’animation et la synchronisation avec le défilement. Quand un simple effet de profondeur suffit, je le réalise en CSS, sans charger de moteur 3D.
Pas nécessairement. Si vous avez des fichiers, je pars d’eux. Sinon, la scène peut être construite par le code, à partir de formes géométriques : c’est souvent la solution la plus légère.
08Aller plus loin
Votre expérience
Décrivez ce que vous aimeriez montrer : un produit, un lieu, un savoir-faire. Je vous dis si la 3D est la bonne réponse, et à quoi elle pourrait ressembler.
