threejs-photoreal-interior

Scène d'intérieur photoréaliste (guide général)

Ce skill enchaîne les sous-skills suivants en un pipeline cohérent et fournit un modèle de projet exécutable directement. La méthode s'inspire de room-at-dawn (MIT) : une chambre au petit matin, entièrement générée par code, exécutée dans le navigateur. Les ordres de grandeur du projet original sont :

• 1,83 million de triangles, chargement en environ 7 secondes (RTX 4090).
• Le fichier de GI cuit gi.bin fait environ 13 Mo, une cuisson prend environ 30 minutes.
• La vidéo est en 4K HDR10.

Quel skill pour chaque étape

Étape	skill	Livrable
0	3d-spec-prompt	Rédiger l'idée sous forme de spécifications vérifiables : ambiance, heure, échelle, objet principal, caméra
1 Dimensions et structure	template/src/layout.js, parts/room.js de ce skill	Dimensions réelles (mètres), fenêtres, épaisseur des murs, coque
2 Objet principal	threejs-procedural-cloth (couette, couverture, rideaux), threejs-procedural-vegetation (arbre extérieur), threejs-procedural-pothos (plante intérieure)	Objets au centre de l'attention
2b Ciel et extérieur	threejs-sky-backdrop (ciel préréglé, nuages, herbe extérieure, maisons, haie lointaine, ne construire que ce qui est visible)	Un même ciel pour la cuisson et le rendu final
3 Matériaux	threejs-procedural-textures	Murs, sol, bois, tissu, traces d'usure, couverture de livre
4 Petits objets	threejs-lived-in-props	Tissu sur le dossier de la chaise, tasse, carafe, chaussettes, câbles, boulette de papier
5 Éclairage	threejs-baked-gi	Rebonds de la lumière du ciel et du soleil cuits dans les sommets, sauvegardés dans gi.bin ; éclairage direct du soleil en temps réel
6 Rendu	threejs-realtime-post	AO, bloom, exposition séparée intérieur/extérieur, étalonnage
7 Validation, enregistrement	webgl-deterministic-recording	Tests de régression par capture d'écran, rendu image par image, export vidéo (profondeur de champ, flou de mouvement, HDR10)

Créer un nouveau projet

bash <dossier_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/            contient déjà le fichier bake/gi.bin cuit
# http://127.0.0.1:5430/?bake=128   recuire après modifications, cliquer sur « Télécharger gi.bin », le placer dans bake/

(<dossier_skill> correspond au répertoire de base affiché lors du chargement de ce skill ; s'il est installé en tant que plugin, il se trouve dans ~/.claude/plugins/cache/)

• Ce script copie le modèle et les bibliothèques de chaque sous-skill dans src/lib/ (gi, post, props, textures, cloth, vegetation, pothos, sky, film), le projet devient alors autonome.
• Aucun outil de build ni npm n'est nécessaire. Three.js et three-mesh-bvh sont chargés depuis jsdelivr.
• Paramètres d'URL :
  • ?cam= : caméra (room, desk, window, corner, view = debout près de la fenêtre regardant dehors).
  • ?t= : temps figé (feuilles et nuages immobiles, pour capture).
  • ?view=gi : visualiser uniquement l'éclairage cuit.
  • ?only=furniture : ne construire qu'une pièce spécifique.
  • ?exp= : exposition.
• La page expose window.__ready, window.__stats, window.__camera, utilisables directement par les outils de webgl-deterministic-recording.
• Contrôles : faire glisser pour tourner la vue ; WASD / flèches pour se déplacer (Shift pour marcher lentement, avec détection des murs et meubles) ; cliquer sur l'écran pour passer en mode rotation libre avec la souris, regard à 1,6 m (Échap pour quitter). En mode orbite, la caméra et le point d'intérêt restent confinés dans la pièce : ni zoom arrière ni translation ne traversent les murs.

Structure du modèle :

Fichier	Contenu
src/layout.js	Unique endroit pour définir les dimensions, le soleil, le ciel (préréglages SKIES), la configuration extérieure (OUTSIDE), l'étalonnage, les caméras, les zones infranchissables des meubles (BLOCKERS)
src/materials.js	lit() (patch GI, conserve le patch shader original, enregistre l'albédo), solid(), tbox(), tplane(), metres()
src/scene.js	Construit chaque pièce selon order, ordre fixe
src/parts/room.js	Sol, plafond, quatre murs, ouverture et rebord de fenêtre, coque noire, noyau de mur
src/parts/outside.js	Extérieur : sphère de ciel, herbe, chemin de gravier, haie, maison, arbres lointains, arbre principal et arbres de moyen-plan (ne construit que ce qui est visible, threejs-sky-backdrop + threejs-procedural-vegetation). Tout en gi = false, ne bloque pas la lumière de cuisson
src/parts/furniture.js	Table, chaise, serviette sur le dossier (PBD), tasse, carafe, livre sur la table, livres sur l'étagère
src/main.js	Création de la scène → cuisson, chargement du fichier ou éclairage plat → soleil → réflexions → post-traitement → caméra (orbite + déplacement, confiné dans la pièce)

Règles d'intégration impératives entre skills

1. Les unités sont en mètres, les coordonnées sont fixes. X le long du mur de la fenêtre, Z vers l'intérieur (mur de la fenêtre en z = 0, z < 0 est l'extérieur), Y vers le haut. Toutes les dimensions sont écrites uniquement dans layout.js.
2. Déterministe. Les nombres aléatoires utilisent toujours RNG(seed). L'ordre, le nom et le nombre de sommets des pièces doivent rester inchangés ; si l'un d'eux varie, la cuisson de ce maillage devient invalide ; applyBake signalera les mailles obsolètes.
3. La lumière est stockée dans les sommets, donc il faut subdiviser. Les surfaces recevant des objets sont subdivisées à 1,5–2 cm, les grandes surfaces à 4–8 cm. Utiliser tbox/tplane.
4. Tous les matériaux éclairés doivent passer par lit(). giPatch remplace directement onBeforeCompile, et lit() enchaîne les patches originaux (variation des murs avec wallPatch, contre-jour du tissu, vent). Les matériaux texturés doivent fournir albedo (la avg de la texture) pour que la couleur des rebonds lumineux soit correcte.
5. Répartition du soleil : La lumière directe est gérée par une DirectionalLight (intensité égale à sun.irr de la configuration de cuisson), les rebonds sont cuits dans le fichier. Ne pas ajouter de lumière ambiante ou d'hémisphère.
6. Les murs doivent avoir un noyau plein, avec shadowSide réglé sur FrontSide. Sans cela, le soleil laisse des points lumineux au bas des murs et dans les coins (constaté en pratique ; voir references/integration.md).
7. L'exposition doit être centrée sur l'intérieur. L'intérieur est environ 1/20 de l'extérieur : exposure ≈ 4,5, l'extérieur utilise ext ≈ 0,3 pour assombrir.
8. Les réflexions sont capturées après la cuisson. captureEnv doit être exécuté après applyBake/runBake, la sonde placée au centre de la pièce.
9. Lorsqu'il y a un arrière-plan extérieur, le far de la caméra doit être supérieur à l'objet le plus éloigné. Le modèle utilise 400 m (haie à 100 m, herbe jusqu'à 260 m). Avec un far de 100 m, la zone coupée au loin révèle une bande de brouillard blanc à l'horizon, qui suit le mouvement de la caméra (constaté en pratique).
10. La caméra d'ombre du soleil doit couvrir la canopée de l'arbre extérieur pour que l'ombre des feuilles tombe à l'intérieur : le modèle place le soleil à 30 m, near 12, far 40.

Mesures (modèle, RTX 4090, Chrome headless, 1280×800)

• Création de la scène en 1,2 secondes, dont la chute de la serviette en ~0,65 s ; 107 000 triangles ; affichage en ~1,6 s.
• Cuisson en direct 128 spp : 61 407 points d'échantillonnage, 26 workers, 6 secondes, gi.bin 743 Ko. Au rechargement, application sur 39 maillages, 0 obsolète.
• preview.jpg : vue de la pièce, du bureau, de la fenêtre, éclairage seul. preview-bake.jpg : à gauche éclairage plat, à droite après cuisson.

Pour aller plus loin

• references/workflow.md : détail de chaque étape, décisions à prendre, livrables et points de validation.
• references/integration.md : interfaces entre les skills, points d'attention, problèmes rencontrés.
• references/checklist.md : liste de vérification et plages de valeurs de référence.