Composer 2.5 vs Mythos — Warmup Challenge

Build a complete, production-ready single HTML file that renders an interactive Victorian brass orrery inside a small rooftop observatory, using Three.js. This is a warmup showcase: it should look gorgeous, feel smooth on a 2020 M1 MacBook in Chrome, and teach the viewer something real about how orreries and orbital mechanics work.

Hard rules (non-negotiable)

• One file. Everything in one copy-pasteable .html that runs immediately when opened.
• No external asset URLs. No .gltf, .obj, .jpg, .png, or HDR fetches. Procedural geometry and HTML Canvas–generated textures only.
• No lazy code. No // TODO, no "implement later", no pseudocode, no omitted loops. Every function fully written.
• CDN only for libraries: Three.js (r128 or newer stable) + OrbitControls from cdnjs or unpkg.
• Must run at ~60 FPS on M1 Mac Chrome at 1280×800–1600×900. Design for that budget explicitly.

The scene (what you are building)

Imagine a compact 19th-century astronomer's garret: warm lamplight, dark wood, a domed slit revealing a star field, and on a central pedestal a brass mechanical orrery — the kind of tabletop planetarium sold to gentlemen natural philosophers.

1. The observatory room (procedural architecture)

• Walled room (~6×6 m feel) with dark oak wainscoting and plaster above — both from canvas noise textures (grain, scuffs, subtle variation).
• Domed ceiling with a vertical slit (like a small clamshell observatory roof) showing the night sky beyond.
• Brass floor lamp with a warm point/spot light; one DirectionalLight for moonlight through the slit (cool blue).
• HemisphereLight for fill; ACESFilmicToneMapping; PCFSoftShadowMap enabled.
• A writing desk in the corner with: rolled star chart (cylinder + canvas texture), ink bottle, quill (simple lathe-like meshes). Detail level: recognizable, not CAD-perfect.

2. The orrery (hero object — procedural brass mechanics)

Build the orrery entirely from code (no imported models):

• Central sun: emissive gold sphere with subtle corona (shader or layered transparent shell — keep it cheap).
• Planets Mercury → Saturn (6 bodies total) on separate rotating arms with visually distinct sizes and colors. Use simplified circular orbits in a shared ecliptic plane (accurate ratios matter more than JPL ephemerides).
• Orbital periods: implement real relative angular speeds (e.g. Mercury ~4× Earth, etc.) so watching for 30 seconds feels astronomically honest.
• Earth–Moon subsystem: Earth on its arm; Moon orbiting Earth with correct relative period (~13 rotations per Earth year visually scaled).
• Saturn's ring: flat double-sided ring geometry with procedural noise albedo.
• Brass armature: each orbit arm is a lathe/extruded brass rod with canvas-generated brushed metal (roughness/metalness maps from noise). Include at least 8 decorative gears (involute-ish or simplified cog meshes) that mesh visually — adjacent gears rotate with correct opposite directions and plausible gear ratios.
• Central pillar + meridian ring: brass torus/semicircle with engraved degree ticks (canvas texture).

3. Star field & constellations (instanced, educational)

• Dome beyond the slit: inverted sphere or skydome with ~800–1500 instanced star points (NOT millions). Magnitude-biased size/brightness.
• Optional but valued: connect 3–5 famous constellations (Orion, Ursa Major, Cassiopeia) with faint line segments and toggle labels in the HUD.
• Slow sidereal drift (stars rotate very slowly) independent of orrery speed.

4. Interaction & camera

• OrbitControls around the room; double-click or button to focus on orrery.
• Time controls panel (HTML overlay, styled like brass plate labels):
  • Play / Pause
  • Speed: 1×, 10×, 100×, 1000×
  • "Today" reset button
• Click a planet → HUD shows name, orbital period (Earth days), and one sentence of lore (hard-coded copy is fine).
• Keyboard: Space pause, [ / ] speed down/up.

5. Educational overlay (for a curious engineer)

A collapsible panel (default open for 5 seconds, then collapses) explaining:

• What an orrery is and why gears were used before digital simulation
• The difference between geocentric display vs heliocentric mechanics (this model is heliocentric)
• How angular velocity ratios encode orbital periods
• One paragraph on why we still use instancing and canvas textures instead of loading assets (tie to your implementation choices)

Write this copy in a warm, peer-to-peer tone — you're explaining to a fellow senior engineer over whisky, not lecturing a undergrad.

6. Code architecture (inside the single HTML file)

Organize with clear section comments and functions/modules in this order:

// --- CONFIG & CONSTANTS ---
// --- CANVAS TEXTURE FACTORY ---
// --- PROCEDURAL MESH BUILDERS ---
// --- ORRERY ASSEMBLY (scene graph) ---
// --- ROOM & PROPS ---
// --- STAR DOME ---
// --- LIGHTING & RENDERER ---
// --- UI / HUD ---
// --- INPUT & ANIMATION LOOP ---
// --- INIT ---

Use a single animate() loop with delta-time. All rotations driven by elapsed * angularSpeed, not frame-count hacks.

7. Performance guardrails (M1-safe)

• Use InstancedMesh for stars (and any repeated bolts/screws on the orrery if you add them).
• Cap shadow map at 1024×1024 or 2048×2048 max.
• No full-screen raymarching. No 2048×2048 GPU simulations.
• Merge static room geometry where sensible.
• Include a tiny FPS counter (top-right, monospace) and a ?perf=1 URL flag that logs draw calls once on load.

Visual quality bar

When done, a screenshot should read as: "Someone who understands both Three.js and real observatory aesthetics made this." Warm interior, cold sky, gleaming brass, readable UI. Not grey debug primitives.

Deliverable

Output the full HTML source only — no markdown wrapper, no explanation before or after. The file must open and run.