3D.city — From Idea to a Browser-Based 3D City
The project started with a simple idea: take the classic city-building simulation concept and turn it into a modern, fully 3D experience that runs directly in the browser.
The goal was not just to create a visual 3D city, but to build an actual playable city simulation where the player can interact with and manage a living city.
Starting the Project
The first step was establishing the basic web application and the 3D rendering environment.
The project uses Three.js as the main rendering framework. This provides the foundation for displaying buildings, roads, terrain, textures, lighting, and other elements of the city in real time.
From the beginning, browser performance was an important consideration. A city can contain thousands of objects and simulation updates, so the architecture needed to be designed with performance in mind.
Building the 3D World
Once the rendering foundation was in place, the next step was creating the actual city environment.
The project uses custom 3D models, textures, and shaders to make the city more than a collection of simple blocks. The rendering system is responsible for turning the underlying city data into a visual 3D world.
Different development tools and map/tile utilities were also created during development to make it easier to work with the city’s terrain and map data.
Adding the City Simulation
A beautiful city is not enough for a city-building game. The city needs to actually simulate itself.
For this, the project integrates micropolisJS, an open-source city simulation engine descended from the original SimCity source.
This gives the project the underlying logic required for a functioning city simulation while allowing the 3D frontend to provide a completely different visual experience.
One of the important architectural decisions was to run the simulation inside a Web Worker.
Instead of performing all simulation calculations on the main browser thread, the simulation can run separately while Three.js focuses on rendering. This helps keep the interface responsive and the 3D world smooth.
Connecting Simulation and Rendering
The next challenge was connecting the simulation with the 3D world.
The simulation produces city data, while the rendering system interprets that data and displays the appropriate structures and changes in the world.
This creates the core loop of the project:
Simulation → City Data → 3D Rendering → Player Interaction → Simulation
This separation between simulation and rendering makes the project easier to expand while also helping with performance.
Supporting Different Hardware
Another important part of the development process was making the game usable on different systems.
The repository contains different entry points for the experience, including a normal graphics version, an advanced GPU/WebGPU-oriented version, and a low-performance version.
This allows the project to experiment with different rendering capabilities rather than assuming every player has the same hardware.
The main experience is designed to run in modern browsers using WebGL2 or WebGPU, making the game accessible without requiring a traditional desktop installation.
Bringing Everything Together
After the rendering system, simulation, assets, map tools, and browser interface were connected, the project evolved from a technical experiment into a playable 3D city-building prototype.
The final application combines:

A real-time Three.js 3D environment
Custom shaders, textures, and 3D models
The micropolisJS city simulation
Web Worker-based simulation processing
Browser-based gameplay
Multiple graphics configurations
Supporting tools for maps and tiles
An open-source codebase

The result is 3d.city, a fully browser-playable 3D city builder.

The city is built in the browser — and this is only the beginning.