Catalogue

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).

01 Prototypé

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.

PiloteAucun — l'élément se pilote lui-même ; rien ici ne lui envoie de setShot(). VuSurvol pour monter la scène, déplacement de la souris dedans pour orbiter. TechMême élément que la page d'accueil ; c'est le mode par défaut de black-hole-stage. CoûtFaible à intégrer — c'est l'usage prévu par défaut de l'élément. PortfolioDéjà en production sur la page d'accueil.
02 Prototypé

Blackhole cinématique

Le même élément, drive="external" cette fois — scroll/molette/clavier internes coupés, une boucle locale appelle setShot() à sa place.

PiloteBoucle locale du lab qui échantillonne un extrait de la vraie timeline (27 s, ×3.4). VuCurseur de scrub et trois raccourcis de phase (approche, plongée, horizon). TechExtrait, pas le montage de référence — sept champs sur la vingtaine que le seam accepte. CoûtMoyen — écrire un pilote externe demande de connaître les champs attendus par le seam. PortfolioMode déjà utilisé par /home-cinematic, avec Theatre.js à la place de la boucle locale.
03 Prototypé

Forêt

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.

PiloteObligatoirement externe — la scène n'a aucun scroll ni molette à elle. VuCurseur de scrub et raccourcis départ / route / titre. TechExtrait de 20 s à ×2.5 ; la caméra est accrochée à l'axe de la route (voir Caméra sur rail). CoûtMoyen à élevé — 16 Mo à charger avant la première image. PortfolioDéjà en production sur /forest-cinematic.
04 Prototypé

Orbitale

orbital-stage, la plus lourde des trois, deux mondes dans la même scène (voir Deux mondes). Pilotage par hold()/release().

Pilotehold() prend la main ; le lab n'appelle jamais release() (voir Démontage). VuCurseur de scrub et raccourcis orbite / nuages / révélation. TechExtrait de 46 s à ×3.4 — la plus coûteuse à monter, laisse-lui une fraction de seconde après le survol. CoûtÉlevé — c'est la scène la plus lourde du site. PortfolioDéjà en production sur /home-cinematic.
05 Prototypé

Le seam

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.

PiloteN'importe lequel : aucune scène ne connaît son pilote. VuLe détail des quatre points de couture (attribut drive, setShot, hold/release, événements). TechC'est ce qui permet de rejouer les mêmes éléments ici, hors de leur page, sans dupliquer une ligne de rendu. CoûtFaible — c'est déjà l'architecture en place, pas un ajout. PortfolioCe qui rend ce lab possible — documentation d'une frontière, pas un effet à part.
06 Prototypé

Un seul shader

Le trou noir passe par cinq cibles de rendu, mais un seul fragment shader fait le travail optique : lentille gravitationnelle, aberration chromatique, grain, vignettage.

PiloteLes uniforms du seam (lens, aberr…), lus à chaque frame. VuLe rendu final du trou noir, sans rien à manipuler ici. TechChanger lens ou aberr dans le seam ne recompile rien — ce sont des uniforms. CoûtÉlevé à écrire une fois, gratuit ensuite : aucun coût de recompilation en usage. PortfolioDéjà en production — c'est le shader réel du trou noir.
07 Prototypé

Deux mondes

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.

PiloteL'uniform world, pas un booléen malgré l'air. VuLa bascule se fait sous le voile de nuages (veil plafonne à 80 %, jamais 100 %). TechLa matière continue de bouger pendant que la vue est bouchée : on ne voit plus rien, mais on descend. CoûtÉlevé — synchroniser deux caméras et un voile qui ne doit jamais atteindre l'opacité totale. PortfolioDéjà en production — c'est la bascule espace → sol de /home-cinematic.
08 Prototypé

Caméra sur rail

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.

Pilotes, la progression le long de la route ; le reste ne fait que cadrer depuis ce point. VuLe détail des cinq degrés relatifs, sans manipulation directe ici. TechContrainte plutôt que liberté : la caméra ne peut pas quitter l'axe de la route. CoûtFaible — une seule valeur à piloter au lieu de six. PortfolioDéjà en production — c'est la caméra réelle de /forest-cinematic.
09 Prototypé

Budget GPU

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.

PiloteLe palier LOW, qui resserre les trois budgets d'un cran plutôt que de couper des effets entiers. VuUne explication, sans scène à manipuler ici. TechC'est pourquoi LOW existe : sur mobile, un resserrement plutôt qu'une coupe. CoûtFaible à appliquer une fois la discipline posée — coûteux à ajouter après coup sur une scène déjà écrite autrement. PortfolioDéjà en production dans les trois stages du site.
10 Prototypé

Démontage

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.

PiloteLe survol/tactile — un appui épingle la plaque, un second la relâche. VuUne démonstration des garde-fous, sans scène à manipuler ici. TechL'orbitale ne rend jamais la main à sa caméra libre dans ce lab — release() n'est jamais appelé, le lab garde le pilotage jusqu'au démontage. CoûtÉlevé si oublié : un navigateur plafonne les contextes WebGL et abandonne les plus anciens sans prévenir. PortfolioLa règle qui permet à ce lab d'exister sans planter — un seul contexte WebGL vivant à la fois.
01

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 ; 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.

Trou noir Survoler pour monter la scène
— fps drive: internal
02

Blackhole cinématique

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.

Welcome — 27 s Survoler pour monter la scène
— fps 0.0 s
03

Forêt

<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.

Forêt — 20 s Survoler pour charger le GLB
— fps 0.0 s ?studio
04

Orbitale

<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.

Orbitale — 46 s Survoler pour monter la scène
— fps 0.0 s ?studio
05

Le seam

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.

setShot(o) fusionne o dans l'état interne — aucune validation, aucun clamp ; c'est au pilote de rester dans les bornes.
shot() relit l'état — copie sur le trou noir et la forêt, référence vivante sur l'orbitale : la muter la modifie directement.
release() orbitale seulement — rend la main au pointeur, allume les points d'intérêt projetés.
hold() reprend la main — un rejeu ne doit pas garder le mode interactif de la lecture précédente.
06

Un seul shader

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.

Scène
Disque
Flou A
Flou B
Composite
07

Deux mondes

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.

world = 0 · espace world = 1 · sol

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.

08

Caméra sur rail

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.

s position le long de l'arc de la route, 0 → 1
lift hauteur de la caméra au-dessus du sol
side déport dans la largeur du chemin
ahead distance devant, où porte le regard
aim relèvement du regard, indépendant de lift
09

Budget GPU

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.

Instancing étoiles, particules, végétation répétée — un seul appel de dessin pour des milliers d'occurrences.
Vertex shader déplacement, dérive, respiration — calculés une fois par sommet, jamais par pixel.
Additifs lueurs, traînées, fenêtres éclairées — une couleur ajoutée au rendu, pas une lumière de plus à calculer.
10

Démontage

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.

Contextes vivants 0 / 1 — jamais plus
Sortie de plaque pointerleave, 320 ms de grâce puis remove() — un aller-retour rapide de la souris ne redémarre rien
Sortie d'écran IntersectionObserver — la scène quitte le viewport, démontage immédiat
Onglet caché visibilitychange — l'onglet passe en arrière-plan, démontage immédiat
Sortie de page pagehide — la dernière scène ne survit jamais à la navigation