live
Games & interactive 3D · Web
Boon Sop: The Unbroken Debt
An episodic first-person survival horror game for the browser, set in rural Cambodia in 1932.
- Babylon.js
- WebGPU
- TypeScript
- Vite
Public projectGames & interactive 3D · Web· 3D· Maps
Cambodia 3D Map
An interactive 3D map of Cambodia with real terrain, hand-modeled Khmer landmarks, and turn-by-turn navigation.
Overview
MapLibre renders terrain and OpenStreetMap building footprints, with custom 3D models for Angkor Wat and Independence Monument. Navigation follows the phone’s GPS and switches to a chase camera with route arrows and voice guidance.
Case study
The problem
A useful 3D map of Cambodia needs to help people recognize places and follow a route on a phone. Detailed landmarks alone are not enough: the experience also has to work with incomplete building data, mobile rendering limits, and the location capabilities a browser actually provides.
Key decisions
Combine broad coverage with specific landmarks
MapLibre renders terrain and extruded OpenStreetMap buildings, while custom Three.js models add Angkor Wat and Independence Monument. This gives the map a countrywide base without hand-modeling every building.
Trade-off
Missing building heights use estimates. The result is a stylized map, and prominent towers still need height verification.
Share one navigation engine with the route preview
Live navigation uses GPS for route snapping, rerouting, voice prompts, and a following 3D camera. The desktop preview feeds simulated GPS into the same engine, making the navigation behavior explorable without taking a phone onto the road.
Use open services and state their limits
Place search uses Photon and routing uses the OSRM public demo server. This keeps development independent of paid map keys while supporting route planning and turn-by-turn guidance.
Trade-off
The demo routing service needs replacing before a production launch. Live traffic and background navigation are outside the current implementation.
Outcome
The project implements a browser map with terrain, recognizable Cambodian landmarks, place search, route previews, and foreground GPS navigation. The next production steps are replacing the demo routing service, verifying building heights, and testing on mid-range Android devices.
Product artwork
A cover and three feature panels designed around the product’s interface and colors. Select any image to see it in full.
04 / Technologies
Technologies
- MapLibre GL JS
- Three.js
- Next.js
- TypeScript
- OpenStreetMap
05 / Public resources
Public resources
Related projects
live
Games & interactive 3D · Web
Bondeth World
My portfolio as a place — a floating cartoon island in the browser with interactive project galleries, an AI portal, and a BMW M4 you can drive.
- React
- TypeScript
- Three.js
- React Three Fiber
- Vite