WebGL City Model — Thessaloniki
A real-time 3D model of Thessaloniki rendered in the browser with day/night cycle, seasonal themes, and neighbourhood-level navigation.
Summary
A real-time 3D model of Thessaloniki rendered in the browser with day/night cycle, seasonal themes, and neighbourhood-level navigation.
Description
This project delivers the hero visual asset for the Digital Tourism Hub: a fully interactive, browser-based 3D model of central Thessaloniki built with Three.js and custom GLSL shaders.
Technical Stack
- Three.js r160 with custom post-processing pipeline
- Draco-compressed glTF geometry (~18 MB total)
- Instanced mesh rendering for 12 000+ buildings
- Custom atmosphere & sky shader with time-of-day uniforms
- LOD system: 3 detail levels driven by camera distance
Performance Targets
60 fps on mid-range desktop (GTX 1650), 30 fps on recent mobile (A15 / Snapdragon 8 Gen 1). Progressive loading keeps first paint under 2.4 s on a 50 Mbps connection.
Neighbourhood Navigation
Users click or search for a neighbourhood; the camera performs a cinematic fly-to with eased rotation. Each neighbourhood zone triggers contextual info overlays sourced from the Hub API.
Open Data API Gateway
In Progress