threejs-sky-backdrop – Himmel und Außenansicht

Himmel und Außenansicht

Quelle: room-at-dawn (MIT), aus src/scene/sky.js, src/scene/parts/exterior.js.

Kernidee: Den Himmel nur einmal beschreiben.

• Der Baker verwendet einen analytischen Himmel: einen Farbverlauf vom Horizont bis zum Zenit, plus einen Lichthof um die Sonnenrichtung.
• Die sichtbare Himmelskugel fügt auf denselben Farbverlauf Wolken hinzu, wobei die durchschnittliche Helligkeit möglichst nah am Farbverlauf bleibt: Der wolkenfreie Himmel ist dunkler als der Durchschnitt, Wolkenränder sind heller, das Wolkenzentrum etwa gleich hell.
• So stimmt der aus dem Fenster sichtbare Himmel mit dem Licht überein, das in den Raum fällt. measureDome dient zur Überprüfung.

Dateien

Pfad	Inhalt
scripts/sky.js	SKIES (dawn, day, overcast, golden), skyRadiance (gleiche Formel wie im Worker von threejs-baked-gi), bakeCfg, skyDome, SKY_U (uTime), skyLights, skyEnvironment, measureDome
scripts/backdrop.js	windowVisibility (Fensterloch-Sichtbarkeit und LOD), hazePatch (atmosphärischer Dunst – behält den ursprünglichen Shader-Patch bei), grassTexture, roofTexture, windowTexture, crownTexture, Soup, houses, lawn, gravelPath, hedge, crownWall
example/	Raum im zweiten Stock (Boden 5,5 m über dem Garten) mit Blick aus dem Fenster: Rasen, Weg, Hecke, drei Häuser, Bäume, abschließende Baumwand
example/preview*.jpg	Vier Himmelszustände von innen; vor dem Fenster, Blick nach oben; von außen herunter
references/sky.md	Jede Schicht des Himmels-Shaders, Standardparameter, Anpassung, Verbindung zum Baking
references/backdrop.md	Sichtbarkeitslogik, Dunst, Außenkomponenten, Performance-Daten, aufgetretene Probleme, Portierung auf andere Engines

Die Bäume im Beispiel stammen aus threejs-procedural-vegetation (relativer Pfad ../../threejs-procedural-vegetation/).

Beispiel ausführen

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

(<skill-ordner> ist das Base directory, das beim Laden dieses Skills angezeigt wird; als Plugin liegt es unter ~/.claude/plugins/cache/)

• ?sky=dawn|day|overcast|golden: Himmelsvoreinstellung.
• ?cam=window|wide|up|out: Aus dem Raum / vor dem Fenster / Blick nach oben / von außen herunter.
• ?cull=0: Keine Sichtbarkeitsoptimierung – zum Vergleich.
• ?t=5: Fixierte Zeit, Wolken bewegen sich nicht.

window.__sky enthält Zeitaufwand, Dreieckanzahl, Blattanzahl und das Verhältnis der Himmelskugel zum analytischen Himmel.

Verwendung

import { SKIES, skyDome, bakeCfg, skyLights, skyEnvironment, measureDome, SKY_U } from './scripts/sky.js';
const S = SKIES.dawn;
scene.add(skyDome(S));                                       // Mit Baking im Innenraum: display 0.3 (Standard); draußen: skyDome(S, { display: 1 })
const cfg = { ...bakeCfg(S), portal, room };                 // An threejs-baked-gi/runBake übergeben
// Szenen ohne Baking:
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; ... });

Wichtige Regeln

1. Den Himmel nur einmal beschreiben: Baking, Himmelskugel und Lichtquellen werden aus derselben Voreinstellung erzeugt. Wird die Himmelsfarbe geändert, muss neu gebackt werden.
2. Nach dem Anpassen der Wolken measureDome ausführen. Es rendert die Himmelskugel in eine Float-Cube-Map, berechnet den cos-gewichteten Mittelwert über die obere Halbkugel und vergleicht ihn mit dem analytischen Himmel.
   • Das Verhältnis muss zwischen 0,85 und 1,15 liegen – sonst stimmt der Himmel im Fenster nicht mit dem einfallenden Licht überein.
   • Mit { pure: true } wird nur der Farbverlauf gezeichnet; das Ergebnis muss exakt 1,000 sein – das bestätigt, dass die Messung selbst korrekt ist.
3. Die Wolkenfarbe ist absolute Helligkeit in derselben Einheit wie der Himmel, kein Multiplikator. Ich habe getestet, sie stattdessen mit dem Farbverlauf zu skalieren; das Verhältnis fiel bei „Morgen“ auf 0,73, daher wurde die Schreibweise des Originalprojekts wiederhergestellt.
4. In Innenräumen mit Baking muss die Himmelskugel dunkler gezeichnet werden (display etwa 0.3). Die Belichtung ist auf den Innenraum abgestimmt; würde die Himmelskugel mit tatsächlicher Helligkeit gezeichnet, erschiene sie überbelichtet und farblos – unabhängig von der für die Beleuchtung verwendeten Helligkeit.
5. Nur das Sichtbare bauen. windowVisibility testet von mehreren Augenpositionen im Raum durch ein dickes Fensterloch.
   • Unsichtbare Blätter: Erhalten vom Pflanzen-Skill lodAt den Wert 0; es bleiben nur wenige große Karten, damit beim Baking noch Baumschatten entstehen.
   • Nur schräg sichtbare Blätter: Erhalten 1, werden ausgedünnt.
6. Zur Außenansicht hazePatch hinzufügen. Ab 10 m Entfernung verblasst die Farbe in Richtung Horizont. Sonst wirken entfernte Häuser und Bäume genauso tief und gesättigt wie nahe Objekte – sie sehen dann aus wie aufgeklebt.

Gemessene Werte (RTX 4090, Chrome headless, 1280×800)

Merkmal	Wert
Himmelskugel ÷ analytischer Himmel	dawn 0.934, day 1.080, overcast 1.034, golden 1.034; pure-Modus 1.000
Außenansicht (Rasen, Weg, Hecke, Häuser, Baumwand)	31–34 ms
Bäume (4 Hauptbäume, 8 mittlere, 26 ferne)	Generierung 0.14–0.16 s, Mesh-Aufbau 0.31 s
Sichtbarkeitsoptimierung	Blätter 117.808 → 97.589 (−17 %), Dreiecke 425.000 → 383.000. Die Einsparung kommt hauptsächlich von zwei Bäumen direkt an der Außenwand seitlich der Fenster
Himmels-Umgebungsmap plus zwei Messungen	ca. 0.09 s