Top
Best
New

Posted by juscha1 6 hours ago

Show HN: Isometric SF – A pixel-art map of the SF Bay Area(isometricsf.com)
Technical Write-up: https://www.justinchavez.com/blog/isometric-sf-how/

Hi HN! Showcasing this fun project. I took 1300 square miles of the SF Bay Area from Google Photorealistic 3D Tiles and transformed them into a cohesive pixel map. It's really fun to explore and stumble upon various famous landmarks like Apple Park, Palace of Fine Arts, or UC Berkeley.

The technicals involve using Nano Banana 2 to train a Qwen-Image-Edit 2511 LoRA which is used to prototype the style and generation methods. For final map I used Qwen to train a Klein 4B LoRA which reproduced the style at 1/4 of the cost. More details in the blog post.

Let me know what you think! I really enjoyed this process of fine-tuning smaller open source models.

If I did the map with Nano Banana 2 it would have cost around 7k USD!

Credit for the idea goes to Isometric NYC.

137 points | 49 comments
drayfield 3 hours ago|
Sorry to be a downer, but this looks really bad to me. It completely lacks the sumptuous precision of real pixel art.
weego 3 hours ago||
I was going to post the same, zooming in it's jpg artifacts and ghosting, I assume it was pixel perfect at some point in the process but isn't now.
elxr 1 hour ago||
It's straight up not "pixel art".

Maybe a "close enough" emulation of pixel art, if we're being generous.

mlmonkey 5 hours ago||
OP didn't mention it (or maybe I missed it), but the underlying imagery comes from the Google 3D photorealistic tiles API: https://developers.google.com/maps/documentation/tile/3d-til...

They offer a generous 1000 API calls per month for free, in case anyone is interested in replicating this.

fwipsy 2 hours ago||
This is neat but maybe we could call it "pixel-art-styled?" Pixel art is all about attention to detail; this is more like applying a shader (though I see some AI artifacts in there too.)
kenferry 5 hours ago||
…not actually pixel art though, no?
simlevesque 3 hours ago||
Search for "pixel art" in HN's search and you'll see most of the last submissions are the same fake pixel art.

"pixel art" NYC: https://news.ycombinator.com/item?id=46721802

"pixel art" Rio: https://news.ycombinator.com/item?id=50448289

"pixel art" London: https://news.ycombinator.com/item?id=50163735

"pixel art" Valencia: https://news.ycombinator.com/item?id=50441518

"pixel art" world: https://news.ycombinator.com/item?id=49674973

There's almost a hundred of them and I'm not exagerating:

> https://isometriccities.com/ Since Isometric NYC, makers around the world have been rebuilding their hometowns as giant SimCity-style maps. We collect every one of them. 98 maps

shrinks99 5 hours ago||
Yeah. I'm surprised this technique hasn't yet caught on among people doing generative visuals with "pixel art" aesthetics: https://github.com/Hugo-Dz/spritefusion-pixel-snapper
vunderba 4 hours ago|||
I mention this a lot: the two basic post-processing steps you have to do, at a minimum, to give genai images even a semblance of pixel art are palette reduction and square grid alignment.

Unfortunately, the definition of "pixel art" like "vibe coding" has been diluted to the point of almost being meaningless.

If you have a project like this with tens of thousands of tiles, you have to run them all through square grid alignment. That process tries to pick an optimal square grid and then reduce the image to a discrete set of pixels, with each square resolved to a single color.

It's similar to what you do when you shrink an image using nearest-neighbor scaling. As a result, you mitigate a lot of the irritating high-frequency noise and fringing that occur in these higher-resolution pixel art images from generative AIs.

Applying it to a project with tens of thousands of images still requires a lot of manual intervention. This is what makes separates good pixel art from bad pixel art: even at a low resolution of 16x16 or 32x32, it's still recognizable.

Try taking any of the 512x512 tiles from this particular isometric city project (or any of the other dozen variants) and feed'em into Spritefusion and you'll quickly see what I mean.

https://imgpb.com/ePXki

elxr 1 hour ago|||
> Unfortunately, the definition of "pixel art" has been diluted to the point of almost being meaningless.

Nah, people who enjoy pixel art games, and pixel-artists have complete clarity on what pixel art means. There is zero dilution to that term among people who actually have pixel art drawing talent.

Conscat 2 hours ago|||
Mixels and incoherent palettes had confused the term pixel art long before genAI imo.
larodi 4 hours ago|||
Why does anyone need to publish anything like this snapper, the person doing pixelart, if he understands pixelart, should know to do it himself! this is the third map published here in apparent diffusionart which is absolutely not a pixelart. besides for buildings - pixelart artists would choose repeating stuff that diffusion models would never be able to reproduce, at least for the FP errors that pile while it happens.
dllu 2 hours ago||
Here's a 7388 x 5097 photo I took from a friend's Cessna of the Mission from a similar angle in 2018 which provides a nice point of reference for comparing the fine details:

https://i.dllu.net/2018-04-14-23-31-28_DSC04018_6201e8e3a215...

You can see some buildings, like 350 Treat Ave, which is a white warehouse in the middle of the photo, are blended from two colors in this isometric viewer. It's yellow on the left and grey on the right, when in fact it is uniformly white throughout. This is probably due to image generation running separately on two tiles and then blending them together.

Still, from a distance, this looks great.

30minAdayHN 3 hours ago||
This is so beautiful! Something soothing and ultra clean about it. Maybe all the maps should have this rendered version as default.
scosman 5 hours ago||
Also see isometric Toronto: https://iso.sloptoronto.ca/#v=3&x=102672&y=64255&z=0.262
kristopolous 12 minutes ago||
lat/lng mapping would be great
AntonyGarand 2 hours ago||
I thought I already saw that project few months ago, but turns out it's a similar submission under the same concept: "Isopolis – Isometric pixel map of SF "!

Looks great, I love the style you chose, it was enjoyable to move around and explore

[0]: https://news.ycombinator.com/item?id=49149966

armcat 2 hours ago|
I've done something similar with generating pixel-style images of Stockholm. Unfortunately imagegen models are quite bad at localised details. It looks good on the surface, but when you look closer or zoom in you see structurally things that don't make sense, like windows disappearing, or walls just not making any sense at all.
More comments...