A browser-based 3D visualization of the world map built with Three.js.
It renders a global heightmap interactively, streaming and caching tiles dynamically for smooth navigation.
- 3D heightmap rendering with realistic terrain
- GPU clipmap centered on the camera. Based on this article.
- CPU quadtree for adaptive tile scaling & level-of-detail management
- Tile cache system
- One GPU texture for height data
- One GPU texture for imagery
- CPU-managed tile priority & streaming
- LRU cache keeps visible tiles loaded and evicts unused tiles
- Built with Three.js → runs directly in the browser
- Vertices are generated using a GPU clipmap shader, avoiding floating heightmap artifacts.
- LOD selection is handled by a CPU-side quadtree, deciding which tile resolution to render at which position.
- Tile cache keeps rendering smooth:
- Height + texture tiles are stored in dedicated GPU textures.
- A CPU tile manager assigns priorities and writes downloaded tiles to the GPU texture.
- An LRU strategy ensures visible tiles remain cached while unused tiles are dropped.
- Three.js – WebGL abstraction & rendering
- Custom GLSL shaders – GPU clipmap for vertices, Height Shader
- TypeScript – CPU quadtree logic & tile streaming
Clone the repo and install dependencies:
git clone https://github.com/david-westreicher/mapvis.git
cd mapvis
npm install
npm run start