This project serves as a prototype and benchmark for a future overhaul of the iTowns labelling system.
It implements a custom SDF-based instanced text renderer for Three.js, alongside a React Three Fiber testbed to benchmark it against existing 3D text solutions.
iTowns' current labelling system does not scale well past a few thousand labels. Existing instanced 3D text renderers for Three.js rely on static font files (.ttf, .woff) that must be shipped or hosted alongside the application.
This repository explores an alternative approach: a custom text renderer that generates SDF atlases at runtime from system fonts using @mapbox/tiny-sdf. Labels are drawn using instanced meshes driven by data textures.
- Dynamic SDF generation without shipping font files
- Support for text justification, anchors, colors, and halo effects
- RTL and Arabic character support via
@mapbox/mapbox-gl-rtl-text - Real-time benchmarking UI against Troika, Batched Troika, UIKit, and CSS3DRenderer
Note: This repository uses Git LFS for font and SVG assets. Please ensure
git lfsis installed before cloning.
First, install the dependencies, then run the development server:
npm install / npm ci
npm run devThis project inherits the dual CeCILL-B / MIT licensing of the iTowns project.
Third-party dependencies (Three.js, @mapbox/tiny-sdf, @mapbox/mapbox-gl-rtl-text) carry their own respective open-source licenses. See the LICENSE file for full details.
Author: Moncef Hassani
This project was developed at Ciril Group, specifically as a research and optimization effort for the iTowns project.
Copyright (c) 2026 Moncef Hassani | Ciril Group