Une éclipse et un trou noir dans votre navigateur

La page d'accueil de ce site traverse une éclipse solaire, transforme le soleil en trou noir et vous fait naviguer dans un réseau neuronal. Le tout dans votre navigateur, sans plugin, au fil du défilement. Voici comment c'est construit, et pourquoi les choix techniques comptent autant que l'image.

Tout est fonction du défilement

La règle d'or de la séquence : chaque image est une fonction pure de la position de défilement. Aucune vidéo, aucune animation qui se joue toute seule. Vous remontez, la scène remonte. L'expérience est réversible et vous restez maître du rythme, à la molette comme au doigt.

Le trou noir, en particules

Le moment le plus dense techniquement, c'est l'effondrement du soleil en trou noir, entouré de son disque d'accrétion. Le disque est fait de plusieurs milliers de rubans de lumière, dessinés en un seul appel de rendu grâce à l'instanciation GPU. Chaque ruban rejoue la trajectoire de sa particule avec un retard croissant, si bien que la traînée est la trace exacte de son orbite. La lentille gravitationnelle (l'arrière du disque qui apparaît au-dessus du trou) et l'effet Doppler (le côté qui vient vers vous flambe, l'autre s'assombrit) sont calculés dans les shaders, comme au cinéma en images de synthèse, mais à l'échelle d'une page web.

Le contenu d'abord, la 3D ensuite

C'est le point auquel nous tenons le plus. Tout le contenu de la page existe en HTML, rendu par le serveur, indexable par les moteurs de recherche. La 3D vient par-dessus, montée après coup, uniquement si l'appareil le permet. Préférence système « animations réduites », navigateur sans WebGL, bouton « version simple » : dans tous ces cas, le site reste complet et rapide. Un téléphone modeste reçoit des textures allégées, un ordinateur puissant reçoit tout.

Pourquoi s'infliger ça

Parce que c'est notre vitrine au sens propre. Ce que vous voyez sur cette page, nous savons le faire pour vous : configurateurs 3D, visites interactives, expériences de marque. Et parce que la contrainte du navigateur, avec zéro installation, tous les appareils et un référencement intact, est exactement celle de vos projets réels.