Totality Engine : cathédrale d’éclipse cinématographique

Créez une expérience HTML/WebGL autonome, soignée et visuellement impressionnante, dans un fichier unique, appelée :

totality-engine.html placez-la dans documents/llm-benchmarks

Ne vous contentez pas de décrire l’idée. Générez réellement le fichier HTML complet et fonctionnel, puis enregistrez-le dans le répertoire courant.

Réalisez un court-métrage cinématographique en boucle de 32 secondes, pas un diorama de démonstration. Le produit, c’est la performance de la caméra. L’interaction est un bonus après la première lecture complète du film.

Univers :
Une cathédrale gothique noyée au moment de la totalité d’une éclipse solaire. Une eau noire recouvre le sol de la nef. Un cadran astronomique monumental en laiton, le Totality Engine, occupe le transept : anneaux d’orrerie imbriqués, planètes en verre, cœur de soleil noir et pendule en marbre sombre de 40 mètres, avec des ornements dorés. Calcaire mouillé, vert-de-gris, flammes de bougies et poussière d’or. Tout doit être généré de manière procédurale par le code. Aucun modèle, texture, image, fichier de police ou fichier audio externe.

Film dirigé (une seule horloge, des temps forts nommés, une boucle sans raccord visible) :

0,0–4,0 s DUST
Très gros plan. Une seule particule de poussière tournoie dans un faisceau de lumière rouge doré. Le contexte est presque absent. Lent travelling avant.

4,0–10,0 s NAVE
Reculez et montez. Nous sommes dans une eau noire jusqu’aux genoux, au croisement de la cathédrale. Les voûtes d’ogives s’éloignent dans la brume. Le pendule entre dans le cadre par la gauche, lourd et lent, puis passe assez près pour que l’on ressente sa masse. Des anneaux se propagent à la surface de l’eau autour de la caméra.

10,0–18,0 s ASCENT
Suivez le mouvement ascendant du pendule. Révélez l’orrerie dans la voûte : au moins quatre anneaux de laiton imbriqués, chacun avec une inclinaison différente, trois planètes en verre aux atmosphères distinctes (l’une nuageuse, l’une cerclée d’anneaux, l’une striée de bandes orageuses) et le cœur de soleil noir. Des groupes de bougies longent le triforium. La poussière d’or tombe vers le haut, à l’encontre de la gravité.

18,0–24,0 s THREAD
La caméra se faufile dans l’orrerie. Traversez le verre de la planète cerclée d’anneaux (réfraction réelle, pas une astuce de transparence), suivez son plan orbital pendant un instant, puis ressortez en direction du soleil noir. Au passage suivant du pendule, la lumière se déforme autour de lui comme sous l’effet d’une faible lentille gravitationnelle.

24,0–30,0 s TOTALITY
La couronne explose en un anneau de feu blanc doré qui devient la roue la plus extérieure de l’orrerie. Un unique tic d’horloge, que l’on doit ressentir comme audible : chaque anneau se verrouille brusquement dans un alignement parfait, puis la couronne reste stable. Ne fondez pas vers le blanc. Maintenez la silhouette de toute la machine devant l’anneau de feu.

30,0–32,0 s CODA
Amorcez doucement une continuation lente qui corresponde à l’image de la frame 0, afin que la boucle soit invisible. Aucun cut brutal.

Après la première lecture complète, activez l’orbite par glisser-déposer, le zoom à la molette et un contrôle « Rejouer le film ». Le bouton Pause doit toujours fonctionner. Facultatif : les touches 1 à 5 permettent d’accéder directement au début des temps forts.

Mise en scène :
- Créez un premier plan, un plan intermédiaire et un arrière-plan bien marqués. Le pendule occupe le premier plan dans NAVE. Les voûtes et la brume structurent la profondeur.
- Ajoutez au moins deux repères à l’échelle humaine (un banc noyé, une flèche effondrée, une rangée de bougies) afin que la machine paraisse gigantesque.
- L’eau doit être un véritable matériau : reflets de l’orrerie, léger effet Fresnel, déplacement lent, anneaux produits par le pendule et la caméra.
- Les planètes doivent être en verre épais, pas de simples sphères lumineuses. On doit voir une cathédrale déformée à travers au moins l’une d’elles.
- Le laiton doit avoir du poids : sombre dans les zones d’ombre, seuls les rebords accrochant la lumière de la couronne.
- Les flammes des bougies et la poussière d’or doivent utiliser de l’instanciation. La poussière ne doit être entraînée vers le haut que pendant ASCENT et TOTALITY.
- Voûtes d’ogives, silhouettes d’arcs-boutants et immense rosace circulaire / ouverture d’éclipse sur le mur du fond, alignée avec le soleil noir.
- Palette limitée et fixe : calcaire mouillé #8a8680, laiton #c4a574, vert-de-gris #2f6f66, cramoisi d’éclipse #6b1020, couronne #ffe9c2, eau noire #05070c, poussière d’or #e6c27a. Pas de cyan, pas de magenta, pas de néon, pas d’arc-en-ciel, pas de « look IA » violet sur noir.
- Typographie : un petit titre « TOTALITY ENGINE » et le nom du temps fort, avec une présentation cinématographique, pas un tableau de bord.

Contraintes techniques :
- Utilisez Three.js depuis un CDN stable. Tout le HTML, le CSS et le JS doivent se trouver dans ce fichier unique.
- Pilotez toutes les animations à partir d’une seule horloge de temps écoulé, avec des fenêtres de temps fort nommées. Pas de boucles Math.random indépendantes, pas de Date.now dans les shaders, pas de bruit non initialisé. Utilisez uniquement un générateur pseudo-aléatoire initialisé, avec la graine constante 0xA2E1.
- Le film de caméra doit utiliser une interpolation fluide avec une accélération-décélération sur les grands mouvements, une accélération-décélération plus lourde pour le pendule (il a une masse) et une stabilisation à longue traîne vers TOTALITY. Une orbite linéaire comme caméra principale est rédhibitoire.
- Utilisez du GLSL personnalisé (ShaderMaterial ou passe plein écran), et non des matériaux standards qui donnent seulement le change :
1. Eau (réflexion + Fresnel + déplacement lent)
2. Couronne du soleil noir (feu / plasma, pas un sprite)
3. Lentille du pendule (la lumière se courbe près de la masse pendant THREAD)
4. Verre épais pour au moins une planète
- Utilisez InstancedMesh pour la poussière, les bougies et toutes les cellules de pierre ou de laiton répétées. Ne créez pas des milliers d’objets Mesh indépendants.
- La postproduction est autorisée, mais ne peut pas remplacer l’éclairage. Si vous utilisez du bloom, appliquez-le très légèrement à la couronne et aux bougies uniquement. Un UnrealBloom sur toute la scène est rédhibitoire.
- La brume, les reflets mouillés et l’ouverture d’éclipse doivent créer l’atmosphère. Pas de cônes transparents bon marché en guise de « rayons divins », à moins qu’ils ne soient réellement pilotés par un shader.
- L’expérience doit être responsive, occuper toute la fenêtre du navigateur, gérer le redimensionnement et viser 60 images/s sur un ordinateur portable de 2023. S’il faut choisir, réduisez le nombre de particules avant de sacrifier le film de caméra.
- Interface discrète et peu encombrante : titre, temps fort actuel, pause, replay. Pas de compteur FPS, pas de dat.gui, pas d’outils de débogage laissés actifs.
- Aucun commentaire TODO, pseudocode, placeholder, fonction manquante ni remarque du type « ce serait mieux avec X ».
- Au chargement, le film doit démarrer automatiquement. Une image fixe derrière un bouton de démarrage est rédhibitoire.

Niveau de qualité attendu :
Le résultat doit ressembler à une image de court-métrage, pas à un exemple Three.js. Si une capture à 26 secondes ne se lit pas immédiatement comme une « horloge de la taille d’une cathédrale au moment de l’éclipse », le travail n’est pas terminé. Itérez sur la composition, les matériaux et la caméra avant d’ajouter d’autres objets.