Hoi An by Night: a real old town from OpenStreetMap

By Cowork Game Studio · Published · Drone Sim

Hoi An by Night: colourful lanterns reflected in the river as the quad races towards a ring

Hoi An's old town, on the central coast of Viet Nam, is famous for its yellow shophouses, its covered bridge and, above all, its lanterns. At night thousands of them hang across the streets and are reflected in the river. It is a beautiful place to walk, and, as we found, a beautiful place to race a drone through at night.

Building it for Drone Sim meant solving three problems: getting the streets right, filling them with houses, and lighting the whole town with lanterns on hardware as modest as a phone or a standalone VR headset.

Real streets from OpenStreetMap

We wanted the town to feel like Hoi An, not like a generic "Asian town", so the plan comes from OpenStreetMap, the free, community-made map of the world, published under the Open Database License. We downloaded the old town's data and wrote small tools that extract what a race course needs: the centre lines of the main streets such as Trần Phú, Nguyễn Thái Học and Bạch Đằng, the river banks, the covered Japanese bridge (Chùa Cầu) and the An Hội bridge.

Those features keep their real positions. The streets themselves are widened to 11–12 metres, about 1.2 times their real width, because a racing drone needs a little more room than a pedestrian. After all the adjustments, roofs cover 49% of the land north of the river, compared with 48% in the map data, so the town keeps its real density. The import is fully reproducible: run the tools again and you get the same town, byte for byte.

Shophouses built in code

We use free CC0 asset kits for some courses, such as Toy Town, but no kit had Vietnamese shophouses. So every house in Hoi An is generated in code. Each one starts as a simple box; a shader paints the walls, doors, shutters and balconies, and the gable roofs are built as real geometry, with a more detailed roof close to the drone and a very simple one far away. Around 400 houses line the streets this way, all drawn in a handful of batches.

About a thousand lanterns, without a thousand lights

The lanterns are the heart of the course, and the biggest technical challenge. The town has around a thousand of them. A real light for each lantern is out of the question: even a fast graphics card struggles with more than a few dozen lights, and a VR headset with far fewer.

Instead, the glow of every lantern is calculated once, when the course loads, and stored in a single light texture laid over the town, with each texel covering about 64 centimetres. The walls and paving read that texture, so the light from every lantern falls on the street around it at almost no cost. On top of that, a small pool of real lights follows the drone, attached to the lantern strings nearest to it, so you still see moving light and shadow as you fly past: seven on the best quality settings, down to one on the lowest.

The lanterns themselves are a single shape drawn many times in one batch, with fewer triangles on lower quality settings. The glow around them comes from a bloom effect on capable devices and from simple halo images on lower settings and in VR. The lanterns and their strings have no collision, so you can fly straight through them, a small mercy given how many there are.

A river full of reflections

The river is where Hoi An is at its most beautiful at night, and where a naive approach would be most expensive. A true mirror reflection would draw the whole town a second time every frame. Instead, the lantern reflections are drawn as soft vertical streaks of light on the water, the way reflections look on a gently moving river, all in one draw call. Hundreds of streaks fade out with distance, and floating flower candles and sampans with painted eyes on their bows complete the scene.

Like Ha Long Bay, the river is part of the challenge: touch the water and your run ends. The race line runs low over the river and through the covered bridge, so it pays to know where it is.

Night lighting

The rest of the scene is lit like a clear night: a dark blue sky with stars and a moon, a dim blue moonlight in place of the sun, and warm, low fog that softens the far end of the streets. The contrast between the cool sky and the warm lantern light is what makes the town read as Hoi An at night, even at a glance.

Within budget on every device

Measured at the busiest points of the course, Hoi An stays within our per-frame budgets on every device class:

Device classBudget (draws / triangles)Hoi An, peak measured
Desktop, high quality150 / 600,000up to 80 / 327,000
iPhone, medium quality110 / 250,000up to 51 / 129,000
Meta Quest, both eyes80 / 120,000up to 66 / 115,000

Credit where it is due

Hoi An by Night would not exist without the people who map the world on OpenStreetMap. The street plan is © OpenStreetMap contributors, used under the Open Database License, and credited in the game's licence notices.

Fly it yourself: open Drone Sim in your browser and choose Hoi An by Night. The course guide has tips for the narrow streets.

Have a question about this article or found something that does not match the game? Write to us at support@coworkgamestudio.com.

More from the devlog

Ready to fly?

Drone Sim runs in the browser on a computer, phone or tablet. No download, no sign-up.