threejs-sky-backdrop

Ciel et arrière-plan extérieur

Source : room-at-dawn (MIT), extrait de src/scene/sky.js, src/scene/parts/exterior.js.

Idée centrale : décrire le ciel une seule fois.

• Le cuiseur utilise un ciel analytique : un dégradé de l'horizon au zénith, avec un halo autour de la direction du soleil.
• La sphère de ciel visible ajoute des nuages sur ce même dégradé, mais pour que la luminosité moyenne reste proche de celle du dégradé : l'azur entre les nuages est plus sombre que la moyenne, les bords des nuages sont plus clairs, et le centre des nuages a une luminosité équivalente.
• Ainsi, le ciel visible à travers la fenêtre correspond à la lumière qui éclaire la pièce. measureDome permet de vérifier cette correspondance.

Fichiers

Chemin	Contenu
scripts/sky.js	SKIES (dawn, day, overcast, golden), skyRadiance (même formule que le worker de threejs-baked-gi), bakeCfg, skyDome, SKY_U (uTime), skyLights, skyEnvironment, measureDome
scripts/backdrop.js	windowVisibility (visibilité de l'ouverture de la fenêtre et LOD), hazePatch (brume atmosphérique, conserve le correctif shader d'origine), grassTexture, roofTexture, windowTexture, crownTexture, Soup, houses, lawn, gravelPath, hedge, crownWall
example/	Une pièce au deuxième étage (plancher à 5,5 m au-dessus du jardin) vue depuis la fenêtre : pelouse, chemin, haies, trois maisons, arbres, mur d'arbres lointain
example/preview*.jpg	Les quatre types de ciel vus de l'intérieur ; devant la fenêtre, en regardant le ciel ; vue extérieure depuis le dessus
references/sky.md	Chaque couche du shader de ciel, paramètres par défaut, réglages, raccordement avec la cuisson
references/backdrop.md	Logique de visibilité, brume, composants de l'arrière-plan, performances, problèmes rencontrés, portage vers d'autres moteurs

Les arbres de l'exemple utilisent threejs-procedural-vegetation (chemin relatif ../../threejs-procedural-vegetation/).

Exécution de l'exemple

cd <dossier du skill>/.. && python3 -m http.server 5426 --bind 127.0.0.1
# http://127.0.0.1:5426/threejs-sky-backdrop/example/

(<dossier du skill> est le répertoire de base affiché lors du chargement de ce skill ; installé en tant que plugin, il se trouve sous ~/.claude/plugins/cache/)

• ?sky=dawn|day|overcast|golden : préréglage de ciel.
• ?cam=window|wide|up|out : vue depuis la pièce / devant la fenêtre / en regardant le ciel / vue extérieure du dessus.
• ?cull=0 : désactive le clipping de visibilité, à des fins de comparaison.
• ?t=5 : fige le temps (les nuages ne bougent pas).

window.__sky contient le temps d'exécution, le nombre de triangles, le nombre de feuilles, ainsi que le rapport de la sphère de ciel au ciel analytique.

Utilisation

import { SKIES, skyDome, bakeCfg, skyLights, skyEnvironment, measureDome, SKY_U } from './scripts/sky.js';
const S = SKIES.dawn;
scene.add(skyDome(S));                                       // Intérieur avec cuisson : display 0.3 (par défaut) ; extérieur : skyDome(S, { display: 1 })
const cfg = { ...bakeCfg(S), portal, room };                 // À passer à runBake de threejs-baked-gi
// Scène sans cuisson :
const { sun, hemi } = skyLights(S); scene.add(hemi); if (sun) scene.add(sun, sun.target);
scene.environment = skyEnvironment(renderer, S);
console.log(measureDome(renderer, S));                       // ratio 0.85–1.15
renderer.setAnimationLoop((ms) => { SKY_U.uTime.value = ms / 1000; ... });

Règles impératives

1. Décrire le ciel une seule fois : le cuiseur, la sphère de ciel et les lumières sont tous issus du même préréglage. Si vous modifiez la couleur du ciel, vous devez relancer la cuisson.
2. Après avoir ajusté les nuages, exécutez measureDome. Il dessine la sphère de ciel dans une cube map flottante, calcule la moyenne de l'hémisphère supérieure pondérée par cos, et la compare au ciel analytique.
   • Le ratio doit être compris entre 0.85 et 1.15, sinon le ciel vu depuis la fenêtre ne correspondra pas à la lumière qui éclaire la pièce.
   • Ajoutez { pure: true } pour ne dessiner que le dégradé : le résultat doit être exactement 1,000, ce qui permet de vérifier que la mesure elle-même est correcte.
3. La couleur des nuages est une luminosité absolue, dans la même unité que le ciel, pas un facteur multiplicatif. J'ai essayé de la faire suivre le dégradé, mais le ratio tombait à 0,73 à l'aube, j'ai donc rétabli l'écriture d'origine.
4. Dans un intérieur avec cuisson, la sphère de ciel doit être plus sombre (display environ 0.3). L'exposition est calibrée pour l'intérieur ; si le ciel était affiché avec sa luminosité réelle, il serait aveuglant et perdrait toute couleur, sans rapport avec la luminosité utile pour l'éclairage.
5. Ne construisez que ce qui est visible. windowVisibility calcule, depuis plusieurs positions d'yeux dans la pièce, ce qui est visible à travers l'ouverture de la fenêtre (avec épaisseur de mur).
   • Feuilles non visibles : renvoyez 0 via lodAt du skill de végétation, ne laissez que quelques grandes cartes pour que la cuisson conserve les ombres des arbres.
   • Feuilles visibles uniquement en vision oblique : renvoyez 1 pour les rendre plus clairsemées.
6. Ajoutez hazePatch à l'arrière-plan. Au-delà de 10 m, les couleurs se fondent vers la couleur de l'horizon ; sinon, les maisons et arbres lointains auraient la même intensité et saturation que les objets proches, donnant un effet d'autocollant.

Mesures (RTX 4090, Chrome headless, 1280×800)

Élément	Valeur
Sphère de ciel ÷ ciel analytique	aube 0,934 ; jour 1,080 ; couvert 1,034 ; doré 1,034 ; mode pur 1,000
Arrière-plan (pelouse, chemin, haies, maisons, mur d'arbres)	31–34 ms
Arbres (4 arbres principaux, 8 intermédiaires, 26 lointains)	génération 0,14–0,16 s, construction du maillage 0,31 s
Clipping de visibilité	Feuilles : 117 808 → 97 589 (−17 %) ; triangles : 425 000 → 383 000. L'économie provient principalement de deux arbres collés au mur extérieur, de part et d'autre de la fenêtre
Texture d'environnement du ciel avec deux mesures	Environ 0,09 s