Trou noir
black-hole-stage dans son mode natif — drive="internal", le défaut. Elle possède son propre scroll, sa propre molette, son propre pavé tactile.
Dix écrans autour des trois stages Three.js du site — quatre montent une vraie scène WebGL au survol (01 à 04), six documentent l'architecture qui les rend interchangeables (05 à 10).
black-hole-stage dans son mode natif — drive="internal", le défaut. Elle possède son propre scroll, sa propre molette, son propre pavé tactile.
Le même élément, drive="external" cette fois — scroll/molette/clavier internes coupés, une boucle locale appelle setShot() à sa place.
forest-stage charge le GLB de la route forestière (16 Mo compressés) puis attend setShot() — pas de mode interne, pas d'attribut drive à poser.
orbital-stage, la plus lourde des trois, deux mondes dans la même scène (voir Deux mondes). Pilotage par hold()/release().
Quatre points de couture entre Three.js et n'importe quel pilote externe — Theatre.js sur les pages cinématiques, la table locale de ce lab, ou une autre timeline demain.
Le trou noir passe par cinq cibles de rendu, mais un seul fragment shader fait le travail optique : lentille gravitationnelle, aberration chromatique, grain, vignettage.
La caméra spatiale et la caméra au sol coexistent dans la même scène orbitale ; world — 0 à 1 continu — bascule laquelle est active à 0.5.
La forêt n'a pas de caméra à six degrés de liberté : elle en a cinq, tous relatifs à la route. s — 0 à 1 — est la seule position réelle.
Trois économies reviennent dans les trois scènes : l'instancing pour tout ce qui se répète, le travail poussé dans le vertex shader plutôt que le fragment, le blending additif pour la lumière plutôt que des lampes réelles.
Le compteur de l'en-tête ne dépasse jamais 1 — quatre garde-fous s'en assurent, en plus du survol lui-même : sortie d'écran, onglet caché, sortie de page.
<black-hole-stage> dans son mode natif — drive="internal", le défaut. Elle possède son propre scroll, sa propre molette, son propre pavé tactile ; rien ici ne lui envoie de setShot().
C'est le même élément que la page d'accueil. Survole la plaque pour la monter, déplace la souris dedans pour orbiter.
Le même élément, drive="external" cette fois — le scroll/molette/clavier internes sont coupés, une boucle locale échantillonne un extrait de la vraie timeline (27 s) et appelle setShot() à sa place.
Extrait, pas le montage de référence — sept champs sur la vingtaine que le seam accepte. Le lab joue à ×3.4 pour qu'un survol couvre la pièce.
<forest-stage> charge le GLB de la route forestière (16 Mo compressés) puis attend setShot() — cet élément n'a pas de mode interne du tout, ni d'attribut drive à poser.
Extrait de 20 s à ×2.5. La caméra ne vole pas librement : elle est accrochée à l'axe de la route — voir l'écran 08.
<orbital-stage> — la plus lourde des trois, deux mondes dans la même scène (voir l'écran 07). Pas d'attribut drive ici : le pilotage se règle avec hold()/release(), et le lab n'appelle jamais release() — voir l'écran 10.
Extrait de 46 s à ×3.4. C'est la plus coûteuse à monter — laisse-lui une fraction de seconde après le survol.
Quatre points de couture entre Three.js et n'importe quel pilote externe — Theatre.js sur les pages cinématiques, la table locale de ce lab, ou une autre timeline demain.
Aucune scène ne connaît son pilote. C'est ce qui permet de rejouer les mêmes éléments ici, hors de leur page, sans dupliquer une ligne de rendu.
Le trou noir passe par cinq cibles de rendu — scène, disque brillant, deux passes de flou, composite — mais un seul fragment shader fait le travail optique : la lentille gravitationnelle, l'aberration chromatique, le grain, le vignettage.
Changer lens ou aberr dans le seam ne recompile rien : ce sont des uniforms, lus à chaque frame.
La caméra spatiale et la caméra au sol coexistent dans la même scène orbitale. world — 0 à 1 continu — bascule laquelle est active à 0.5 ; ce n'est pas un booléen malgré l'air.
La bascule se fait sous le voile de nuages : veil plafonne à 80 % — jamais 100 % — pour que la matière continue de bouger pendant que la vue est bouchée. On ne voit plus rien, mais on descend.
Basculer un booléen ferait un saut. Un world continu laisse la caméra spatiale et la caméra au sol se raccorder sous 80 % de voile, où l'œil ne peut de toute façon rien distinguer.
La forêt n'a pas de caméra à six degrés de liberté : elle en a cinq, tous relatifs à la route. s — 0 à 1 — est la seule position réelle ; le reste ne fait que cadrer depuis ce point.
Trois économies reviennent dans les trois scènes : l'instancing pour tout ce qui se répète, le travail poussé dans le vertex shader plutôt que le fragment, le blending additif pour la lumière plutôt que des lampes réelles.
C'est aussi pourquoi le palier LOW existe : sur mobile, ces trois budgets se resserrent d'un cran plutôt que de couper des effets entiers.
Le compteur de l'en-tête ne dépasse jamais 1 — quatre garde-fous s'en assurent, en plus du survol lui-même : sortie d'écran, onglet caché, sortie de page.
Le survol seul ne suffit pas au tactile : un appui épingle la plaque, un second la relâche. Et l'orbitale ne rend jamais la main à sa caméra libre ici — release() n'est jamais appelé, le lab garde le pilotage jusqu'au démontage.