`HIGH-END-VERSIONS-SPEC.md`

58 lines
# HIGH-END VERSIONS SPEC — V12–V21 (10 new max-FPS, high-end-graphics showrooms)

Steve: "add 10 more versions of a showroom with highest fps high end graphics available… This has to be better."
The bar is **genuinely high-end** — Steve has repeatedly rejected "juvenile" graphics. A toy scene fails.

## Architecture (parallel-safe)
- Each version = ONE standalone overlay file `public/proto/v{N}-{slug}.html` (N = 12..21), same pattern as
  the existing `public/proto/v6-colorriver.html` … `v10-concierge.html` (READ ONE first for structure:
  how it loads, pulls products, a "Back" button, postMessage to the picker).
- Pull real product imagery from the live API: `GET /api/showroom/products?limit=50` (China Seas) — use
  the `image`/`tile` fields as the wallcovering textures on the boards/walls. Real designs, not placeholders.
- Do NOT edit `showroom.js`, `rack.js`, or `versions.js` — those are owned elsewhere. Your file only.
- Three.js r128 (match the rest of the app; load from the same CDN the existing protos use).

## HIGH-END GRAPHICS BASELINE (every version MUST use all of these)
1. **Renderer:** `WebGLRenderer({ antialias:true, powerPreference:'high-performance' })`,
   `outputEncoding = sRGBEncoding`, `toneMapping = ACESFilmicToneMapping`, `toneMappingExposure` tuned,
   `physicallyCorrectLights = true`, shadows `PCFSoftShadowMap`.
2. **Image-based lighting:** a `PMREMGenerator` environment (procedural `RoomEnvironment` or a gradient/
   studio env) so metals/gloss reflect — `scene.environment = envMap`. No flat ambient-only lighting.
3. **PBR materials:** `MeshPhysicalMaterial`/`MeshStandardMaterial` with real `metalness`/`roughness`/
   `clearcoat`/`envMapIntensity`. Wallcovering textures get `anisotropy = renderer.capabilities.getMaxAnisotropy()`,
   `sRGBEncoding`, correct `repeat` for the 27" pattern scale.
4. **Lighting:** key + fill + rim, area/spot where the aesthetic calls for it; soft shadows from the key.
5. **Polish (use what fits the look, FPS permitting):** subtle bloom (UnrealBloomPass) for emissive/spec
   highlights, gentle vignette, optional SSAO/contact shadows, fog for depth. Tasteful, not blown-out.

## HIGHEST-FPS BUDGET (every version MUST hold these)
- `renderer.setPixelRatio(Math.min(devicePixelRatio, 2))`.
- **InstancedMesh** for any repeated geometry (the 50 board frames, repeated props).
- Cap texture sizes; lazy-load board textures; reuse one geometry/material where possible (low draw calls).
- Prefer **on-demand rendering** (render only when the camera/scene changes) OR a steady rAF loop that
  holds ≥60fps on a laptop GPU. Pause rendering on `visibilitychange`.
- Show an FPS readout (toggle) so the number is provable. Target ≥60fps; never ship < 55.
- Keep the user FIXED in the center looking at the wing bank (the project's core rule) unless the
  aesthetic is explicitly a seated/room variant — match the established interaction where sensible.

## THE 10 AESTHETICS (each a DISTINCT high-end look — no two alike)
- **V12 Gallery Noir** — black box gallery, single warm spotlights per board, deep chiaroscuro, faint bloom, polished concrete floor with contact reflections.
- **V13 Atrium Daylight** — glass atrium, bright HDRI-style sky environment, soft global illumination, long sun-shaft shadows, airy.
- **V14 Velvet Lounge** — moody jewel-tone velvet walls, warm area lights, shallow depth-of-field, bloom on brass sconces.
- **V15 Brutalist Concrete** — raw board-formed concrete (PBR normal/roughness), one hard directional key, strong AO, monochrome restraint.
- **V16 Art-Deco Brass & Marble** — brass-framed boards, marble floor (clearcoat), env-mapped reflective metals, symmetrical, warm.
- **V17 Japanese Tatami** — tatami + shoji screens, soft diffuse north light, calm minimal palette, subtle paper translucency.
- **V18 Infinity Mirror** — mirrored floor + side walls (reflection), neon edge-light accents, the bank repeating into the distance.
- **V19 Conservatory Garden** — botanical conservatory, dappled leaf-shadow gobo light, greenery, light volumetric haze.
- **V20 Penthouse Dusk** — floor-to-ceiling windows, dusk skybox + city-bokeh backdrop, warm interior key, reflections in the glass.
- **V21 Grateful Dead / Garcia Room** — Steve's psychedelic room: animated liquid-light-show color wash, tie-dye env map, slow color cycling, dancing-bears / lightning-bolt motif accents, emissive bloom. Reference the `garcia-room-agent` skill if a local asset/build exists; else build it procedurally. Joyful, trippy, but still rendered high-end (not garish).

## Per-version proof (each must pass before it counts)
- Loads at `/proto/v{N}-{slug}.html`, 0 console errors, real China Seas textures on the boards/walls.
- Visibly distinct high-end look (screenshot), FPS readout ≥ 55 (say if only swiftshader/headless was available — don't fake a hardware number).
- "Back" button + picker postMessage works (so it slots into the V-picker like V6–V10).

## Registration (orchestrator does this LAST, serialized)
After the proto files exist, ONE edit to `versions.js` adds V12–V21 to the registry/VERSION_ORDER as
`overlay:'/proto/v{N}-{slug}.html'` entries (same shape as V6–V10), each with a numbered-element list.