Self-Building Interactive 3D House In WebGPU

You are an expert WebGPU graphics engineer specializing in architectural visualization and procedural animation.

Generate a **single, self-contained HTML file** that implements an interactive 3D construction timeline for a building using Three.js with WebGPU renderer. The application must run entirely in the browser with zero dependencies beyond a Three.js CDN link—no plugins, no build step, no separate assets.

## Building & Animation

The subject is: {{building-description}}

Implement a **five-stage construction timeline** that procedurally animates the building process:

1. **Foundation** – Footings, slab, drainage
2. **Skeleton** – Structural frame, load-bearing walls
3. **Systems** – Plumbing, electrical, HVAC ducting
4. **Envelope** – Exterior walls, windows, roofing
5. **Finished** – Interior finishes, landscaping

Each stage has a defined time window on a 0–100 timeline. Components animate in (scale, fade, or rise) only during their window. The user scrubs a slider to move through construction like a video editor's playhead.

## Required Interactive Features

**Timeline scrubber** – A range input (0–100) that drives all animation; displays current stage name  
**X-ray mode** – Toggle that makes structural elements transparent (opacity 0.15) and highlights hidden infrastructure:  
  - Water (blue pipes)  
  - Electrical (yellow conduit)  
  - Sewage (brown pipes)  
  - HVAC / airflow (cyan ducts)  
  Individual checkboxes to show/hide each system  
**Explode view** – Slider that translates each stage outward along its local normal by 0–5 units  
**Section plane** – A movable clipping plane (X, Y, or Z axis) that slices through the building; show cut-surface wireframe edges  
**Day/Night toggle** – Switches between noon sun (DirectionalLight) and dusk ambient (HemisphereLight + warm PointLights in windows)  
**Preset cameras** – Buttons that tween the camera to ideal viewpoints for each of the five stages  
**Callout labels** – CSS2DRenderer annotations that appear at each stage, naming key components ("Load-bearing beam," "Main water line," etc.); fade in/out with stage visibility

## Technical Requirements

- Use **WebGPURenderer** with fallback message if unsupported  
- **InstancedMesh** for vegetation (trees, shrubs)—at least 12 instances sharing one geometry  
- Procedural geometry via BufferGeometry; you may use BoxGeometry/CylinderGeometry as primitives but assemble the building programmatically  
- All materials: MeshStandardMaterial (responds to lights, supports transparency)  
- OrbitControls for camera  
- UI: clean overlay panel (HTML/CSS) with labeled controls; modern sans-serif, semi-transparent dark background  
- Code structure: clear sections with comments for geometry creation, animation logic, UI event handlers  
- Performance: stable 60fps; use frustum culling, keep draw calls under 100

## Architectural Composition

Style the building and landscape to match {{building-description}}. Use representative colors, proportions, and materials (stucco, tile, wood, glass). Place the structure on a hillside terrain (subtle slope) and distribute instanced vegetation naturally around the site.

## Output

Deliver a **single, complete HTML file** (<!DOCTYPE html>) ready to open in a WebGPU-capable browser (Chrome/Edge 113+). Include all JavaScript inline in a `<script type="module">` tag. Add brief instructions in an HTML comment at the top explaining how to use the timeline and features. Write clean, well-commented code that a developer could easily adapt to other buildings.