threejs-photoreal-interior

Fotorealistische Innenraum-Szene (Überblick)

Dieses Skill verknüpft die folgenden Skills zu einem Workflow und stellt eine direkt ausführbare Projektvorlage bereit. Die Methode stammt von room-at-dawn (MIT): Ein Schlafzimmer am frühen Morgen, vollständig programmatisch erzeugt, läuft im Browser. Der Umfang des Originalprojekts liegt etwa bei:

• 1,83 Millionen Dreiecke, lädt in ca. 7 Sekunden (RTX 4090).
• Die gebackene Beleuchtungsdatei gi.bin ist ca. 13 MB groß, der Bake-Vorgang dauert ca. 30 Minuten.
• Das Video ist 4K HDR10.

Welcher Skill für welchen Schritt

Schritt	Skill	Ausgabe
0	3d-spec-prompt	Schreibe die Idee als überprüfbare Spezifikation: Atmosphäre, Tageszeit, Maßstab, Hauptobjekte, Kameraposition
1 Größen & Gehäuse	template/src/layout.js, parts/room.js dieses Skills	Reale Maße (Meter), Fenster, Wandstärke, Gehäuse
2 Hauptobjekte	threejs-procedural-cloth (Bettdecke, Decke, Vorhänge), threejs-procedural-vegetation (Bäume vor dem Fenster), threejs-procedural-pothos (Zimmerpflanzen)	Objekte, auf die der Blick fällt
2b Himmel & Außenbereich	threejs-sky-backdrop (Himmelsvorgaben, Wolken, Gras vor dem Fenster, Häuser, entfernte Hecken, nur sichtbare Dinge)	Ein Himmel, gleichzeitig für Bake und Rendering
3 Materialien	threejs-procedural-textures	Wände, Boden, Holz, Stoffe, Gebrauchsspuren, Buchcover
4 Kleine Objekte	threejs-lived-in-props	Auf der Stuhllehne hängende Handtücher, Tassen, Kannen, Socken, Kabel, Papierknäuel
5 Beleuchtung	threejs-baked-gi	Himmelslicht und Sonnenreflexionen werden auf die Vertices gebacken, gespeichert als gi.bin; Direktes Sonnenlicht erfolgt in Echtzeit
6 Bilddarstellung	threejs-realtime-post	AO, Bloom, getrennte Belichtung für Fensterbereich und Innenraum, Farbkorrektur
7 Validierung, Aufnahme	webgl-deterministic-recording	Screenshot-Regression, Frame-für-Frame-Rendering, Filmausgabe (Tiefenschärfe, Bewegungsunschärfe, HDR10)

Neues Projekt starten

bash <skill-verzeichnis>/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/            Bereits mit vorgebackenem bake/gi.bin
# http://127.0.0.1:5430/?bake=128   Nach Szenenänderungen neu backen, „gi.bin herunterladen“ klicken, nach bake/ speichern

(<skill-verzeichnis> ist das Basisverzeichnis, das beim Laden dieses Skills angezeigt wird; bei Plugin-Installation unter ~/.claude/plugins/cache/)

• Dieses Skript kopiert die Vorlage und die Bibliotheken der Sub-Skills nach src/lib/ (gi, post, props, textures, cloth, vegetation, pothos, sky, film). Das Projekt ist dann unabhängig.
• Kein Build-Tool, kein npm erforderlich. three und three-mesh-bvh werden von jsdelivr geladen.
• URL-Parameter:
  • ?cam= Kamera (room, desk, window, corner, view=am Fenster nach draußen).
  • ?t= Feste Zeit (Blätter, Wolken unbewegt, für Screenshots).
  • ?view=gi Nur die Beleuchtung anzeigen.
  • ?only=furniture Nur bestimmte Teile bauen.
  • ?exp= Belichtung.
• Die Seite stellt window.__ready, window.__stats, window.__camera bereit, die direkt mit den Tools von webgl-deterministic-recording verwendet werden können.
• Bedienung: Ziehen zum Drehen der Ansicht; WASD/Pfeiltasten zum Laufen (Shift zum langsamen Gehen, Wände und Möbel blockieren); Klick auf die Leinwand schaltet auf Maus-Steuerung zum Drehen des Blicks, Augenhöhe sinkt auf 1,6 m (Esc verlässt diesen Modus). Im Orbit-Modus sind Kamera und Zielpunkt auf den Raum begrenzt, Herauszoomen oder Verschieben durchdringt keine Wände.

Struktur der Vorlage:

Datei	Inhalt
src/layout.js	Der einzige Ort für Maße, Sonne, Himmel (SKIES-Vorgaben), Außenkonfiguration (OUTSIDE), Farbkorrektur, Kamera, und nicht passierbare Möbelbereiche (BLOCKERS)
src/materials.js	lit() (GI-Patch, erhält den ursprünglichen Shader-Patch, speichert Albedo), solid(), tbox(), tplane(), metres()
src/scene.js	Erstellt jedes Teil der Reihe nach gemäß der order, Reihenfolge ist fest
src/parts/room.js	Boden, Decke, vier Wände, Fensteröffnung und Fensterbrett, schwarzes Außengehäuse, Wandkern
src/parts/outside.js	Außenbereich: Himmelskugel, Gras, Kiesweg, Hecke, Haus, entfernte Baumreihe, Hauptbaum und Bäume in mittlerer/ferner Entfernung (nur Sichtbares, threejs-sky-backdrop + threejs-procedural-vegetation). Alle mit gi = false, blockieren kein Backlicht
src/parts/furniture.js	Tisch, Stuhl, auf der Stuhllehne hängendes Handtuch (PBD), Tasse, Kanne, Bücher auf dem Tisch, Bücher im Regal
src/main.js	Szene erstellen → Backen, Datei laden oder flaches Licht → Sonne → Reflexionen → Nachbearbeitung → Kamera (Orbit + Laufen, auf den Raum begrenzt)

Skill-übergreifende Regeln (unbedingt einhalten)

1. Einheit ist Meter, Koordinaten sind fest. X entlang der Fensterwand, Z in den Raum hinein (Fensterwand bei z = 0, z < 0 ist außen), Y nach oben. Alle Maße nur in layout.js.
2. Deterministisch. Zufallszahlen immer mit RNG(seed). Reihenfolge, Name und Vertexanzahl der Teile – ändert sich eines davon, wird der Bake für dieses Mesh ungültig; applyBake meldet veraltet.
3. Licht liegt auf Vertex – also unterteilen. Oberflächen, auf denen Dinge stehen, auf 1,5–2 cm unterteilen, große Flächen auf 4–8 cm. tbox/tplane verwenden.
4. Alle beleuchteten Materialien müssen durch lit() gehen. giPatch ersetzt direkt onBeforeCompile, lit() hängt den ursprünglichen Patch hinten an, einschließlich Wandvariationen (wallPatch), Stoff-Gegenlicht, Wind. Materialien mit Texturen müssen albedo angeben (Durchschnitt der Textur), damit die Farbe des reflektierten Lichts korrekt ist.
5. Arbeitsteilung der Sonne: Direktes Licht mit DirectionalLight (Intensität gleich der im Bake gesetzten sun.irr), Reflexionslicht wird in die Datei gebacken. Kein zusätzliches Umgebungs- oder Halbkugellicht.
6. Wände benötigen einen massiven Wandkern, dessen shadowSide auf FrontSide gesetzt ist. Ohne diesen scheint die Sonne an Wandfüßen und Ecken als helle Punkte durch (tatsächlich aufgetreten; siehe references/integration.md).
7. Belichtung auf Innenraum ausrichten. Der Innenraum hat nur etwa 1/20 der Helligkeit des Außenbereichs: exposure ca. 4,5, Fensterbereich mit ext ca. 0,3 abdunkeln.
8. Reflexionen nach dem Backen aufnehmen. captureEnv muss nach applyBake/runBake ausgeführt werden, die Sonde in der Raummitte.
9. Bei Fernsicht vor dem Fenster muss die Kamera-Far-Ebene größer sein als das am weitesten entfernte Objekt. Standardvorlage: 400 m (Hecke bei 100 m, Gras bis 260 m). Bei Far-Ebene von 100 wird der Himmel am Rand der beschnittenen Fernsicht als weißer Dunststreifen sichtbar, der sich mit der Kamerabewegung mitbewegt (tatsächlich aufgetreten).
10. Der Schattenkamerabereich der Sonne muss die Baumkronen vor dem Fenster abdecken, damit Baumschatten in den Raum fallen. Standardvorlage: Sonne bei 30 m, near 12, far 40.

Messwerte (Standardvorlage, RTX 4090, Chrome headless, 1280×800)

• Szenenerstellung: 1,2 s, davon Handtuchsimulation ca. 0,65 s; 107.000 Dreiecke; von Seitenaufruf bis Bildanzeige ca. 1,6 s.
• Live-Bake 128 spp: 61.407 Abtastpunkte, 26 Worker, 6 s, gi.bin 743 KB. Nach erneutem Laden 39 Netze angewandt, 0 ungültig.
• preview.jpg: Raum, Schreibtisch, Fenster, nur Licht. preview-bake.jpg: Links flaches Licht, rechts nach Bake.

Weiterführendes

• references/workflow.md: Vorgehen bei jedem Schritt, zu treffende Entscheidungen, Ausgaben und Prüfpunkte.
• references/integration.md: Schnittstellen zwischen den Skills, zu beachtende Punkte, aufgetretene Probleme.
• references/checklist.md: Abnahmeliste und Referenzbereiche für die Zahlen.