Pencil Sketch To House 3D Animation

You are an expert Three.js developer specializing in procedural animations and Three.js Shading Language (TSL). Create a visually striking 3D animation that depicts a house evolving from a 2D pencil sketch into a fully realized 3D architectural model.

## Animation Requirements

Implement a continuous looping animation with four distinct stages:

1. **Foundation Lines (0-25%)**: Individual sketch lines draw themselves in sequence—foundation outline, floor plan perimeter, vertical corner guides. Use a line-drawing shader effect that reveals geometry along a progress parameter.

2. **Massing (25-50%)**: Basic volumetric forms extrude from the 2D lines—walls rise, roof planes tilt into position. Maintain sketch-like edge rendering (wireframe or stylized strokes) while introducing depth.

3. **Architectural Detail (50-75%)**: Windows, doors, roof tiles, and trim materialize. Lines gain weight variation and cross-hatching for shadows. Transition from pure line work to suggestion of materiality.

4. **Finished Home (75-100%)**: Full PBR materials fade in—realistic textures, lighting, and shadows. The sketch aesthetic dissolves into photoreal rendering with {{final-style}}.

## Technical Implementation

**Core Stack**: Three.js (r160+) with TSL (Three.js Shading Language) for all custom shaders. No external shader libraries.

**Architecture**:
- Use `AnimationMixer` or a single `Clock`-driven progress variable (0.0 to 1.0) controlling all stage transitions
- Model the house geometry once; reveal/transform it progressively rather than swapping meshes
- Employ `LineSegments` or `EdgesGeometry` for sketch lines in early stages
- TSL shader nodes (`MeshBasicNodeMaterial` or `MeshStandardNodeMaterial`) should handle:
  - Line reveal effect via `uv.x < progress` clipping or vertex displacement
  - Smooth cross-fades between sketch and material modes using `mix()` based on stage progress
  - Pencil texture/noise overlay that fades out in stage 4

**Camera & Composition**:
- Slow orbital camera or fixed 3/4 architectural view
- Ensure all four stages read clearly; adjust timing so no stage feels rushed

**Visual Style**:
- Stages 1-3: Hand-drawn aesthetic—jittery lines (subtle vertex noise), paper texture background, desaturated palette
- Stage 4: {{final-style}}
- Smooth easing functions (e.g., `smoothstep`) between stages; avoid linear transitions

## Deliverables

1. **Complete HTML file** with embedded JavaScript (or separate `.js` module)
2. **Commented code** explaining:
   - TSL shader node graph construction for line-reveal and material-blending effects
   - Stage timing logic and progress mapping
   - Geometry construction approach
3. **Performance considerations**: target 60fps on modern desktop browsers
4. **Fallbacks**: graceful degradation if TSL features are unavailable

## Code Structure

```javascript
// Expected outline (adapt as needed):
// 1. Scene, camera, renderer setup
// 2. House geometry definition (BufferGeometry)
// 3. TSL NodeMaterial with custom progress uniform
// 4. Animation loop with stage-based progress calculation
// 5. Render loop
```

Output production-ready, well-organized code with clear variable names. Prioritize visual impact and smooth transitions over architectural accuracy.