Usually when I make a map generator I focus on the underlying algorithms and data. The data will be used by a game project, so the visuals are meant to be informative and not necessarily pretty. For this project I wanted to make the output pretty. I previously blogged about the unusual projection I'm using for the graphics. It allows you to see the rivers and coastlines top-down but see the mountains from the side. There are two other interesting graphical tricks I'm using to make the maps prettier.

Non-photorealistic shading

The first is that I'm not using standard lighting and shading. Inspired by this page about shading for cartography, I experimented with ways to make the maps look more like maps and less like a 3D rendering. I still have a lot more experimentation ahead. I may blog about this in the future. Here are some variants:


Variants of shading

The second is outlines. I'm a big fan of black outlines around objects. In hand-drawn art it's common to draw the outlines of objects, but in standard 3D rendering you don't get this. Here's an image showing the regular 3D renderer on the left and outlines added to the right:

No outlines on the left; outlines on the right

Look at how much of a difference it makes!

So how does it work?

There are toon/outline shaders but I did something simpler. In the first pass, render the map, but output the z value (or elevation) instead of the map color:

Z value (color is {r: 0.2+0.5*sqrt(z), g: z, b: 0.7-0.7*z})

Then I render the map again, looking for differences in the z value. That's where outlines will go. By tweaking the formula, I was able to see hills too:

Differences in Z value

I then apply non-photorealistic lighting to make the mountainsides look more interesting:

Outlines and lighting

The final color is the outline+lighting level (0.0 to 1.0) multiplied by the biome color:

Final output

I'm really happy with how it looks! My next steps are to improve performance and improve the visuals some more.

Labels: , ,

1 comment:

Amit wrote at December 12, 2024 10:25 AM

Some outline bookmarks:

https://ameye.dev/notes/rendering-outlines/
https://bgolus.medium.com/the-quest-for-very-wide-outlines-ba82ed442cd9
https://panthavma.com/articles/lines/deep-overview-extraction/
http://geoffprewett.com/blog/software/opengl-outline/
https://blog.maximeheckel.com/posts/moebius-style-post-processing/
https://aaronhertzmann.com/2023/07/31/occluding-contours-part-1.html
https://www.atomwolf.org/posts/rendering-outlines-with-a-post-processing-shader/