Week 5: Earthquake Building Collapse Demo 🏢💥

Goal: Create a spectacular earthquake simulation with a collapsing multi-story building Target: 50K debris particles @ 60 FPS with GPU acceleration Duration: Week 5 of Month 2

🎯 Demo Objectives

Visual Impact

✅ Multi-story building (5-10 floors)
✅ Progressive structural collapse
✅ 50K+ debris particles
✅ Realistic physics simulation
✅ Camera shake effects
✅ Dust particle effects
✅ Sound effects (optional)

Technical Requirements

✅ Integration with GPU physics system
✅ Fracture physics for building destruction
✅ Real-time particle spawning
✅ 60 FPS performance
✅ Interactive controls (trigger earthquake, adjust intensity)

User Experience

✅ Spectacular visual showcase
✅ Demonstrates GPU physics capabilities
✅ Educational value (structural engineering)
✅ Shareable demo (video recording)

🏗️ Architecture Design

System Components

┌─────────────────────────────────────────┐
│     Earthquake Demo System              │
└─────────────────┬───────────────────────┘
                  │
    ┌─────────────┼─────────────┐
    │             │             │
    ▼             ▼             ▼
┌─────────┐  ┌─────────┐  ┌─────────┐
│Building │  │Fracture │  │Camera   │
│Model    │  │Physics  │  │Effects  │
└────┬────┘  └────┬────┘  └────┬────┘
     │            │            │
     ▼            ▼            ▼
┌─────────────────────────────────────┐
│   GPU Physics Engine (existing)     │
│   • 50K particles                   │
│   • Spatial grid collision          │
│   • Instanced rendering             │
└─────────────────────────────────────┘

Component Breakdown

1. Building Model

Procedural building generation
Multi-floor structure (5-10 floors)
Structural elements (beams, columns, floors)
Material properties (concrete, steel)
Weak points for realistic collapse

2. Fracture Physics

Progressive structural failure
Beam/column destruction
Floor collapse propagation
Debris spawning on fracture
Connection breaking

3. Debris Particles

50K GPU-accelerated particles
Various sizes (small chunks to large slabs)
Realistic mass distribution
Collision with ground and other debris
Settling and rest states

4. Camera Effects

Earthquake shake (procedural noise)
Dynamic FOV changes
Follow-cam during collapse
Slow-motion option
Multiple camera angles

5. Visual Effects

Dust particle clouds
Debris trails
Impact effects
Material properties (color coding)

📋 Implementation Plan

Phase 1: Building Structure (Day 1-2)

Task 1.1: Procedural Building Generator

typescript

interface BuildingConfig {
  floors: number; // 5-10
  floorHeight: number; // 3.0m
  width: number; // 20m
  depth: number; // 20m
  columnsPerSide: number; // 4
  beamsPerFloor: number; // 12
}

class ProceduralBuilding {
  generateStructure(config: BuildingConfig): BuildingStructure;
  getStructuralElements(): StructuralElement[];
  getWeakPoints(): WeakPoint[];
}

Task 1.2: Structural Elements

typescript

interface StructuralElement {
  type: 'column' | 'beam' | 'floor';
  position: vec3;
  dimensions: vec3;
  material: 'concrete' | 'steel';
  health: number; // 0-100%
  connections: number[]; // Connected element IDs
  mass: number;
}

interface WeakPoint {
  elementId: number;
  failureThreshold: number;
  failureMode: 'snap' | 'bend' | 'crush';
}

Task 1.3: Building Mesh

Generate visual mesh for building
Instanced rendering for structural elements
Color coding by material/stress
LOD for performance

Deliverable: ProceduralBuilding.ts (300 lines)

Phase 2: Fracture Physics (Day 2-3)

Task 2.1: Structural Analysis

typescript

interface StructuralAnalysis {
  calculateStress(element: StructuralElement): number;
  propagateFailure(failedElement: number): number[];
  updateConnections(brokenElements: number[]): void;
  isStable(element: StructuralElement): boolean;
}

class FracturePhysics {
  analyzeStructure(building: BuildingStructure): void;
  simulateEarthquake(intensity: number, duration: number): void;
  updateStructuralIntegrity(dt: number): void;
  getFailedElements(): StructuralElement[];
}

Task 2.2: Progressive Collapse

Top-down or bottom-up collapse
Chain reaction of failures
Realistic collapse patterns
Timing and sequencing

Task 2.3: Debris Spawning

typescript

interface DebrisSpawnConfig {
  sourceElement: StructuralElement;
  particleCount: number;
  sizeRange: [number, number];
  velocityRange: [number, number];
  angularVelocity: boolean;
}

class DebrisSpawner {
  spawnFromElement(config: DebrisSpawnConfig): Particle[];
  updateParticlePool(): void;
  getActiveDebris(): Particle[];
}

Deliverable: FracturePhysics.ts (400 lines)

Phase 3: GPU Integration (Day 3-4)

Task 3.1: Particle System Integration

typescript

class EarthquakeSimulation {
  private gpuPhysics: ComputePipeline;
  private spatialGrid: SpatialGrid;
  private renderer: InstancedRenderer;
  private building: ProceduralBuilding;
  private fracture: FracturePhysics;

  async initialize(): Promise<void>;
  update(dt: number): void;
  render(camera: CameraParams): void;
}

Task 3.2: Debris Particle Upload

Convert structural elements to GPU particles
Upload debris to GPU buffers
Manage particle lifecycle (spawn/destroy)
Track active particle count

Task 3.3: Performance Optimization

Batch debris spawning (avoid frame spikes)
Particle pooling
Sleep state for settled debris
Culling off-screen debris

Deliverable: EarthquakeSimulation.ts (350 lines)

Phase 4: Camera & Effects (Day 4-5)

Task 4.1: Camera Shake

typescript

interface CameraShake {
  intensity: number; // 0-10
  frequency: number; // Hz
  duration: number; // seconds
  falloff: 'linear' | 'exponential';
}

class CameraController {
  applyEarthquakeShake(config: CameraShake): void;
  updateShake(dt: number): vec3;
  smoothTransition(target: CameraParams, duration: number): void;
}

Task 4.2: Visual Effects

Dust particle system (separate from debris)
Impact flash effects
Debris trails
Screen effects (optional)

Task 4.3: Multiple Camera Modes

Fixed camera (overview)
Follow camera (track collapse)
Cinematic camera (pre-scripted path)
Free camera (user controlled)

Deliverable: CameraEffects.ts (250 lines)

Phase 5: Demo Scene & UI (Day 5-6)

Task 5.1: Interactive Demo

typescript

interface EarthquakeControls {
  triggerEarthquake(): void;
  setIntensity(value: number): void;
  resetBuilding(): void;
  toggleSlowMotion(): void;
  changeCamera(mode: CameraMode): void;
}

class EarthquakeDemoScene {
  setupUI(): void;
  handleInput(): void;
  updateSimulation(dt: number): void;
  render(): void;
}

Task 5.2: UI Controls

Earthquake trigger button
Intensity slider (1-10)
Reset button
Camera mode selector
FPS counter
Particle count display
Slow-motion toggle

Task 5.3: Visual Polish

Loading screen
Instructions overlay
Stats display
Recording mode (optional)

Deliverable: EarthquakeDemoScene.ts (300 lines)

Phase 6: Testing & Polish (Day 6-7)

Task 6.1: Performance Testing

50K particles @ 60 FPS validation
Memory usage monitoring
Garbage collection profiling
Frame time consistency

Task 6.2: Visual Refinement

Material colors and textures
Lighting adjustments
Dust effect tuning
Camera shake calibration

Task 6.3: User Testing

Controls intuitive?
Visual impact sufficient?
Performance acceptable?
Educational value clear?

Deliverable: Test report + refinements

🎨 Visual Design

Building Appearance

Floor 10: ▓▓▓▓▓▓▓▓▓▓
Floor 9:  ▓▓▓▓▓▓▓▓▓▓
Floor 8:  ▓▓▓▓▓▓▓▓▓▓
Floor 7:  ▓▓▓▓▓▓▓▓▓▓
Floor 6:  ▓▓▓▓▓▓▓▓▓▓
Floor 5:  ▓▓▓▓▓▓▓▓▓▓
Floor 4:  ▓▓▓▓▓▓▓▓▓▓
Floor 3:  ▓▓▓▓▓▓▓▓▓▓
Floor 2:  ▓▓▓▓▓▓▓▓▓▓
Floor 1:  ▓▓▓▓▓▓▓▓▓▓
Ground:   ═══════════

Materials:
- Concrete: Gray (#808080)
- Steel: Dark gray (#404040)
- Debris: Gradient based on material
- Dust: Light gray with transparency

Collapse Sequence

T=0s:   Building intact
        └─ Earthquake starts (ground shake)

T=1s:   Weak points begin to fail
        └─ First cracks appear
        └─ Minor debris falls

T=2s:   First column failure
        └─ Floor above begins to sag
        └─ Debris spawning increases

T=3s:   Progressive collapse begins
        └─ Chain reaction of failures
        └─ Major debris clouds

T=4s:   Multiple floors collapsing
        └─ Massive particle spawning
        └─ Ground impacts

T=5s:   Final collapse
        └─ Building fully down
        └─ Debris settling

T=6-10s: Settling phase
         └─ Particles coming to rest
         └─ Dust slowly dissipating

Camera Angles

Angle 1: Overview (Default)

Position: (30, 20, 30)
Target: Building center
FOV: 60°
Shows entire collapse

Angle 2: Street Level

Position: (50, 2, 0)
Target: Building base
FOV: 70°
Ground-level perspective

Angle 3: Top-Down

Position: (0, 80, 0)
Target: Building center
FOV: 45°
Architectural view

Angle 4: Cinematic

Dynamic path following collapse
Variable FOV for impact
Slow-motion capable

🧪 Testing Strategy

Performance Benchmarks

typescript

interface PerformanceTarget {
  targetFPS: 60;
  maxParticles: 50000;
  maxFrameTime: 16.67; // ms
  memoryLimit: 100; // MB
}

interface PerformanceMetrics {
  averageFPS: number;
  minFPS: number;
  maxFrameTime: number;
  particleCount: number;
  memoryUsage: number;
}

Test Scenarios

Test 1: Baseline Performance

Empty scene (building only, no collapse)
Should maintain 60 FPS
Memory: ~20 MB

Test 2: Partial Collapse

10K particles active
Should maintain 60 FPS
Memory: ~40 MB

Test 3: Full Collapse

50K particles active
Target: 60 FPS (min 55 FPS acceptable)
Memory: ~80 MB

Test 4: Stress Test

100K particles (double target)
Should maintain 30+ FPS
Memory: ~150 MB

Quality Checks

Visual Quality

✅ Building looks realistic
✅ Collapse is believable
✅ Debris behavior natural
✅ Camera shake feels right
✅ Dust effects enhance realism

Physics Accuracy

✅ Structural failures make sense
✅ Debris falls realistically
✅ Collisions work properly
✅ Particles settle naturally

User Experience

✅ Controls are intuitive
✅ Demo is impressive
✅ Performance is smooth
✅ Loading is quick

📦 Deliverables Checklist

Code (Week 5)

[ ] ProceduralBuilding.ts (300 lines)
[ ] FracturePhysics.ts (400 lines)
[ ] EarthquakeSimulation.ts (350 lines)
[ ] CameraEffects.ts (250 lines)
[ ] EarthquakeDemoScene.ts (300 lines)
[ ] Tests: Earthquake.test.ts (200 lines)
Total: ~1,800 lines

Documentation

[ ] Architecture overview
[ ] User guide
[ ] API documentation
[ ] Performance analysis
Total: ~400 lines

Demo Assets

[ ] HTML demo page
[ ] Interactive controls
[ ] Multiple camera angles
[ ] Recording capability (optional)

Testing

[ ] Performance benchmarks
[ ] Visual quality checks
[ ] User experience validation
[ ] Cross-browser testing

🎯 Success Criteria

Must Have (MVP)

✅ 50K particles @ 60 FPS
✅ Building collapse animation
✅ GPU physics integration
✅ Interactive controls
✅ Camera shake effects

Should Have

✅ Multiple camera angles
✅ Dust particle effects
✅ Slow-motion mode
✅ Reset functionality
✅ Performance stats

Nice to Have

🎯 Sound effects
🎯 Video recording
🎯 Configurable building (floors, size)
🎯 Different collapse patterns
🎯 Damage visualization (stress colors)

🔮 Future Enhancements

Post-Week 5

Multiple Building Types
- Residential
- Commercial
- Industrial
- Historical
Advanced Physics
- Rebar deformation
- Material fatigue
- Wind effects
- Aftershocks
Environmental Effects
- Surrounding buildings
- Street damage
- Underground effects
- Tsunami (coastal)
Educational Mode
- Structural engineering lessons
- Safety information
- Historical earthquakes
- Building codes

📊 Project Timeline

Day 1-2: Building Structure
  ├─ Procedural building generator
  ├─ Structural elements
  └─ Visual mesh

Day 2-3: Fracture Physics
  ├─ Structural analysis
  ├─ Progressive collapse
  └─ Debris spawning

Day 3-4: GPU Integration
  ├─ Particle system integration
  ├─ Performance optimization
  └─ Debris lifecycle

Day 4-5: Camera & Effects
  ├─ Camera shake
  ├─ Visual effects
  └─ Multiple camera modes

Day 5-6: Demo Scene & UI
  ├─ Interactive controls
  ├─ UI implementation
  └─ Visual polish

Day 6-7: Testing & Polish
  ├─ Performance testing
  ├─ Visual refinement
  └─ User testing

Total Duration: 7 days (Week 5)

💡 Technical Considerations

Memory Management

Particle pooling to avoid GC
Reuse debris particles when possible
Clear settled particles (beyond view)
Efficient buffer management

Performance Optimization

Batch debris spawning (max 1K/frame)
Sleep state for settled debris
Frustum culling for off-screen particles
LOD for building elements

Physics Accuracy

Realistic material properties
Proper mass distribution
Accurate collision response
Energy conservation

Visual Quality

Appropriate debris sizes
Realistic dust effects
Smooth camera motion
Clear visual feedback

🚀 Getting Started

Prerequisites

✅ GPU acceleration system (Phase 1-3)
✅ WebGPU-capable browser
✅ HoloScript development environment
✅ Test data for structural analysis

Initial Setup

bash

cd c:/Users/josep/Documents/GitHub/HoloScript
mkdir -p packages/demos/earthquake
cd packages/demos/earthquake

# Create package structure
pnpm init

First Implementation Step

Start with ProceduralBuilding.ts - the foundation for everything else.

Ready to begin Week 5! 🏢💥

Let's create a spectacular earthquake demo that showcases the power of GPU-accelerated physics!

Week 5: Earthquake Building Collapse Demo 🏢💥 ​

🎯 Demo Objectives ​

Visual Impact ​

Technical Requirements ​

User Experience ​

🏗️ Architecture Design ​

System Components ​

Component Breakdown ​

📋 Implementation Plan ​

Phase 1: Building Structure (Day 1-2) ​

Phase 2: Fracture Physics (Day 2-3) ​

Phase 3: GPU Integration (Day 3-4) ​

Phase 4: Camera & Effects (Day 4-5) ​

Phase 5: Demo Scene & UI (Day 5-6) ​

Phase 6: Testing & Polish (Day 6-7) ​

🎨 Visual Design ​

Building Appearance ​

Collapse Sequence ​

Camera Angles ​

🧪 Testing Strategy ​

Performance Benchmarks ​

Test Scenarios ​

Quality Checks ​

📦 Deliverables Checklist ​

Code (Week 5) ​

Documentation ​

Demo Assets ​

Testing ​

🎯 Success Criteria ​

Must Have (MVP) ​

Should Have ​

Nice to Have ​

🔮 Future Enhancements ​

Post-Week 5 ​

📊 Project Timeline ​

💡 Technical Considerations ​

Memory Management ​

Performance Optimization ​

Physics Accuracy ​

Visual Quality ​

🚀 Getting Started ​

Prerequisites ​

Initial Setup ​

First Implementation Step ​

Week 5: Earthquake Building Collapse Demo 🏢💥

🎯 Demo Objectives

Visual Impact

Technical Requirements

User Experience

🏗️ Architecture Design

System Components

Component Breakdown

📋 Implementation Plan

Phase 1: Building Structure (Day 1-2)

Phase 2: Fracture Physics (Day 2-3)

Phase 3: GPU Integration (Day 3-4)

Phase 4: Camera & Effects (Day 4-5)

Phase 5: Demo Scene & UI (Day 5-6)

Phase 6: Testing & Polish (Day 6-7)

🎨 Visual Design

Building Appearance

Collapse Sequence

Camera Angles

🧪 Testing Strategy

Performance Benchmarks

Test Scenarios

Quality Checks

📦 Deliverables Checklist

Code (Week 5)

Documentation

Demo Assets

Testing

🎯 Success Criteria

Must Have (MVP)

Should Have

Nice to Have

🔮 Future Enhancements

Post-Week 5

📊 Project Timeline

💡 Technical Considerations

Memory Management

Performance Optimization

Physics Accuracy

Visual Quality

🚀 Getting Started

Prerequisites

Initial Setup

First Implementation Step