threejs-photoreal-interior

Fotoreal Interior Scene (Guía General)

Este skill combina varios skills en un flujo de trabajo y proporciona una plantilla de proyecto ejecutable. El método proviene de room-at-dawn (MIT): una habitación al amanecer, completamente generada por código, que se ejecuta en el navegador. Las dimensiones del proyecto original son aproximadamente:

• 1.83 millones de triángulos, carga en unos 7 segundos (RTX 4090).
• El archivo de iluminación horneada gi.bin tiene unos 13 MB, tarda unos 30 minutos en hornearse.
• El video es 4K HDR10.

Qué skill usar en cada paso

Paso	Skill	Qué entregas
0	3d-spec-prompt	Escribe la idea como una especificación verificable: ambiente, hora, escala, objeto principal, cámara
1 Dimensiones y carcasa	template/src/layout.js, parts/room.js de este skill	Dimensiones reales (metros), ventana, grosor de pared, carcasa
2 Objeto principal	threejs-procedural-cloth (edredón, manta, cortina), threejs-procedural-vegetation (árbol fuera de la ventana), threejs-procedural-pothos (planta interior)	Objetos que son el foco visual
2b Cielo y exterior	threejs-sky-backdrop (cielo predeterminado, nubes, césped exterior, casa, seto lejano, solo construir lo que se ve)	El mismo cielo para horneado y visualización
3 Materiales	threejs-procedural-textures	Pared, suelo, madera, tela, desgaste, cubierta de libro
4 Objetos pequeños	threejs-lived-in-props	Paño colgado en el respaldo de la silla, taza, botella, calcetines, cables, bola de papel
5 Iluminación	threejs-baked-gi	Luz de cielo y rebotes del sol horneados en los vértices, guardados como gi.bin; luz solar directa en tiempo real
6 Imagen	threejs-realtime-post	AO, bloom, exposición separada para exterior e interior, corrección de color
7 Verificación, grabación	webgl-deterministic-recording	Capturas de pantalla de regresión, renderizado fotograma a fotograma, salida de video (profundidad de campo, desenfoque de movimiento, HDR10)

Crear un nuevo proyecto

bash <carpeta-del-skill>/scripts/new-project.sh ~/git_project/my-room
cd ~/git_project/my-room && python3 -m http.server 5430 --bind 127.0.0.1
# http://127.0.0.1:5430/            Ya incluye bake/gi.bin horneado
# http://127.0.0.1:5430/?bake=128   Para rehornear después de cambiar la escena, presiona "Descargar gi.bin", guárdalo en bake/

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

• Este script copia la plantilla y copia las bibliotecas de cada sub-skill en src/lib/ (gi, post, props, textures, cloth, vegetation, pothos, sky, film). El proyecto funciona de forma independiente desde entonces.
• No necesita herramientas de empaquetado ni npm. three y three-mesh-bvh se cargan desde jsdelivr.
• Parámetros de URL:
  • ?cam= : Cámara (room, desk, window, corner, view=parado junto a la ventana mirando hacia afuera).
  • ?t= : Hora fija (hojas y nubes no se mueven, para capturas).
  • ?view=gi : Solo ver iluminación.
  • ?only=furniture : Construir solo una parte.
  • ?exp= : Exposición.
• La página proporciona window.__ready, window.__stats, window.__camera, que se pueden conectar directamente con las herramientas de webgl-deterministic-recording.
• Controles: Arrastrar para girar la vista; WASD / Flechas para caminar (Shift para caminar lento, choca con paredes y muebles); Haz clic en la pantalla para cambiar a giro de cabeza con el ratón, la vista baja a 1.6 m (Esc para salir). En modo órbita, la cámara y el punto de mira están limitados dentro de la habitación; al alejar o desplazar no se sale de las paredes.

Estructura de la plantilla:

Archivo	Contenido
src/layout.js	El único lugar para dimensiones, sol, cielo (valores predeterminados SKIES), configuración exterior (OUTSIDE), corrección de color, cámaras, áreas infranqueables de muebles (BLOCKERS)
src/materials.js	lit() (parche GI, conserva el parche shader original, registra albedo), solid(), tbox(), tplane(), metres()
src/scene.js	Crea cada parte según order, el orden es fijo
src/parts/room.js	Suelo, techo, cuatro paredes, hueco de ventana y alféizar, carcasa negra, núcleo de pared
src/parts/outside.js	Exterior: esfera de cielo, césped, camino de grava, seto, casa, seto lejano, árbol principal y árboles a media distancia (solo construir lo que se ve, threejs-sky-backdrop + threejs-procedural-vegetation). Todos con gi = false, no bloquean la luz horneada
src/parts/furniture.js	Mesa, silla, toalla colgada en el respaldo (PBD), taza, botella, libros sobre la mesa, libros en la estantería
src/main.js	Crear escena → hornear, cargar archivo o luz plana → sol → reflejos → post-procesado → cámara (órbita + caminar, limitada dentro de la habitación)

Reglas a seguir estrictamente entre skills

1. Las unidades son metros, las coordenadas fijas. X a lo largo de la pared de la ventana, Z hacia el interior (la pared de la ventana está en z = 0, z < 0 es exterior), Y hacia arriba. Todas las dimensiones solo se escriben en layout.js.
2. Determinista. Los números aleatorios siempre usan RNG(seed). Si cambia el orden, el nombre o el número de vértices de una pieza, la horneada de esa malla se invalida; applyBake reportará stale.
3. La luz está en los vértices, por lo que hay que subdividir. Las superficies donde se colocan objetos se subdividen a 1.5–2 cm, áreas grandes a 4–8 cm. Usa tbox / tplane.
4. Todos los materiales iluminados deben pasar por lit(). giPatch reemplaza directamente onBeforeCompile; lit() encadena el parche original después, incluyendo cambios en la pared (wallPatch), tela contraluz, viento. Los materiales con textura deben proporcionar albedo (el avg de la textura), para que el color de la luz reflejada sea correcto.
5. División del trabajo del sol: La luz directa usa DirectionalLight (intensidad igual a sun.irr configurado en el horneado), la luz reflejada se hornea en el archivo. No agregues luz ambiental ni luz hemisférica.
6. Las paredes deben tener un núcleo macizo, con shadowSide configurado como FrontSide. Sin él, el sol filtrará puntos brillantes en la base de las paredes y esquinas (problema real; ver references/integration.md).
7. La exposición se ajusta al interior. El interior tiene aproximadamente 1/20 de la luz exterior: exposure alrededor de 4.5, el exterior con ext alrededor de 0.3 para oscurecer.
8. Los reflejos se capturan después del horneado. captureEnv debe ejecutarse después de applyBake/runBake, con la sonda en el centro de la habitación.
9. Cuando hay paisaje exterior lejano, el far de la cámara debe ser mayor que el objeto más lejano. La plantilla usa 400 m (el seto está a 100 m, el césped se extiende hasta 260 m). Si far es solo 100, el círculo donde se corta el paisaje lejano mostrará una neblina blanca en el horizonte que se mueve con la vista (problema real).
10. La cámara de sombra del sol debe cubrir las copas de los árboles fuera de la ventana para que la sombra de los árboles entre: la plantilla coloca el sol a 30 m de distancia, near 12, far 40.

Mediciones (Plantilla, RTX 4090, Chrome headless, 1280×800)

• Construcción de la escena: 1.2 segundos, de los cuales la toalla colgante tarda unos 0.65 segundos; 107,000 triángulos; desde que se abre la página hasta que aparece la imagen, unos 1.6 segundos.
• Horneado en vivo a 128 spp: 61,407 puntos de muestreo, 26 workers, 6 segundos, gi.bin 743 KB. Tras recargar, se aplican 39 mallas, 0 inválidas.
• preview.jpg: Habitación, lado de la mesa, ventana, solo luz. preview-bake.jpg: izquierda luz plana, derecha después del horneado.

Más información

• references/workflow.md: Pasos de cada etapa, decisiones a tomar, entregables y puntos de verificación.
• references/integration.md: Interfaces entre skills, puntos a tener en cuenta, problemas encontrados.
• references/checklist.md: Lista de verificación y rangos de referencia numérica.