threejs-sky-backdrop

Cielo y fondo exterior

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

Idea central: describir el cielo una sola vez.

• El horneador utiliza un cielo analítico: un degradado desde el horizonte hasta el cenit, más un halo en la dirección del sol.
• La esfera celeste visible añade nubes sobre el mismo degradado, pero la luminosidad media debe mantenerse aproximadamente igual que la del degradado: el cielo despejado entre nubes es más oscuro que el promedio, los bordes de las nubes son más brillantes, y el centro de las nubes es aproximadamente igual.
• De esta manera, el cielo visto desde la ventana y la luz que ilumina la habitación coinciden. measureDome se utiliza para medir esta relación.

Archivos

Ruta	Contenido
scripts/sky.js	SKIES (dawn, day, overcast, golden), skyRadiance (misma fórmula que el worker de threejs-baked-gi), bakeCfg, skyDome, SKY_U (uTime), skyLights, skyEnvironment, measureDome
scripts/backdrop.js	windowVisibility (visibilidad de la abertura de la ventana y LOD), hazePatch (niebla atmosférica, conserva el parche shader original), grassTexture, roofTexture, windowTexture, crownTexture, Soup, houses, lawn, gravelPath, hedge, crownWall
example/	Habitación en el segundo piso (suelo a 5.5 m sobre el jardín) con vista a la ventana: césped, camino, setos, tres casas, árboles, muro de árboles lejano
example/preview*.jpg	Cuatro tipos de cielo vistos desde el interior; frente a la ventana, mirando al cielo; vista exterior desde arriba
references/sky.md	Cada capa del shader de cielo, parámetros predeterminados, cómo ajustarlos, cómo se conecta con el horneado
references/backdrop.md	Lógica de visibilidad, niebla, componentes del fondo, datos de rendimiento, problemas encontrados, portabilidad a otros motores

Los árboles del ejemplo usan threejs-procedural-vegetation (ruta relativa ../../threejs-procedural-vegetation/).

Ejecutar el ejemplo

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

(<carpeta del skill> es el directorio base que se muestra al cargar este skill; cuando se instala como plugin, está en ~/.claude/plugins/cache/)

• ?sky=dawn|day|overcast|golden: preset de cielo.
• ?cam=window|wide|up|out: desde la habitación / frente a la ventana / mirando al cielo / vista exterior.
• ?cull=0: sin recorte de visibilidad, para comparar.
• ?t=5: tiempo fijo, las nubes no se mueven.

window.__sky contiene el tiempo de ejecución, número de triángulos, número de hojas y la relación entre la esfera celeste y el cielo analítico.

Uso

import { SKIES, skyDome, bakeCfg, skyLights, skyEnvironment, measureDome, SKY_U } from './scripts/sky.js';
const S = SKIES.dawn;
scene.add(skyDome(S));                                       // Interiores con horneado: display 0.3 (predeterminado); exteriores: skyDome(S, { display: 1 })
const cfg = { ...bakeCfg(S), portal, room };                 // Pasar a runBake de threejs-baked-gi
// Escenas sin horneado:
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; ... });

Reglas imprescindibles

1. Describir el cielo una sola vez: el horneado, la esfera celeste y las luces se generan a partir del mismo preset. Si se cambia el color del cielo, hay que volver a hornear.
2. Después de ajustar las nubes, ejecutar measureDome. Dibuja la esfera celeste en un cube map flotante, calcula el promedio del hemisferio superior ponderado por cos y lo compara con el cielo analítico.
   • La relación debe estar entre 0.85 y 1.15; de lo contrario, el cielo visto desde la ventana no coincidirá con la luz que entra.
   • Con la opción { pure: true } se dibuja solo el degradado, y el resultado debe ser exactamente 1.000, para confirmar que la medición es correcta.
3. El color de las nubes es brillo absoluto, en la misma unidad que el cielo, no un multiplicador. Intenté escalarlo con el degradado, pero la relación al amanecer bajó a 0.73, así que volví a la implementación original.
4. En interiores con horneado, la esfera celeste debe dibujarse más oscura (display alrededor de 0.3). La exposición está ajustada para el interior; dibujar el cielo con su brillo real lo dejaría completamente blanco y sin color; esto no afecta el brillo utilizado para la iluminación.
5. Construir solo lo que es visible. windowVisibility proyecta rayos desde múltiples posiciones de los ojos en la habitación a través de la abertura de la ventana con espesor.
   • Hojas no visibles: el skill de vegetación devuelve 0 en lodAt, dejando solo unas pocas tarjetas grandes para que aún haya sombra durante el horneado.
   • Solo visibles al mirar de reojo: devuelve 1 y se vuelven más dispersas.
6. Agregar hazePatch al fondo. A más de 10 m de distancia, los colores se desvanecen hacia el horizonte; de lo contrario, las casas y árboles lejanos se verían tan oscuros y saturados como los primeros planos, pareciendo pegatinas.

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

Elemento	Valor
Esfera celeste ÷ cielo analítico	dawn 0.934, day 1.080, overcast 1.034, golden 1.034; modo pure 1.000
Fondo (césped, camino, setos, casas, muro de árboles)	31–34 ms
Árboles (4 principales, 8 de medio plano, 26 lejanos)	Generación 0.14–0.16 s, construcción de malla 0.31 s
Recorte de visibilidad	Hojas 117,808 → 97,589 (-17%), triángulos 425k → 383k. El ahorro proviene principalmente de dos árboles pegados a la pared exterior, a los lados de la ventana
Mapa de entorno celeste + dos mediciones	Aprox. 0.09 s