This ASCII cyberpunk city looks like a lost game experiment

A 3D city made from letters, numbers and punctuation sounds like the kind of thing you’d expect from an old terminal demo. This one goes much further. The project builds a walkable cyberpunk-style city inside a web browser, with buildings, roads, cars, pedestrians and trees all drawn using ASCII characters. There aren’t any normal texture maps covering the walls. There aren’t detailed 3D models doing the heavy lifting either. What you see on screen comes from code turning simple characters into a moving city. And it actually feels three-dimensional.

The city is more than a static ASCII picture

Most people know ASCII art as a fixed image made from keyboard characters. Move the viewpoint and the illusion usually disappears. That doesn’t happen here. The city changes as the camera moves. Turn left and the buildings shift with your viewpoint.

Walk forwards and nearby objects grow larger while distant ones shrink. Roads stretch into the distance, structures overlap properly and moving objects stay in place as you look around. That’s what makes the project interesting. It’s not simply drawing a cyberpunk scene with text. It’s calculating a 3D environment in real time and then using ASCII characters to display the result.

Ray casting handles much of the visual work

The project uses ray casting to work out what the player can see. The basic idea is fairly simple. The program sends imaginary rays out from the camera and checks what they hit. Those calculations tell the renderer how far away a wall, building or object is. The browser can then decide where that object should appear on screen and how large it needs to be.

Old-school 3D games used similar techniques because ray casting can create convincing depth without processing huge amounts of geometry. Here, the final image isn’t made from textured polygons. It’s made from characters. That’s a big difference.

JavaScript turns the calculations into a city

Everything runs in the browser using JavaScript and HTML canvas. There’s no need for a full game engine. The code keeps track of the player’s position, the city layout and the objects moving through it. It then redraws the visible scene as the camera changes. The city itself uses a grid-based layout. That keeps things manageable.

Instead of storing every building as a complicated 3D model, the program can describe parts of the city using simpler data. One section might contain a road. Another might hold a building of a certain height. Other areas can include trees, pedestrians or traffic. The renderer reads that information and decides what should appear on screen.

The ASCII characters aren’t just decoration

This part matters. The project isn’t rendering a normal 3D scene first and then placing a text filter over the top. The characters are a core part of the rendering style.

Different symbols help suggest brightness, distance, shape and surface detail. Dense characters can make an area look darker or more solid. Lighter characters can suggest open space or objects farther away.

It’s a limited visual system, but that’s also what gives the city its look. You don’t need realistic bricks, windows or road textures to understand what you’re looking at. Your brain fills in a surprising amount from the shapes, spacing and movement.

Motion makes the effect much more convincing

Screenshots only tell part of the story. The city works best when it’s moving. Walking through a street makes the depth easier to read because objects shift naturally around the viewpoint. Cars and pedestrians also help establish scale.

Trees add another useful effect. Parts of the foliage can appear semi-transparent, allowing brighter objects behind them to remain visible instead of disappearing into a solid block of characters. Small details like that stop the image from becoming visual noise. With ASCII graphics, readability is everything. Too many characters in the wrong places and the scene quickly becomes difficult to understand.

It’s a compact way to build a 3D browser world

The most interesting part isn’t simply that someone made a city out of text. It’s how little the project relies on the usual 3D toolbox. There’s no giant collection of models. No stack of high-resolution textures. No complicated asset pipeline. The city comes from a grid, some maths, JavaScript and a renderer designed around keyboard characters.

That keeps the idea focused. It also shows how much can still be done with basic browser technology when the rendering method matches the project.

The project is still being developed

The city isn’t finished yet. More detail, atmosphere and interaction could still be added, but the current version already proves the main idea works. You can move through a real-time 3D environment while the browser constantly rebuilds the view using letters, numbers and symbols.

It’s an unusual combination of familiar techniques. Ray casting has been around for decades. ASCII graphics are even older. JavaScript and canvas are standard browser tools. Put them together this way, though, and you get something that feels very different from the average web demo.