Phase 4 — Frontend Graphics

Duration: ~14 working days
Critical-path predecessor: Phase 1
Status: in progress

Deliverables

1. Leaflet multi-layer map — extended from Phase 1/2
2. MapLibre GL JS vector engine — feature-flagged, GPU-accelerated
3. Three.js + R3F 3D Himalayan terrain — heightmap displacement + POM
4. GLSL shader pipeline: atmospheric scattering, snow surface, volumetric clouds
5. Post-processing: SSAO, Bloom, ChromaticAberration, Vignette
6. Cinematic camera path — deterministic Catmull-Rom spline (Tandi → Salal)
7. Engine switcher + quality toggles — runtime Leaflet / MapLibre / 3D
8. FPS monitor — diagnostic overlay targeting ≥ 55 fps on M1
9. Lighthouse CI gate — 90/95/95/90 budgets on every deploy

Acceptance Gate

60 fps on M1-class machines with all overlays active.

cd snow-ir-app
pnpm dev
# switch engine to "3D" — FPS badge should show ≥ 55 fps on M1+

Parallax Occlusion Mapping

16-step POM in the snow fragment shader delivers micro-topographic detail at zero geometry cost.

Camera Determinism

Per §6.3, all flyovers are deterministic Catmull-Rom splines. The same hazard event renders identically across briefings.