Rendered at 05:25:55 GMT+0000 (Coordinated Universal Time) with Cloudflare Workers.
fwipsy 1 days 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.)
They offer a generous 1000 API calls per month for free, in case anyone is interested in replicating this.
ffaccount2 16 hours ago [-]
I guess they edited it, because OP starts with
>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
e_y_ 17 hours ago [-]
Just for fun you might be able to get away with it, but it's likely that this violates the Maps API terms of service.
throwaway2025_1 20 hours ago [-]
From the article about 8 'paragraphs' in.
"Capturing the Renders
...
First, the data. It comes from Google's Photorealistic 3D Tiles. Each tile is a 3D box, ..."
kenferry 1 days ago [-]
…not actually pixel art though, no?
simlevesque 1 days ago [-]
Search for "pixel art" in HN's search and you'll see most of the last submissions are the same fake pixel art.
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
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.
> 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 1 days ago [-]
Mixels and incoherent palettes had confused the term pixel art long before genAI imo.
larodi 1 days 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.
leugim 1 days ago [-]
How much it cost you paint per km2 after training the model? I did (and publish here) https://www.tinyvalencia.com and got to 0.4$ per km2 after training the model (for 15$ or so).
juscha1 1 days ago [-]
It cost around $0.09 per km2 after training the model
nphardon 1 days ago [-]
this is really cool, but I wish it was oriented north south (maybe thats not as pleasing re the isometry?), just because that's how I think about the city and navigating it, so this makes me like, instinctually rotate my head.
juscha1 1 days ago [-]
Thanks! I choose this orientation to highlight the coast of the SF Bay area more.
nphardon 1 days ago [-]
That's cool! The coast really frames it nicely.
30minAdayHN 1 days ago [-]
This is so beautiful! Something soothing and ultra clean about it. Maybe all the maps should have this rendered version as default.
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
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:
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.
dnlzro 1 days ago [-]
I've been seeing a lot of these kinds of projects make the rounds on Twitter lately. Yours is just as good as the best of them, so great job making it more efficient without loss of quality!
But... I'm always disappointed when I zoom in and see that it's not actually pixel art, and it's full of the kinds of artifacts that are typical of any AI-generated imagery :(
packeted 1 days ago [-]
Found my house in East Bay and it looks accurate, cool.
armcat 1 days 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.
ubasu 1 days ago [-]
This misses large parts of the Bay Area, which is nine counties: Alameda, Contra Costa, Marin, Napa, San Mateo, Santa Clara, Solano, Sonoma, and San Francisco. Here, pretty much everything east of 680 and north of the Richmond Bridge is missing. No Mt. Diablo, no Livermore, only bits of Dublin, Pleasanton, San Ramon etc.
Conscat 1 days ago [-]
Wow, it captured the pool in my apartment complex. I love this! I was a bit disoriented by north being left.
xp84 1 days ago [-]
It did a great job of my former places I lived in the Bay as well. And also, same disorientation from this choice of angle. But all the same it’s fun.
cmdoptesc 1 days ago [-]
Hi Justin, great writeup!
I really appreciate your human-written documentation because it's nice to read your thought process instead of LLM marketing soundbites.
re: orientation. I know it's creator's choice, but for me, it's either north or west towards the ocean. East makes me want to hold shift to rotate. :)
Thanks for making and sharing this!
juscha1 1 days ago [-]
Thank you! I tried to get Fable to take a stab at writing the technicals in the original reflection post, but I really didn't like it and sought to rewrite it myself. Took a week longer, but I'm way happier with the result.
Yep. You can see Google Earth-style photogrammetry artifacts (e.g. around power lines and pylons,) with AI artifacts layered on top, and also the edges of different tiles don't always align so sometimes you get a "double vision" effect.
(I still like it overall)
JLO64 1 days ago [-]
Another good place spot those artifacts is on the CalTrain tracks.
gofreddygo 1 days ago [-]
I'd love examples of good pixel art to constrast this against ?
vunderba 1 days ago [-]
For old-school pixel art, try looking through the sprite sheet assets of old 8-bit NES games on The Spriters Resource.
For contemporary pixel art, Yacht Club Games, makers of Shovel Knight and Mina the Hollower, is an absolute gold standard.
Sea of stars (another rpg) is about as good as pixel art gets.
pfg_ 1 days ago [-]
Pixel art is generally made out of well-defined pixels that are all on the same grid in the same scale. When you zoom in, the pixels look sharp. Pixel art usually rarely has anti-aliased lines, whereas every line in Isometric SF is anti-aliased.
Comparison of how lines look with vs without anti-aliasing:
- https://retrodiffusion.ai/explore/5818 (AI generated, but the output was constrained to make it have pixels, instead of having downscaled smooth lines that look anti-aliased)
Agree except: pixels aren't always sharp. It's before my time, but I'm told pixel art on CRTs looks pretty fuzzy.
vunderba 1 days ago [-]
It also depends on the system.
Back in the day running something like Super Mario 3 often meant composite video going through RF hookup and the TV "recovering" and decoding. I'm sure that accounted for a bit of the blurriness.
Contrast this with a game like Commander Keen for DOS running in 16-color graphics on a VGA CRT monitor which sends separate R, G, B signals. I remember Keen being very crisp even as a kid who practically pressed their face against the glass when playing.
Not pixel art. If the polygons visible when completely zoomed in are any indication, it's 3D rendered. Don't let that detract from how utterly gorgeous and intricately made it is though!
tptacek 1 days ago [-]
Whoah.
elxr 1 days ago [-]
It's straight up not "pixel art".
Maybe a "close enough" emulation of pixel art, if we're being generous.
gojomo 1 days ago [-]
Is there any way to rotate the perspective, as in Google Maps with 2-finger gestures (touchscreens) or shift-drags (mice/etc)?
(I couldn't find it, if it already exists.)
juscha1 1 days ago [-]
Not at the moment. It's captured at a fixed angle.
modeless 1 days ago [-]
This style seems achievable while retaining 3D rendering if the tiles are preprocessed in 3D instead of 2D and some clever shaders are used.
JeremyHerrman 1 days ago [-]
unfortunate that google explicitly forbids 3D model generation from their map data
1 days ago [-]
modeless 1 days ago [-]
I'm pretty sure that re-rendering the tiles to 2D and rehosting them on your own website is also forbidden. So no difference there.
va3ndf 1 days ago [-]
This is my favorite one yet! I used to live in SoMa and this captured my apartment and the nearby Caltrain wonderfully!
thot_experiment 1 days ago [-]
It's always heartening to see stuff like this because it really throws into stark illumination just how much AI just can't make up for a lack of taste.
kccqzy 1 days ago [-]
I wouldn’t really call it pixel art but nevertheless looks cool. And there are way fewer cars than in real life: most of the major highways seem suspiciously empty.
tarballing 1 days ago [-]
Pixel art this ain't
Lucasoato 16 hours ago [-]
The only safe way to see Tenderloin or Mission.
citizenkeen 1 days ago [-]
> I came up with product ideas like the share button, caught edge cases like a bridge being drawn as water, and when the agents needed more compute, or more SSDs to hold all the data, I went and got them.
This is even less than I would have assumed, and I assumed very little human involvement.
NeuraCryption 1 days ago [-]
This is amazing and is 1:1 global map. Did you use google maps API to build this or UE5?
juscha1 1 days ago [-]
I used the Google 3D Photorealistic Tiles API then rendered the tiles in three.js to capture them at the angle I wanted
leugim 1 days ago [-]
Google 3D tiles.
cobychapple 1 days ago [-]
finally Bay Area land for $0.09 per square mile.
xixixao 1 days ago [-]
Awesome. Next step: Make the trains and cars move!
blobbers 1 days ago [-]
Just wanted to say... this is beautiful!
yboris 1 days ago [-]
Impressive! And the aesthetics look great!
eska 14 hours ago [-]
Reminds me of the “Silicon Valley” drama intro. Was fun to rewatch the show and see which companies were dominant at the time (it was updated throughout the seasons).
novideonoradio 15 hours ago [-]
Boring unoriginal crap in the same vein as "omg an AI generated this image of a unicorn playing guitar while narwhals are eating bacon".
jeffbee 1 days ago [-]
Not bad. I feel like instead of using an image-mode model, it would be better to use a code model that generates the scene. Reason I think this is that the image generators aren't respecting the rules of "pixel art". Straight lines and flat planes are straight and flat in pixel art. These images are wavy and irregular.
kristopolous 1 days ago [-]
lat/lng mapping would be great
bastiilling 1 days ago [-]
Looks great!
iJohnDoe 1 days ago [-]
I think this is really cool. Has a retro feel to it.
They offer a generous 1000 API calls per month for free, in case anyone is interested in replicating this.
>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
"Capturing the Renders ... First, the data. It comes from Google's Photorealistic 3D Tiles. Each tile is a 3D box, ..."
"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
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
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.
Looks great, I love the style you chose, it was enjoyable to move around and explore
[0]: https://news.ycombinator.com/item?id=49149966
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.
But... I'm always disappointed when I zoom in and see that it's not actually pixel art, and it's full of the kinds of artifacts that are typical of any AI-generated imagery :(
I really appreciate your human-written documentation because it's nice to read your thought process instead of LLM marketing soundbites.
re: orientation. I know it's creator's choice, but for me, it's either north or west towards the ocean. East makes me want to hold shift to rotate. :)
Thanks for making and sharing this!
Technicals written by Fable at the end of this post: https://www.justinchavez.com/blog/isometric-sf/
1. https://www.justinchavez.com/blog/isometric-sf/
(I still like it overall)
For contemporary pixel art, Yacht Club Games, makers of Shovel Knight and Mina the Hollower, is an absolute gold standard.
https://www.spriters-resource.com/nes/mm2
https://www.yachtclubgames.com/blog/breaking-the-nes
Sea of stars (another rpg) is about as good as pixel art gets.
Comparison of how lines look with vs without anti-aliasing:
- https://media.geeksforgeeks.org/wp-content/uploads/202307201...
Examples of "real" pixel art:
- https://www.slynyrd.com/blog/2022/11/28/pixelblog-41-isometr...
- https://www.behance.net/gallery/18524751/Pixel-Art-City
- https://platform.theverge.com/wp-content/uploads/sites/2/cho... (this may look blurry if you zoom in or have a monitor display scale other than 1x, but when viewed properly the pixels are sharp)
- https://retrodiffusion.ai/explore/5818 (AI generated, but the output was constrained to make it have pixels, instead of having downscaled smooth lines that look anti-aliased)
Examples of "fake" pixel art:
- https://media.easy-peasy.ai/61515f6c-78d2-4786-95ec-ccada6e5... (the pixels vary in size and shape, and are blurry)
- https://media.easy-peasy.ai/c558c867-167c-4f11-afed-c9f85f2a... (same issue)
- https://easy-peasy.ai/ai-image-generator/images/pixel-art-of... (you can see at the very bottom of the apple, the pixels are half the height they are supposed to be)
- https://www.reddit.com/r/midjourney/comments/1ifcul5/pixel_a...
- https://pixelartvillage.com/images/fuji_demo.webp (the original image is downscaled and has a limited palette, but the pixels are placed randomly)
Back in the day running something like Super Mario 3 often meant composite video going through RF hookup and the TV "recovering" and decoding. I'm sure that accounted for a bit of the blurriness.
Contrast this with a game like Commander Keen for DOS running in 16-color graphics on a VGA CRT monitor which sends separate R, G, B signals. I remember Keen being very crisp even as a kid who practically pressed their face against the glass when playing.
Maybe a "close enough" emulation of pixel art, if we're being generous.
(I couldn't find it, if it already exists.)
This is even less than I would have assumed, and I assumed very little human involvement.
Anyone able to?
You can search by lat lon to find places not listed. Will add this one though thanks for pointing out!