Low Poly Globe web app with shareable map URLs

General
1

Hi everyone, I’ve created a stylised globe using CesiumJS here:

Screenshot 2020-08-28 at 23.27.35
Screenshot 2020-08-28 at 23.27.352876×1228 1.76 MB

You can see a video here:

The web app lets you share links to your map with other people (please do by the way, I’d love to see any great views you’ve found on here or on twitter #LowPolyGlobe )

I do a lot of Lino Printing so reducing images to their basic components while still being recognisable is something I find fascinating. I’m new to Cesium so this was an exercise in turning everything off so that we’re left with only 4 colours. All fog, lighting, and atmosphere are off. I also said goodbye to the sun and moon. And the skybox is the same, flat one-color png repeated on all sides. I also exaggerated the terrain by a factor of 2.

The half-tone texture (which you can turn on using the button at the bottom) is a PNG I found which is then overlayed across the whole screen with some funky CSS to blend it with the map in the background:

filter: brightness(1.5);
mix-blend-mode: overlay;
opacity: 0.5;
box-shadow: inset 0 0 100px 50px black;

The mapping is served from Mapbox. I used their basic style and, again, turned off everything except land, water, walking paths, and hillshading and re-coloured it all. That is then draped over the Cesium terrain model.

You can see the Mapbox map on its own here: Outdoor low poly | Mapbox

If you find a good view at Low Poly Globe please copy the URL or use the “copy map link” button to share it here or on twitter.

Here’s one of my fav’s: Mt Fuji

If you have any feedback or find any bugs! let me know.

Have fun,

Steve

5 Likes
2

This is absolutely beautiful! Thank you so much for sharing a bit about the behind the scenes on this Steve. Initially I thought there was some shader magic going on to get the low poly look (like in this thread Forcing a low poly look on Cesium3DTileset) but I can see that’s basked into the imagery from Mapbox.

I love how polished this feels. I also love that this inspired by your work in printing. I think it’s really cool when expertise from different media like this can overlap and cross pollinate (this is in some ways the story of CesiumJS itself, folks applying computer graphics techniques to the cartography/GIS world).

One thing I had trouble with is actually finding places where I knew there were interesting landmarks. I kind of wish there was a geocoder or some way I could just enter a longitude/latitude. I had to put together a Sandcastle to print the X/Y/Z of the location I click on to then enter that in the URL in the low poly globe viewer.

3

With that said, here’s a couple of my favorites. Meteor Crater in Arizona, US. It’s one of the largest craters in the world that isn’t filled with water and looks pretty dramatic here (rightfully so!)

image
image1633×1363 172 KB

Glen Canyon has some pretty steep cliffs. I had trouble actually picking a single spot here. The terrain around this area is just so varied and has such interesting texture.

image
image1633×1363 214 KB

1 Like
4

Thanks for your kind words Omar. And for the links to further low-poly reading. So glad you enjoyed the demo.

I deliberately left off a geocoder (thinking of it as a toy - and making the user work to explore the map) but am now wondering if that was the right design decision. I have also been playing with it and wishing it had one! You’ll probably see a geocoder appear when I get some time to update.

I’m also considering letting people add titles to their maps, a bit like:

Thanks for sharing the views - lovely finds.

Steve

1 Like
5

I see you added a search box! This is so much fun to play with now - the Grand Canyon looks mesmerizing

image
image1843×795 430 KB

https://steveattewell.com/lowpoly/#-1963848.806352388,-4768633.021325198,3774255.228800967,2.0896902238863655,-0.7680727092683695

I think the thing I love the most about this is how any still looks like a print/painting, and then I start to move the camera and it comes to life!

I bet this would look amazing with a slow camera orbit. Here’s a quick Sandcastle example I just put together of how to do that. This is what I used for this “Matterhorn in Cesium” video: https://twitter.com/Omar4ur/status/1252753913503272963.

2 Likes
6

Hah, you saw that I added search back in - yes. Sometimes searching seems to fly you through/beneath the ground when you “land” at the search result. I think this is because I added quite a bit of TerrainExaggeration (it seems to work fine with TerrainExaggeration set to 1.0). I’m not too worried about that though.

I like the Camera orbit suggestion. Thanks for the example code that’s very helpful - I would have struggled to write this. I’m off on holiday for a week but will try to incorporate this soon. You’re right that the map can look very abstract and strange when static, then comes to life when you move it.

1 Like