Génération du monde
icone
Défilez
Expérience interactive · WebGL temps réel

Des univers
qui réagissent
au défilement

Une démonstration de ce que nous concevons pour nos clients : des sites où la 3D, la lumière et la narration se déclenchent au fil du scroll. Rendu en temps réel dans le navigateur, sans vidéo, sans plugin.

Découvrir le procédéNous contacter
Étape 01 — Le système solaire

Un monde
entièrement calculé

Le voyage s'ouvre sur une vue d'ensemble : une étoile centrale et ses planètes, chacune générée par le code, posées dans un champ de milliers d'étoiles réelles.

a.Le ciel n'est pas une image : chaque étoile est un point lumineux rendu par le GPU, avec sa couleur et son scintillement propres.
b.Deux couches d'étoiles à des profondeurs différentes créent un effet de parallaxe quand la vue se déplace.
c.Les planètes lointaines sont colorées et éclairées par l'étoile, pour ancrer l'échelle du système.
Étape 02 — La Lune

Le scroll
devient travelling

La caméra plonge vers un satellite criblé de cratères, la Terre suspendue en arrière-plan. C'est ici que se révèle le cœur de l'effet « wow ».

a.Une trajectoire de points de vue est tracée à l'avance dans l'espace 3D.
b.GSAP ScrollTrigger relie la barre de défilement à cette trajectoire, image par image.
c.Un lissage (« scrub ») garde chaque mouvement fluide, même si l'on scrolle d'un coup.
d.Le relief de la Lune est sculpté par une carte de bosses : les cratères réagissent à la lumière.
Étape 03 — La Terre

Une planète
née de zéro

Aucun modèle téléchargé : continents, océans, montagnes, nuages et atmosphère sont entièrement générés par le code, en haute définition.

a.Un bruit fractal dessine continents, océans profonds, forêts, sommets enneigés et calottes polaires.
b.Une carte de relief donne du volume aux montagnes ; une carte de brillance fait scintiller les océans au soleil.
c.Une couche de nuages tourne lentement, indépendamment du sol.
d.Un fin halo atmosphérique (« fresnel ») cercle la planète, plus lumineux sur les bords.
Étape 04 — Le Soleil

Tout est
question de lumière

Le final : l'étoile qui éclairait toute la scène emplit l'écran. Sa position définissait depuis le début les ombres, les reflets et l'ambiance de chaque plan.

a.Une source lumineuse unique, accompagnée d'une couronne incandescente et d'un vaste halo diffus.
b.Des nébuleuses teintent l'arrière-plan de violets et d'ors profonds.
c.L'étalonnage des couleurs évolue avec le défilement, du bleu nuit vers la lumière dorée.